图片优化

 

减少和替代图片

• 减少不必要的图片资源
• 如果可以，使用css3的效果替代图片效果
• 使用web fonts而不是用图片来显示文本信息

要记住，好的设计都是简单且性能很好的。减少图片资源可释放更多的字节给HTML，JS，CSS或者其他资源。

然后，你要想想使用css是不是可以替代图片的相同效果？

• CSS 效果(渐变, 阴影, 等)和css动画，产生的内容和分辨率无关，在各种伸缩的情况下不变分辨率，占用的字节比图片小的多。 
• Web fonts 可以使用偏亮的字体，同时保留了选中，搜索和调整字体大小的功能。

矢量图VS像素图

• 矢量图对于包含几何图形的图片是首选
• 矢量图可伸缩，和分辨率无关
• 像素图用户复杂的一大堆不规则形状和细节的图片

矢量图  像素图

• Vector graphics 使用点，线，几何来表示图片
• Raster graphics 使用矩形栅格表示每个像素

矢量图适合包含简单的几何图形（例如，logo，文本，icon等），在任何像素和缩放设置下都保持清晰的效果，所以，在高分辨率的屏幕下和需要放置在不同大小的屏幕上时，矢量图是首选。

然而，当图片复杂的时候（例如，照片），要使用像素图，例如 GIF, PNG, JPEG, 或者新额格式比如JPEG-XR和WebP.

像素图放大会变模糊和呈现锯齿状。

高分辨屏幕的实现

• High resolution screens have multiple device pixels per CSS pixel
• High resolution images require significantly higher number of pixels and bytes
• Image optimization techniques are the same regardless of resolution

一个CSS像素可能包含很多设备像素——例如，一个css像素可能只是包含一个设备像素，也可能包含多个设备像素。

设备像素越多，呈现的内容更加细节化。

高DPI (HiDPI)屏幕产生了漂亮的效果，但是同时也要求了图片包含更多的细节信息。

矢量图可以在任何的像素下面渲染并且保持高清晰度。

如果像素图拥有越高的像素数量，意味着图片也越大。

所以在高分辨率屏幕下的尽量使用矢量图，不行的话针对不同的屏幕分辨率使用不同像素的像素图。

优化矢量图

• SVG 是一个基于XML的图片格式
• SVG 应该被极简化
• SVG 文件应该通过GZIP压缩

所有的现代浏览器支持SVG，我们可以直接在页面中嵌入svg。

svg也可以被大多数创作矢量图的软件创作出来，或者你可以直接时候文本编辑器创造svg。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

上面创作了一个简单的圆，黑色的边框，红色的背景，并且被Adobe Illustrator输出成svg格式。

上面的代码包含了很多信息，比如layer信息，注释和XML的命名空间等等，这些信息通常对于浏览器的渲染不必要。

所以，你可以删除它们，你可以使用工具（例如svgo）来极简化你的svg文件。

svgo同时也减少了源文件的58%的大小。

因为svg是基于xml形式的，所以我们可以使用GZIP来压缩。

优化像素图

• 一个像素图是像素点的栅格
• 所有的像素点包含了颜色和透明度信息

像素图是简单的二维像素点栅格——例如，一个100*100像素的图片是一个10，000像素的序列。每一个像素点保存了 “RGBA” 值: (R) 红色通道, (G) 绿色通道, (B) 蓝色通道, 和(A) 透明通道.

内部，浏览器分配了256个值给每个通道，也就是说分配了8位给每个像素(2 ^ 8 = 256), 每个像素4个字节 (4 channels x 8 bits = 32 bits = 4 bytes).所以我们知道了图片的像素，我们可以自己计算像素图的大小：

• 100 x 100px图片包含了 10,000像素
• 10,000 pixels x 4 bytes = 40,000 bytes
• 40,000 bytes / 1024 = 39 KB

Note

不管图片的格式是怎样的，当图片被浏览器解码的时候。每个像素都会占用4个字节的内存容量。这对于没有太多的内存的设备（例如，低终端的手机设备）而言，存储大图片变得有些困难。

从左到右分别是(PNG): 32-bit (16M colors), 7-bit (128 colors), 5-bit (32 colors).

无损压缩vs失真压缩

• 无损压缩对于我们的眼睛而言是最好的
• 图片压缩是一个无损压缩和失真压缩的函数
• 不同的图片格式在无损和失真压缩算法上有着不同
• 没有一个简单的最好的格式亦或对于所有图片而言的“高质量的设置”：所有的设置和图片格式压缩将产生一个独特的输出结果

对于一些类型的数据，例如网页的源码，例如可执行的文件，压缩此类文件最重要的是不要改变亦或失去原来的文件数据信息，微小的改变都将会导致文件内容的改变，更坏的亦可能损坏整个文件。相反对于其他类型的数据，例如图片，音频和视频文件，最好是返回和原来的数据“差不多”的数据。

一个典型的图片优化管道包含了两个级别的步骤

1.图片进行“无损”压缩过滤

2.图片进行“有损”压缩过滤

第一种方法是最号的，不同的图片形式有不同的无损压缩算法，但是，图片通过有损压缩可以减小它们的大小。

实施上，各种图片形式之间的不同，例如 GIF, PNG, JPEG,和其他类型, 是它们在进行有损和无损压缩的时候使用（或忽略）的特定算法之间的不同。

所以最优化的压缩依赖于图片的内容和你自己对于图片大小和图片失真程度的标准。

在一些情况下，你可能想跳过失真优化来在图片最大的保真度上展示图片细节，在其他情况下，你可能想使用失真优化来减少图片的大小。

这是根据你的需求和你自己的判断进行的——没有四海皆准的设置。

就像上面的例子，当使用有损耗的形式例如JPEG格式，压缩器将特定大的展示用户自定义的“quality”设置选项（例如，在Adobe Photoshop里的“Save for Web”功能）,选项是1到100的数字，数字控制了内部失真和无损算法。

为了最好的效果，对于你自己的图片尝试多种不同的设置，不要害怕设置较小的quality参数，因为如果图片视觉效果越好，图片大小也会更大。

不同格式的图片相同的图片质量，图片效果将不一样。相同类型的图片相同的图片质量，不同的压缩器，图片效果也不一样。

选择正确的图片格式

• 开始选择的时候，从通用的格式里选择：GIF, PNG, JPEG
• 从多方面测试并选择出最好的图片形式: 图像质量，画板大小等
• 针对现代浏览器，考虑使用WebP 和 JPEG XR图片格式

除了不同的压缩和失真算法，不同的图片格式支持不同的特性，例如动画和透明通道。

所以，“最合适的图片格式”意味着理想视觉效果和功能需求的集合。

Format	Transparency	Animation	Browser
GIF	Yes	Yes	All
PNG	Yes	No	All
JPEG	No	No	All
JPEG XR	Yes	Yes	IE
WebP	Yes	Yes	Chrome, Opera, Android

这里有三种通用的图片格式： GIF, PNG, 和 JPEG. 除了这些图片格式，一些浏览器也支持更新的图片格式，例WebP和 JPEG XR, 它们提供了更加好的总体压缩和更多的特性，所以我们应该使用什么图片格式？

1. 需要动画否？需要——使用GIF格式。
   • GIF 限制了调色板为256个颜色。颜色选择如此之少，使得只有在动画需要的时候才会用GIF格式。
2. 需要在高分辨率下图片保存良好细节？使用PNG
   • PNG没有应用任何的图片失真压缩算法，所以，它将产生最高质量的图片，当然是以较高的图片大小作为代价，使用时考虑清楚。
   • 如果图片包含的内容是集合图形，建议将图片转换成矢量图（SVG的）格式。
   • 如果图片包含的内容是文字内容，使用web font不要使用图片。web font可伸缩可选择可搜索，这些特性图片文字都木有
3. 你在优化一张图片，截图亦或想优化成相似内容的图片？使用JPEG
   • JPEG使用了失真压缩和无损压缩的结合来减少图片文件的大小。 使用时，请在不同的质量和图片的大小之间做出最优组合。

最后，考虑新的图片格式 WebP 和 JPEG XR。虽然浏览器对它们的支持程度（尚且）不好，但是它们在较新的浏览器使用时能节省大量资源——例如，WebP相对于JPEG格式图片在图片大小上要小30%。

因为WebP 和 JPEG XR普遍的不被支持，所以你需要额外的技术支持来支持你的图片： 

• 一些 CDN提供了图片优化服务，包括JPEG XR 和 WebP运输.
• 一些开源工具 (e.g. PageSpeed for Apache or Nginx) 自动化了图片优化，图片转化等
• 你可以书写代码来检测浏览器时候支持那种格式的图片，并且提供最适合的图片格式。

使用工具

没有一种工具可以优化所有格式的图片。如果想要达到最好的效果，你要根据你的图片内容，图片视觉效果和技术需要来选择图片格式和设置图片参数。

Tool	Description
gifsicle	创造和优化GIF图片
jpegtran	优化JPEG图片
optipng	无损PNG优化
pngquant	有损PNG优化

不要害怕在各种压缩器上对参数进行各种尝试。将quanlity参数设置成最低，然后提高，不断尝试，一旦你发现一套最好的设置参数，你可以将它们运用到你网站上其他相似的参数上，但是不要认为所有的图片参数都必须一样。

传输已设置过大小的图片

• 传输已经设置过大小的图片是最简单且最高效的优化方式 
• 注意高开销的资源 
• 调整你的图片到展示的大小来减少不必要的像素 

图片优化归根到底只有两个方法：减少图片的每一个像素所占字节，亦或优化像素总大小：图片的大小是像素乘以每个像所占字节的总数。

所以，最简单也是最高效的图片优化方式是：传输的图片大小比浏览器展示的图片大小要小。

听上去简单，但是很多的网站都木有做到这一点，典型的，他们常常传输更大的图片，并且依靠浏览器来重新调整图片的大小——这样常常消耗了额外的CPU资源——并且以更加低的分辨率展示它们。

Note

• 在Chrome审查元素中，将鼠标停留在图片元素上，将展示图片的“原始Natural”和“展示display”大小。在上例中， 300x260像素大小图片被下载但是当它展示的时候被缩小 (245x212) 展示在浏览器上。

所以，你要尽量减少不必要的像素损耗! 

图片优化方法清单

图片优化是一个既艺术又科学的操作：艺术是因为没有一个确定的答案告诉你针对特定的图片怎样优化是最好的实现方案，科学是因为有很多发展良好的技术和算法来支持减少图片的大小。

记住下面的tips，

• 首选矢量图格式: 矢量图片是不依赖像素和大小的，这让它们对于不同的设备和高分辨率设备而言是完美的选择。
• 减少和压缩SVG: 使用绘图软件产生的XML标记常常包含了不必要的数据，可以删除；确保你使用了GZIP来压缩你的SVG
• 选择最优的像素图格式：根据你的实际需求选择最适合的图片格式
• 对像素图尝试最佳的质量设置： 不要害怕降低质量参数大小，效果常常非常棒且节省了很多的字节。
• 减少不必要的图像信息: 许多像素图片包括了不必要的数据：地理位置，照相机信息等等。使用合适的工具去除这些信息。
• 调整图像大小: 在服务器上重新设置图像的大小，确保小于浏览器展示的图片大小。
• 自动化,自动化, 自动化: 使用自动化工具个设备来确保你所有的图片总是最优的。

原文：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en