原文地址：

• Essential image optimization

1.每个人都应当压缩图片

在Mac下可以使用 ImageOptim 对图片进行无损压缩，windows或者linux可以使用 FileOptimizer 对图片进行处理。
更具体的讲，这些工具能够移除图片中的不需要的 EXIF meta-data 信息。

• JPEGs 可以使用 MozJPEG(对于网络内容使用q=80或者更低都可以，'q=80'表示原来质量的80%)
• PNGs 可以使用 pngquant
• SVGs 可以使用 SVGO
• 不要使用特别大的GIFs图片，使用 H.264视频代替(chrome， firefox或者opera 可以使用WebM)，如果不想使用视频，至少用 [Giflossy](https://github.com/pornel/giflossy)处理一下
• 一些浏览器通过接收请求头，这样我们可以条件的选择服务格式，对于 基于 blink 内核的浏览器，比如Chrome, 可以使用有损的 WebP 格式, 其余浏览器可以使用 JPEG/PNG 格式作为fallbacks

2.简介

1.图片仍旧是导致web浮肿的首要原因

图像优化由不同的措施组成, 可以减小图像的文件大小。它最终取决于您的图像所需的视觉保真度。

如图1：

#1 image-optimisation.jpg

可以看出图片优化可以分为：

• 选择正确的图片格式
• 合适的尺寸
• 自适应性
• 压缩
• 确定关键图像的优先级
• 懒加载
• 使用工具处理

常见的图片优化包括压缩，依据屏幕尺寸使用 <picture>/<img srcset> 采用不同的图片，以及减少图片编码的花销

2.如何判断我们的图片需要优化呢？

可以使用以下几款工具；

• WebPageTest 网页性能测试网站( 很强大的网站 )，可以查看图片压缩情况，以及优化方案
• 使用Chrome60+自带的 Audits panel 来查看

3.如何选择图片格式

正确的图片格式是想要的视觉效果和功能需要的一种结合体。你是否使用过光栅图片(Raster images) 或者 矢量图(Vector images)

图片2：

#2 raster 和 vector.png

• Raster graphics: 表示使用矩形栅格像素编码的图片，它们不是分辨率或者缩放独立的。WebP 和其它广泛使用的格式，比如 JPEG, PNG,都是光栅图像，还有 Guetzli 和 MozJPEG 也是
• Vector graphics: 矢量图使用点线面办事图像。通常用于简单的几何形状，比如logos,它能够提供一个高分辨率和缩放自由的图片，比如 SVG

选择错误的格式会让你付出代价，选择正确格式的逻辑流程可能充满危险，使用不同格式进行存储试验，可以谨慎的承担这种风险。

1.谦卑的JPEG格式

JPEG是世界上使用最广泛的一种图片格式，各种设备对这种格式编码支持性也十分友好。

JPEG是为了节省空间的一种抛弃信息压缩算法，并且它在保存图片视觉保真度的同时尽可能的减少图片尺寸。

你的使用情况可接受的图片质量是什么？

所有的优化工具都可以让你自由的选择想要的压缩级别，高的压缩级别可以减少图片尺寸，但同时会产生失真，光晕，块状模糊

图片3：

#3 jpeg格式压缩.jpg

选择质量：

• Best quality: 当质量要求大于带宽支出时。图像在您的设计中具有很高的突出地位, 或者显示为完全分辨率
• Good quality；当你想要更小的尺寸，但同时对图片质量影响太大时。用户对图片质量比较在意时
• Low quality：当带宽更重要时，比较适合网络情况比较差的情形
• Lowest quality：带宽节省是头等大事时。用户可以更快的加载页面

JPEG压缩模式

JPEG有多种压缩模式，最流行的是：

• baseline(sequential) : 基本模式，图片至上而下加载
• Progressive JPEG(PJPEG): 渐进式模式，图片由低质量向高质量过度
• lossless: 无损模式，通过移除 EXIF DATA 完成

baseline模式图：

图片4

#4 baseline模式.jpg

Progressive JPEG 渐进式模式: PJPEGs 从低分辨率(blurry)开始加载到高分辨率

图片5

#5 渐进式模式.jpg

渐进式模式的优势：PJPEGs提供一个低分辨率的预览，用户会感觉图片加载得更快了，这会提升用户体验。

渐进式模式的劣势：PJPEGs比baseline模式解码慢3倍。有时候这个3倍可能会花费很长时间，对于桌面端有强大的CPU无所谓，但是对于移动设备，这回占用更多的CPU资源

如何创建PJEPGs

工具和库，比如 jpegtran, jpeg-recompress, imagemin等支持导出渐进式JPEGs.如果你已经有图片优化的管道，你可以直接的添加渐进式加载功能：

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('images', function() {
    return gulp.src('images/*.jpg')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('dist'));
})

4.使用 srcset 传递HIDPI图片

用户可能通过高分辨率的桌面或者移动显示器访问网站。Device Pixel Ratio(DPR), 也称之为 'CSS pixel ratio', 用原来决定设备屏幕分辨率如何被CSS解释的。DPR是手机提供商创建的，用于增加移动设备屏幕分辨率和锐度，同时元素看起来不会太小。

图片6：

#6 device-pixel-ratio.jpg

srcset 允许浏览器依据不同设备选择最合适的图片，例如，对于 2x 移动显示器 选择 2x 图片。对于不支持 srcset 的浏览器，可以<img>使用 src进行回滚。

<img srcset="paul-irish-320w.jpg,
             paul-irish-640w.jpg 2x,
             paul-irish-960w.jpg 3x"
     src="paul-irish-960w.jpg" alt="Paul Irish cameo">

相关教程：

• Responsive Images - 免费视频
• Google Images Guide

5.懒加载图片

懒加载就是只有用户需要图片时才延迟加载图片，是一种常见的网页开发模式。比如，当你滚动条下拉时，图片异步按需加载。这可以作为图片压缩策略之后的进一步处理。

懒加载的好处：

• 减少数据的使用： 因为我们可以假设用户不一定需要所有的图片，我们可以只加载最少量的资源，这对移动端特别友好
• 减少电量使用：更少的工作量可以节省电量
• 提升下载速度：降低网页整体加载时间。对于图片很多的网站，这会极大的提升用户体验

有很多网站，比如 Medium, 首先显示一个小的，高斯模糊的内联预览（100 bytes）,当图片完全加载之后再显示full-quality图片

图片7

#7 懒加载 先模糊后高清.jpg

实现类似功能，可以参考：

• 使用CSS Filters
• webpack loader 实现

如何实现懒加载

有很多技术和插件能够实现懒加载，推荐使用

• lazysizes 性能好，功能全

这个库不需要任何配置，只需要添加到网页中即可，然后添加class="lazyload" 到 images/iframes中，并且使用 data-src 或者 data-srcset 属性，另外对于低质量的图片可以使用 src 属性

// 非响应式的
![](image.jpg)

// 响应式 并且自动计算大小
<img 
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
        image2.jpg 600w,
        image3.jpg 900w"
    class="lazyload" />

// 使用iframe
<iframe
    frameborder="0"
    class="lazyload"
    allowfullscreen=""
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE"
></iframe>> 

另外一些CDN支持对图片进行裁剪和响应式，比如阿里的OSS，外国的Cloudinary

图片8

#8 cloudinary-responsive-images.jpg

(https://github.com/aFarkas/lazysizes) 的其它功能：

• 对当前和未来懒加载的元素自动检测可视性变化
• 包含标准的响应式图片支持（picture && srcset）
• 添加自动尺寸计算和媒体查询功能别名
• 可用于images/iframes css和js文件很多的 页面
• 扩展性好，支持插件
• 轻量但是成熟的解决方案
• SEO友好：对于爬虫不隐藏 images/assets

当然 lazysizes 不是唯一选择，其余的一些库，比如 lazy load xt, blazy.js, unveil等等

懒加载是一种广泛使用的模式，对节约带宽，提升UE十分有用。

6.避免display:none 陷阱

以前响应式图片解决方案经常误用 display css属性，反而导致更多的图片请求。现在一般更偏向使用 <picture> 和 <img srcset> 来加载响应式图片

你是否在媒体查询中在特定的breakpoints使用 display: none 来设置图片呢？比如

![](dog.jpg)

<style>
    @media (max-width: 640px) {
        img {
            display: none
        }
    }
</style>

或者使用class来隐藏图片

<style>
.hidden {
  display: none;
}
</style>
![](img.jpg)
<img src=“img-hidden.jpg" class="hidden">

这样浏览器会将2个图片都请求回来，设置 display: none 图片还是会请求。但是下面使用 background: url() 的方式可以不用请求。背景图片不会被计算和下载当渲染文档时

<div style="display:none">
  <div style="background: url(dog.jpg)"></div>
</div>

虽然上面方式可行，但是更偏向使用<picture> 和 **<img srcset>

7.缓存图片资源

可以使用 HTTP cache headers来缓存图片资源，更具体点，使用 Cache-Control来定义缓存资源和缓存时间，比如 Cache-Control: public; max-age=31536000（即一年）

8.预加载重要的图片资源 preload critical image assets

我们可以使用 <link rel="preload"> 预加载重要的图片资源。<link rel="preload"> 允许我们强制浏览器请求资源而不阻塞文档的 onload 事件。这使得我们增加请求那些可能只有文档解析完成之后才能被发现资源的优先级。

图片可以使用 as="image" (我们也可以请求js资源 字体资源)

# 图片资源
<link rel="preload" as="image" href="logo.jpg" />

# 字体资源
<link rel="preload" as="font" 
href="//www.crsc.philips.com/images/123.woff2" type="font/woff2" crossorigin>

<link rel="preload"> 浏览器支持： chrome, 基于Blink内核的浏览器，比如Opera, Safari开发版，firefox

示例网站：

• Philips
• Flipkart

图片9

#9 使用preload和不使用的区别.jpg

总结

扩展阅读

• Web Performance in Action
• High Performance Images