图片优化方案

前言

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

如何为不同场景选择不同的图片格式？

JPEG(Joint Photographic Experts Group)

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

优势

• 它支持极高的压缩率，因此JPEG图像的下载速度大大加快。
• 它能够轻松地处理16.8M颜色，可以很好地再现全彩色的图像。
• 在对图像的压缩处理过程中，该图像格式可以允许自由地在最小文件尺寸（最低图像质量）和最大文件尺寸（最高图像质量）之间选择。
• 该格式的文件尺寸相对较小，下载速度快，有利于在带宽并不“富裕”的情况下传输。

劣势

• 并非所有的浏览器都支持将各种JPEG图像插入网页。
• 压缩时，可能使图像的质量受到损失，因此不适宜用该格式来显示高清晰度的图像。

适合

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

不适合

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

PNG(Portable Network Graphics)

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 透明度。
• 可以重复保存且不降低图像质量

劣势

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

适合

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

不适合

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

GIF(Graphics Interchange Format)

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

优势

• GIF是压缩格式的文件，用于减少文件在网络上传递的时间
• 支持无损耗压缩和透明度。动画 GIF 很流行，易于使用许多 GIF 动画程序创建

劣势

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

适合

动画、图标。

不适合

不适合存储色彩图片。

WEBP

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

优势

• 支持无损压缩和有损无损
• 占用体积小
• 可支持透明

劣势

兼容性不好

适合

适合图形和半透明图像。

不适合

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

怎么让图片加载得更快

压缩 png：node-pngquant-native

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

var pngquant = require('node-pngquant-native');
var fs = require('fs');
var path = require('path')

fs.readFile(path.resolve(__dirname, './image/product.png'), function (err, buffer) {
  if (err) throw err;
  var resBuffer = pngquant.compress(buffer, {
    "speed": 1
  });

  fs.writeFile(path.resolve(__dirname, './image/produc_out.png'), resBuffer, {
      flags: 'wb'
  }, function(err){
    console.log(err);
  });
});

压缩 jpg：jpegtran

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

// 全局安装
$ npm install --save jpegtran
// 命令行执行
$ jpegtran -copy none -optimize -outfile [输出文件路径] [输入文件路径]

压缩 gif：gif：Gifsicle

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

图片尺寸随网络环境变化

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

响应式图片

	<img 
	  src="纸箱回收.png" 
	  srcset="金属类.png 1.1x, 布料类.png 1.2x"
	/>

总结

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

• 不同场景选择不同的图片格式
• 如何让图片更快的加载
• 图片的替代方案
• 服务器端对图片的优化

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