什么是响应式图片？在一个网站的资源中，图片往往是网络负载的主要组成部分，占据了大部分的负载，而且这种现象会随着时间的推移而持续下去。.虽然现在的网络连接速度在不断提高，但是高DPI分辨率的设备也越来越多。为了在这些设备上有更好的性能，需要更高清晰度的图片。需要更大的文件大小。并且因为我们还需要支持一些相对非高DPI分辨率的设备，我们需要有低分辨率的图片，所以我们需要一个更好的解决方案来为不同的设备提供不同的图片，即响应式图片（Responsiveimages））。同时，也要遵循web资源的准则，在性能和性能之间保持平衡，合理提供图片资源，不加载不需要使用的冗余资源。事实上，简化响应式图片的关键是为不同的设备选择合适的类型和分辨率。为不同的设备提供恰到好处的分辨率对于性能来说是最佳的。太高的分辨率不仅意味着更多的传输时间，还意味着渲染时间需要缩放。太低的分辨率会让高DPI设备得不到应有的最佳体验。从理论上讲，确实有可能为所有设备提供恰到好处的清晰度。However,therearetoomanydeviceswithdifferentDPIs,soinpractice,themorereasonablesolutionistoselectaseriesofmainadapteddevicestogeneratecorrespondingimagecollections,andotherdevicesshouldappropriatelyselectsimilarsolutionimagesforprocessing.飞涨。如何设置响应式图片取决于你适配的地方（CSS、HTML、JS）和用于什么目的（UI、UX），这主要出现在CSS和HTML中，下面主要讲解如何选择合适的图片类型，以及如何根据清晰度等因素响应式地选择图像。网页图片类型目前支持的主要有两类：位图图片（bitmapimages,rasterimages），矢量图（scalablevectorgraphicsSVG）位图图片按压缩类型分为有损和无损图片，广泛使用的格式主要有JPEG,PNG,GIF,WebP矢量图主要有SVG(scalablevectorgraphicsSVG)Web有损位图有损图片的压缩算法往往直接从源文件压缩过程中丢弃一部分信息，核心是根据级别设置1~100，通过降低图像质量来换取更小的尺寸。最常用的有损图像是JPEG。例如，数码相机拍摄照片时，以无损格式存储，但下载到计算机时，通过有损压缩算法转换为JPEG图像。JPEG支持24位真彩色，但不支持透明度，因此常用于相似照片、不透明图片等，其缺点也很明显。极度有损压缩会导致显示效果有明显差异，特别容易受到二次压缩的影响，即已经压缩过的文件有损压缩的效果特别降低。明显的。但一般来说，注意选择合适的压缩级别，效果下降往往察觉不到，大小下降百分之几十。更好的有损图片：WebP，但是WebP并不是所有的浏览器都支持，所以需要对不支持的浏览器实现fallback来显示JPEG或者PNG格式的Web无损位图无损图片的压缩算法正好相反，信息在源文件不会被丢弃。当网络上的图像质量至关重要时，无损图像恰到好处，例如网站图标。无损图像根据颜色值中存储的位数分为8位图像（8-bitimages-256-color）和真彩色图像（Full-colorimages-1670万色）。其中以无损8位图为代表，如：png、gif，其中gif支持动画，都适合画质要求，但不需要全彩和多变的透明色。PS：虽然gif只支持8bit的图片，但是动画可以通过一些hack实现更清晰的视觉表现。参考知乎网站。其次，无损真彩色图像的代表有：全彩PNG（24位png）、LosslessWebP，其中全彩PNG比WebP支持的色值范围更广。另外需要注意的是，当你不需要透明色，对质量要求不是特别高的时候，应该优先选择有损的WebP或者JPEG，而不是全彩的PNG。无损图像非常适合美术图像、人像研究、摄影等。选择8位图像或真彩色图像需要经验。基本规则是对仅使用简单颜色或需要完全透明颜色支持的图像使用8位图像格式。使用全彩色图像。Web特殊格式WebP从早期的Internet开始，光栅图像格式就只有JPEG、GIF和PNG。为了优化网页图片的加载速度和性能，谷歌（google）开发了一种新的图片格式WebP。图片压缩体积仅为JPEG的2/3左右，可以节省大量的服务器带宽资源和数据空间，在压缩方面优于JPEG和PNG。虽然目前已经有很多浏览器支持WebP，比如Chrome（谷歌浏览器）、国产QQ浏览器、UC浏览器等Webkit核心浏览器都支持这种格式，但也有一些如IE系列、Firefox等主流浏览器使用率比较高部分系列浏览器不支持WebP，所以在使用WebP时，必须实现相应的fallback策略（订阅本系列教程，我会继续讲解如何更方便的解决这个问题）。WebP的压缩效果优于JPEG和PNG。有损WebP支持透明度对于JPEG也是不可能的。虽然色度值没有PNG那么多，但除非是一些网站图片对色值要求精度，否则大部分Scenario开发者都会优先支持WebP。另一方面，WebP支持动画，压缩和性能都优于GIF，但由于很难统计和判断浏览器是否支持动画WebP，所以很难控制fallback，除非你有一小部分这种支持WebP但不支持动画WebP的浏览器用户不予考虑，建议不要使用WebP代替GIF。Web矢量图形SVG矢量图形SVG使用矢量矩阵来存储几何图形和比例，以支持任意大小的缩放。您可以看到下图的示例。放大几次后的svg质量仍然完美。这是SVG和位图最大的区别。然而，目前的设备都是以像素为单位的，所以所有的显示输出最终都会转化为像素。这可以清楚地表明矢量图形如果要在这些设备上显示，需要经过一个称为光栅化的过程。每当图像尺寸发生变化或缩放时，都必须经过这个计算光栅化过程，从而保证每台显示器的画面质量。如果您熟悉创建向量矩阵，那么您应该熟悉InjectAI等设计软件。尽管这些软件支持的原生文件格式是二进制，但SVG的格式是XML（文本类型），其根节点标识其媒体类型image/svg+xml。此功能使得可以直接在文本编辑器中修改，或在HTML中内联，甚至直接在SVG中使用CSS和媒体查询。虽然SVG从1999年开始就被纳入W3C标准，但真正被网站使用是近几年的事。它之所以受欢迎，是因为它在不同分辨率的设备和显示器上都能完美显示。当然SVG也不是万能的，它的优势主要局限于以下几个方面，比如：呈现Logo、图标、线条等。另一方面，由几何形状组成的固定色块的图像也适用。如何选择通过上面对各个图片格式的使用场景的概括介绍，了解哪种图片格式最适合一个场景就显得尤为重要。下面分享一些常见的注意点和经验来划分图片格式的选择。您可以根据要提供的内容按照表格选择最合适的图像格式。图片格式支持彩色图片类型压缩类型适用场景PNG全彩光栅图无损质量损失不可接受，或显示内容要求全透明或全彩色。适用于任何图像格式，但对照片的压缩程度不如JPEGPNG(8)256光栅无损内容，不需要全色或只需要简单的1位透明度支持，例如图标、像素阵列GIF256无损光栅图像是不像PNG(8)压缩那么高，其他都一样，但是支持动画，主要用于动画JPEG全彩光栅图有损内容需要全彩，或者不使用透明度，质量损失是可接受的。例如照片、SVG、全彩矢量图、未压缩内容、全彩支持，支持缩放时质量不变。非常适合线条艺术、几何图形和其他非摄影内容，针对无需特殊处理的多分辨率显示进行了优化WebP（有损）全色光栅图像有损，否则与JPEG相同，但更好它支持透明度和压缩性能和效果。WebP（无损）全色光栅是无损的。其他方面与全彩PNG相同，但压缩性能更好。最新的系列教程，可以关注我的博客https://biaomingzhong.github。输出/
