关于前端:现代图片性能优化及体验优化指南-响应式图片方案

本文是系列第二篇。系列文章：

1. 古代图片性能优化及体验优化指南 – 图片类型及 Picture 标签的应用

图片资源，在咱们的业务中堪称是占据了十分大头的一环，尤其是其对带宽的耗费是非常微小的。

对图片的性能优化及体验优化在明天就显得尤为重要。本文，就将从各个方面论述，在各种新个性满头飞的明天，咱们能够如何尽可能的对咱们的图片资源，进行性能优化及体验优化。

适配不同的屏幕尺寸及 DPR

下一个模块，咱们来看看图片资源如何更好的适配不同的屏幕尺寸。

这里首先会波及一个准备常识，屏幕的 DPR 值，那么，什么是 DPR 呢？要理解 DPR，又须要晓得什么是 设施独立像素 以及 物理像素。

设施独立像素

以 iPhone6/7/ 8 为例，这里咱们关上 Chrome 开发者工具：

这里的 375 * 667 示意的是什么呢，示意的是设施独立像素（DIP），也能够了解为 CSS 像素，也称为逻辑像素：

设施独立像素 = CSS 像素 = 逻辑像素

如何记忆呢？这里应用 CSS 像素来记忆，也就是说。咱们设定一个宽度为 375px 的 div，刚好能够充斥这个设施的一行，配合高度 667px，则 div 的大小 刚好 能够充斥整个屏幕。

物理像素

OK，那么，什么又是物理像素呢。咱们到电商网站购买手机，都会看一看手机的参数，以 JD 上的 iPhone7 为例：

能够看到，iPhone7 的分辨率是 1334 x 750，这里形容的就是屏幕理论的物理像素。

物理像素，又称为设施像素。显示屏是由一个个物理像素点组成的，1334 x 750 示意手机别离在垂直和程度上所具备的像素点数。通过管制每个像素点的色彩，就能够使屏幕显示出不同的图像，屏幕从工厂进去那天起，它下面的物理像素点就固定不变了，单位为 pt。

设施像素 = 物理像素

DPR（Device Pixel Ratio）设施像素比

OK，有了下面两个概念，就能够牵强附会引出下一个概念。DPR（Device Pixel Ratio）设施像素比，这个与咱们通常说的视网膜屏（多倍屏，Retina 屏）无关。

设施像素比形容的是 未缩放状态下，物理像素和设施独立像素的初始比例关系。

简略的计算公式：

DPR = 物理像素 / 设施独立像素

咱们套用一下下面 iPhone7 的数据（取设施的物理像素宽度与设施独立像素宽度进行计算）：

iPhone7’s DPR = iPhone7’s 物理像素宽度 / iPhone7’s 设施独立像素宽度 = 2

750 / 375 = 2
或者是 1334 / 667 = 2

能够失去 iPhone7 的 dpr 为 2。也就是咱们常说的视网膜屏幕。

视网膜（Retina）屏幕是苹果公司 ” 创造 ” 的一个营销术语。苹果公司将 dpr > 1 的屏幕称为视网膜屏幕。

在视网膜屏幕中，以 dpr = 2 为例，把 4(2×2) 个像素当 1 个像素应用，这样让屏幕看起来更粗劣，然而元素的大小自身却不会扭转：

OK，咱们再来看看 iPhone XS Max：

<img width=”300″ alt=” 屏幕快照 2019-07-08 下午 8 02 00″ src=”https://user-images.githubusercontent.com/8554143/60808691-7f682a00-a1bb-11e9-8300-294443443a9d.png”>

它的物理像素如上图是 2688 x 1242，

它的 CSS 像素是 896 x 414，很容易得出 iPhone XS Max 的 dpr 为 3。

为不同 DPR 屏幕，提供失当的图片

那么，DPR 和图片适配有什么关系呢？

举个例子，同样的 CSS 像素大小下，屏幕如果有不同 DPR，同样大小的图片渲染进去的成果不尽相同。

咱们以 dpr = 3 的手机为例子，在 300 x 389 CSS 像素大小的范畴内，渲染 1 倍 / 2 倍 / 3 倍 图的成果如下：

理论图片所占的物理像素为 900 x 1167。

能够看到，在高 DPR 设施下提供只有 CSS 像素大小的图片，是十分含糊的。

因而，为了在不同的 DPR 屏幕下，让图片看起来都不失真，咱们须要为不同 DPR 的图片，提供不同大小的图片。

那么，有哪些可行的解决方案呢？

计划一：无脑多倍图

假如，在挪动端假如咱们须要一张 CSS 像素为 300 x 200 的图像，思考到当初曾经有了 dpr = 3 的设施，那么要保障图片在 dpr = 3 的设施下也失常高清展现，咱们最大可能须要一张 900 x 600 的原图。

这样，不论设施的 dpr 是否为 3，咱们对立都应用 3 倍图。这样即便在 dpr = 1，dpr = 2 的设施上，也能十分好的展现图片。

当然这样并不可取，会造成大量带宽的节约。

古代浏览器，提供了更好的形式，让咱们可能依据设施 dpr 的不同，提供不同尺寸的图片。

计划二：媒体查问

计划二，咱们能够思考应用媒体查问。到明天，咱们能够通过相应的媒体查问，得悉以后的设施的 DPR 值，这样，咱们就能够在对应的媒体查问中，应用对应的图片。

像是这样：

#id {background: url(xxx@2x.png) 
}
@media (device-pixel-ratio: 2) {
    #id {background: url(xxx@2x.png) 
    }
}
@media (device-pixel-ratio: 3) {
    #id {background: url(xxx@3x.png) 
    }
}

这个计划的毛病在于：

1. 要写的代码可能太多了，而且，可能存在一些介于 1~2，2~3 之间的 DPR 值，不好穷举出所有场景
2. 须要留神语法须要的兼容性，须要增加前缀，譬如 -webkit-min-device-pixel-ratio，当然这个能够由 autoprefixer 辅助解决

计划三：CSS 配合 image-set 语法

image-set 属于 CSS background 中的一种语法，image-set() 函数为设施提供最合适的图像分辨率，它提供一组图像选项，每个选项都有一个相干的 DPR 申明，浏览器将从中抉择最适宜设施的图像进行设置。

什么意思呢，来看看代码：

.img {
    /* 不反对 image-set 的浏览器 */
    background-image: url('../photo@2x.png');

    /* 反对 image-set 的浏览器 */
    background-image: image-set(url('./photo@2x.png') 2x,
        url('./photo@3x.png') 3x
    );
}

这样一看，作用应该很清晰了。对于反对 image-set 语法的浏览器：

1. 如果其设施对应的 DPR 为 2，会选取这条 url('./photo@2x.png') 2x 记录，也就是最终失效的 URL 是 './photo@2x.png'；
2. 如果其设施对应的 DPR 为 3，会选取这条 url('./photo@3x.png') 3x 记录，也就是最终失效的 URL 是 './photo@3x.png'；

其中的 2x，3x 就是用于匹配 DRP 的。

应用 image-set 的一些痛点与媒体查问计划相似。代码量与兼容性语法，而且难以匹配所有状况。

计划四：srcset 配合 1x 2x 像素密度描述符

简略来说，srcset 能够依据不同的 dpr 拉取对应尺寸的图片：

<div class='illustration'>
   <img src='illustration-small.png'
       srcset='images/illustration-small.png 1x,
               images/illustration-big.png 2x'
   >
</div>

下面 srcset 里的 1x，2x 示意 像素密度描述符，示意

• 当屏幕的 dpr = 1 时，应用 images/illustration-small.png 这张图
• 当屏幕的 dpr = 2 时，应用 images/illustration-big.png 这张图
• 如果不反对 srcset 语法，src='illustration-small.png' 将会是最终的兜底计划

计划五：srcset 属性配合 sizes 属性 w 宽度描述符

下面 1x，2x 的写法比拟容易接受易于了解。

然而，上述 3 种计划都存在对立的问题，只思考了 DPR，然而疏忽了响应性布局的复杂性与屏幕的多样性。

因而，标准还推出了一种计划 — srcset 属性配合 sizes 属性 w 宽度描述符。

srcset 属性还有一个 w 宽度描述符，配合 sizes 属性一起应用，能够笼罩更多的面。

sizes 属性怎么了解呢？它定义图像元素在不同的视口宽度时，可能的大小值。

以上面这段代码为例子：

<img 
        sizes =“(min-width: 600px) 600px, 300px"src ="photo.png" 
        srcset =“photo@1x.png 300w,
                       photo@2x.png 600w,
                       photo@3x.png 1200w,
>

解析一下：

sizes =“(min-width: 600px) 600px, 300px" 的意思是：

1. 如果屏幕以后的 CSS 像素宽度大于或者等于 600px，则图片的 CSS 宽度为 600px
2. 反之，则图片的 CSS 宽度为 300px

也就是 sizes 属性申明了在不同宽度下图片的 CSS 宽度体现。这里能够了解为，大屏幕下图片宽度为 600px，小屏幕下图片宽度为 300px。

须要留神的是，这里大屏、小屏下图片具体的宽度体现，还是须要借助媒体查问代码，经由 CSS 实现的

srcset =“photo@1x.png 300w, photo@2x.png 600w, photo@3x.png 1200w 外面的 300w，600w，900w 叫宽度描述符。

那么，怎么确定以后场景会选取哪张图片呢？

以后屏幕 dpr = 2，CSS 宽度为 375px。

以后屏幕 CSS 宽度为 375px，则图片 CSS 宽度为 300px。别离用上述 3 个宽度描述符的数值除以 300。

1. 300 / 300 = 1
2. 600 / 300 = 2
3. 1200 / 300 = 4

下面计算失去的 1、2、4 即是算出的无效的像素密度，换算成和 x 描述符等价的值。这里 600w 算出的 2 即满足 dpr = 2 的状况，抉择此张图。

以后屏幕 dpr = 3，CSS 宽度为 414px。

以后屏幕 CSS 宽度为 414px，则图片 CSS 宽度仍为 300px。再计算一次：

1. 300 / 300 = 1
2. 600 / 300 = 2
3. 1200 / 300 = 4

因为 dpr = 3，2 曾经不满足了，则此时会抉择 1200w 这张图。

以后屏幕 dpr = 1，CSS 宽度为 1920px。

以后屏幕 CSS 宽度为 1920px，则图片 CSS 宽度变为了 600px。再计算一次：

1. 300 / 600 = .5
2. 600 / 600 = 1
3. 1200 / 600 = 2

因为 dpr = 1，所以此时会抉择 600w 对应的图片。

具体的能够试下这个 Demo：CodePen Demo — srcset 属性配合 w 宽度描述符配合 sizes 属性

此计划的意义在于思考到了响应性布局的复杂性与屏幕的多样性，利用上述规定，能够一次适配 PC 端大屏幕和挪动端高清屏，一箭多雕。

嗯，总结一下，在实现响应式图像时，咱们同时应用 srcset 和 sizes 属性。它们的作用是：

• srcset：定义多个不同宽度的图像源，让浏览器在 HTML 解析期间抉择最合适的图像源
• sizes：定义图像元素在不同的视口宽度时，可能的大小值

有了这些属性后，浏览器就会依据 srcset/size 来创立一个分辨率切换器的响应式图片，能够在不同的分辨率的状况下，提供雷同尺寸的图像，或者在不同的视图大小的状况下，提供不同尺寸大小的图像。

本章总结

本章节一共列举了 5 种实现响应式图片，适配不同屏幕大小，不同 DPR 的形式，它们别离是：

1. 无脑多倍图的形式
2. DRP 媒体查问
3. CSS Background 中的应用 image-set
4. srcset 配合 1x 2x 像素密度描述符
5. srcset 属性配合 sizes 属性 w 宽度描述符

正当应用它们，能够无效的为不同屏幕，提供最为失当的图片资源，在保障用户体验的同时，尽可能节俭带宽。

它们各有优缺点，能够依据本人理论的业务场景，选取适合绝对老本最低的计划，并且适当的配合 Autoprefixer 以及一些 PostCSS 等工具，简化代码量。

当然，本文只是 古代图片性能优化及体验优化指南 的第二篇，后续将给大家带来图片在：

• 图片的宽高比、裁剪与缩放展现
• 懒加载 / 异步图像解码计划
• 可拜访性以及图片资源的容错及错误处理

等相干常识的介绍，感兴趣的能够提前关注。

最初

OK，本文到此结束，心愿本文对你有所帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。