图片优化不完全指北

图片是一个网站的重要组成部分，图片影响这页面的美观和品质。简单来说图片对于网站建设的作用就是吸引用户、彰显网站风格、美化网站、简化网站页面，所以图片在网站中起到的作用完全不亚于软文，有的甚至效果比软文还要好。但是图片的不合理使用可能会影响页面的打开速度和用户的正常浏览，在对网站进行优化的时候，可以从图片这一方面入手。

JPEG（JointPhotographicExpertsGroup）是JPEG标准的产物，该标准由国际标准化组织（ISO）制订，是面向连续色调静止图像的一种压缩标准。JPEG格式是最常用的图像文件格式，后缀名为.jpg或.jpeg。

它支持极高的压缩率，因此JPEG图像的下载速度大大加快。

它能够轻松地处理16.8M颜色，可以很好地再现全彩色的图像。

在对图像的压缩处理过程中，该图像格式可以允许自由地在最小文件尺寸（最低图像质量）和最大文件尺寸（最高图像质量）之间选择。

该格式的文件尺寸相对较小，下载速度快，有利于在带宽并不“富裕”的情况下传输。

并非所有的浏览器都支持将各种JPEG图像插入网页。

压缩时，可能使图像的质量受到损失，因此不适宜用该格式来显示高清晰度的图像。

颜色丰富的图片、彩色图、大焦点图、通栏banner图、不规则的图片等...

线条图形、文字/图片图形等...

png是一种采用无损压缩算法的位图格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。

PNG格式有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基础上增加了8位透明通道，因此可展现256级透明程度。

PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。8代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。

无损压缩

完全支持alpha透明度。

可以重复保存且不降低图像质量

体积偏大

纯色、透明、线条绘图、图标、边缘清晰，有大块相同颜色区域。颜色数较少，但是需要半透明。

由于无损存储，图片体积较大，不适合需要图片特别大的场景。

SVG是一种图形文件格式，它的英文全称为ScalableVectorGraphics，意思为可缩放的矢量图形。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

SVG可被非常多的工具读取和修改

SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强

SVG可在图像质量不下降的情况下被放大

不是所有的浏览器都支持SVG，IE8和早期版本都需要一个插件

复杂的图片会降低渲染速度(只支持小图)

IE8和早期版本的ie浏览器，如果想在页面中展现svg图片，需要安装adobe的SVGView插件。

高分辨率打印图片程序、设计动画、演示等...

对渲染速度要求比较大的网站，不适合需要图片特别大的场景。

GIF是一种位图。位图的大致原理是：图片由许多的像素组成，每一个像素都被指定了一种颜色，这些像素综合起来就构成了图片。GIF采用的是Lempel-Zev-Welch（LZW）压缩算法，最高支持256种颜色。由于这种特性，GIF比较适用于色彩较少的图片，比如卡通造型、公司标志等等。如果碰到需要用真彩色的场合，那么GIF的表现力就有限了。GIF通常会自带一个调色板，里面存放需要用到的各种颜色。在Web运用中，图像的文件量的大小将会明显地影响到下载的速度，因此我们可以根据GIF带调色板的特性来优化调色板，减少图像使用的颜色数（有些图像用不到的颜色可以舍去），而不影响到图片的质量。

GIF是压缩格式的文件，用于减少文件在网络上传递的时间

支持无损耗压缩和透明度。动画GIF很流行，易于使用许多GIF动画程序创建

GIF只支持256色调色板，因此，详细的图片和写实摄影图像会丢失颜色信息，而看起来却是经过调色的

动画、图标。

不适合存储色彩图片。

WebP是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式。WebP支持的像素最大数量是16383x16383。有损压缩的WebP仅支持8-bit的YUV4:2:0格式。而无损压缩（可逆压缩）的WebP支持VP8L编码与8-bit之ARGB色彩空间。又无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释数据。

WebP有静态与动态两种模式。动态WebP（AnimatedWebP）支持有损与无损压缩、ICC色彩配置、XMP诠释数据、Alpha透明通道。

支持无损压缩和有损无损

占用体积小

可支持透明

兼容性不好

适合图形和半透明图像。

只有256色，不适合彩色图片，不适合色彩丰富的图片。

这个工具，跨平台，压缩比高，压缩png24非常好。

node-pngquant-native

测试源码

压缩值50%左右。

跨平台，有Linux、Mac、Windows的解决方案。

jpegtran

压缩值15%左右。

通过改变每一帧的比例，减少gif的大小。它可以将多个GIF合并为一个GIF动画；将动画分解为其组件帧；更改动画中的单个帧；打开和关闭隔行扫描；增加透明度；为动画添加延迟、处理和循环；添加和删除评论；翻转和旋转；优化空间动画；更改图像的颜色图；和其他东西。

Gifsicle主页

GifsicleGitHub

压缩值30%左右。

在不同的网络环境下，加载不同尺寸和像素的图片。一般都是通过图片URL的参数来改变图片的尺寸。

根据用户的设备和使用场景提供合适的图片。对于开发者来说不可能预见用户使用的浏览器的所有设置，只有浏览器在打开和渲染的时候才会知道它设备的具体情况（屏幕大小、能力、尺寸等）。针对这些请求，开发者一般会准备不同版本的图片，例如：大、中、小，不同版本的图片对于不同屏幕大小和分辨率。选择最适合的视图尺寸往往能减少图片的大小，让图片加载的更快。

测试源码

注意:在Chrome中测试时，通过如下方式禁用缓存：打开DevTools，并选中Settings>Preferences>Network下Disablecache的选择框。否则，Chrome会优先选择缓存图片而不是恰好适配的那个。

src属性是我们非常熟悉的一个属性，在这里有两个作用：

指定1x大小的图片

在浏览器不支持srcset属性时的后备方案

srcset属性（浏览器支持的情况下），通过逗号分割图片的描述，让浏览器自己决定使用哪一个图片。

但是不幸的是，这种写法会带来一些问题，例如375像素1x、900像素1.25x都是使用的相同的图片，这其实并不是我们想要的结果。

测试源码

利用srcset和sizes信息来选择最符合规定条件的图像。

我测试电脑的dpr=2；

如果浏览器的viewport为小于等于480像素，图片宽高为50%（宽高=4800.5），浏览器视图加载一张4800.5*dpr(2)=480像素的图片，uswnt-480.png。

如果浏览器的viewport为小于等于640像素，图片宽高为25%（宽高=6400.25），浏览器视图加载一张6400.25*dpr(2)=320像素的图片，浏览器会尝试加载一张靠近尺寸的图片uswnt-480.png（如图一所示）。

如果我这里将25vw修改为40vw，6400.4dpr(2)=512，相对640和480更加接近480所以会显示uswnt-480.png（如图二所示）。

如果我这里将25vw修改为45vw，6400.45dpr(2)=576，相对640和480更加接近640所以会显示uswnt-640.png（如图三所示）。

图一

图二

图三

注意：sizes属性仅仅是对浏览器给出提示，并不能保证浏览器就会言听计从。所以我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。srcset和size列表是对浏览器的一个建议(hint)，而非指令。例如，设备像素比(dpr)为1.5的设备，亦可用1x也可用2x的图像，由浏览器根据其能力、网络等因素来决定

HTML元素通过包含零或多个元素和一个元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子元素，如果没有匹配的，就选择元素的src属性中的URL。然后，所选图像呈现在元素占据的空间中。

要决定加载哪个URL，useragent检查每个的srcset、media和type属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

media属性允许你提供一个用于给用户代理作为选择元素的依据的媒体条件(mediacondition)（类似于媒体查询）。如果这个媒体条件匹配结果为false，那么这个元素会被跳过。

type属性允许你为元素的srcset属性指向的资源指定一个MIME类型。如果用户代理不支持指定的类型，那么这个元素会被跳过。

和前面的作用是一样的这里就不多赘述了。

如果要为高DPI(Retina)显示提供更高像素密度的图像版本，请在元素上使用srcset。这使得浏览器可以在节约流量模式下选择低像素密度版本，且不需要您编写明确的media条件。

在任何情况下，你都必须在之前正确提供一个元素以及它的src和alt属性，否则不会有图片显示。当媒体条件都不返回真的时候，它会提供图片；如果浏览器不支持元素时，它可以作为后备方案。

当浏览器开始加载一个页面,它会在主解析器开始加载和解析页面的CSS和JavaScript之前先下载(预加载)任意的图片。这是一个非常有用的技巧，平均下来减少了页面加载时间的20%。但是,这对响应式图片一点帮助都没有,所以需要类似srcset的实现方法。因为你不能先加载好元素后,再用JavaScript检测可视窗口的宽度，如果觉得大小不合适，再动态地加载小的图片替换已经加载好的图片，这样的话,原始的图像已经被加载了,然后你又加载了小的图像,这样的做法对于响应式图像的理念来说，是很糟糕的。

在图片还处于加载中时，通常需要填充页面预览效果，这时往往会用到图片占位符，例如：天猫、京东使用一个div来充当图片加载中的占位。

我们也可以使用js的手段，动态的修改img的src达到占位的效果。

根据原始图片自动生成超小尺寸的缩略图。

注意：lqip只支持'jpeg','jpg','png'

利用生成的base64来填充src，但是我们在实际的项目中肯定不能手动的为每一张图片都用lqip生成一个base64填充到img中，这样效率也太慢了。所以工程化的角度有一个lqip-loader为JS包中导入的jpeg图像生成Base64。

lqip-loader

并且针对Base64，在Chrome为了节省内存和提高GPU性能，浏览器（包括从61.0.3163.38开始的Chrome）现在将呈现稍微更清晰或像素化的Base64编码图像。

左侧是旧版Chrome，右侧是Chromev61

SQIP将生成基于SVG的图像预览。它们可以用作延迟加载图像预览、视频缩略图或项目的艺术元素。

SQIP

我们前面提到为了让「图片加载的更快」，我们常常使用：

工具压缩图片，减少图片的大小，来提升加载速度

图片尺寸随网络变化，选择不同尺寸不同格式的图片，来降低显示图片的大小，从而提升加载速度

图片逐渐加载，利用占位符来降低图片加载慢的用户体验

但是我们真的一定需要图片吗？或许在一些场景下（注意：并不是所有场景），我们可以替换图片。

HTML5为我们提供了一种选择：webfonts。字体集可以包含图形图标和字符集。Webfonts可以替代图形：

IconFontDemonstration

Webfont图标的优点：

字体可以缩放到任意大小，使用任何颜色并应用CSS效果

webfonts提供了良好的跨浏览器兼容性，甚至可以在IE6中使用

单个字体文件可能比多个图像更有效

Webfont图标的缺点：

字体字符是单色的（尽管CSS3效果可以帮助）

生成字体不像PNG或SVG那样容易

如果只需要几个图标，则图像文件的大小会较小。

DataURI其实就是将图片数据转成base64字符串格式，再引入，相比普通的引入方式它不再需要发起网络请求，从而达到优化网页快速加载的目的（减少http请求）。

图片体积较小，没必要浪费一次http请求

访问外部资源受限或者很麻烦的情况

外部图片为动态的

Base64编码的数据体积是原始二进制图片的4/3，也就是大1/3

虽然相比普通引入加载更快，但是渲染更加耗时。实验结果显示DataURI的渲染比普通图片多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍，所以要在可接受的范围内适量使用

不会被浏览器缓存（可以通过css引入的方式来缓存）

图片服务器自动优化是可以在图片URL链接上增加不同参数，服务器自动生成不同格式、大小、质量的一种技术。例如在前面提到的「图片尺寸随网络环境变化」通过修改URL参数来达到目的也就是这样一个例子。

图片裁剪：按照长度、宽度、固定大小、长边、短边、填充、拉伸等缩放

图片格式装换：支持不同图片格式jpg、gif、png、webp，支持不同的图片压缩率

图片处理：添加图片水印、模糊等

AI处理：图片鉴别、抠图、排版、配色、合成等

将图片压缩、裁剪、格式转换等本地攻击部署到线上图片服务器上

内部运营或外网用户上传本地图片到图片服务知乎，服务器默认处理转换为多种格式，并推送到图片CDN服务器上

图片服务器对外开放多个域名，同事对各个业务线开发不同的业务路径

外网永华请求带特殊参数的图片URL时，图片服务器根据URL种不同的参数类型，从本地缓存中存取，或者实现对图片进行即时处理，返回给客服端

本文从总结了图片优化的四个大的方面：

不同场景选择不同的图片格式

如何让图片更快的加载

图片的替代方案

服务器端对图片的优化

在之前我们在做网站优化的时候总是把重点放在了站点的内容、结构、外链等诸多方面，往往会忽略及其重要的一方面，那就是图片的优化。可能有小伙伴讲了，图片不就是添加上去，能有什么需要优化的。其实不然近几年搜索引擎对于图片识别功能不断完善，加上人工智能的进步，因此小伙伴们对于图片的优化必须重视起来。

https://baike.baidu.com/item/JPEG%E6%A0%BC%E5%BC%8F/3462770?fromtitle=jpeg&fromid=213408&fr=aladdin

https://baike.baidu.com/item/JPEG%E6%A0%BC%E5%BC%8F/3462770?fromtitle=jpeg&fromid=213408&fr=aladdin

https://baike.baidu.com/item/GIF/217778

https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F/4077671?fr=aladdin

https://www.npmjs.com/package/node-pngquant-native

https://www.npmjs.com/package/jpegtran

https://github.com/papandreou/node-jpegtran

https://github.com/imagemin/jpegtran-bin

https://github.com/kohler/gifsicle

https://www.lcdf.org/gifsicle/

https://juejin.cn/post/7098854314365419533#heading-5