响应式图片｜Golden Snitch

今天介绍一个关于图片的响应式相关的技术实现。

什么是响应式图片

所谓响应式图片：就是根据用户的设备和使用场景提供合适的图片。

响应式图片的使用场景是什么

两个响应式图片的典型应用场景，分别是切换同一张图片的不同分辨率的版本，以及根据视口大小使用不同的图片。

基于以上问题，我们提出相关的解决方案：

解决方法

1. 通过srcset切换分辨率

假设一张图片有三种分辨率的版本，一张小的针对小屏幕，一个中等的针对中等屏幕，还有一个比较大的针对所有其他屏幕。要让浏览器知道这三个版本，怎么办呢?

1	<img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_ large.jpg 2x" alt="Scones taste amazing">

首先，src属性是大家已经熟悉的，它在这里有两个角色。一是指定1倍大小的小图片，二是在不支持srcset属性的浏览器中用作后备。

关键点：
支持srcset属性的浏览器，通过逗号分隔的图片描述，让浏览器自己决定选择哪一个。图片描述首先是图片名(如scones_medium.jpg)，然后是一个分辨率说明。本例中用的是1.5x和 2x。

2. srcset及sizes联合切换

在响应式设计中，经常可以看到小屏幕中全屏显示，而在大屏幕上只显示一半宽的图片。要把我们的意图告诉浏览器，怎么办呢?

1	<img srcset="scones-small.jpg 450w, scones-medium.jpg 900w" sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="sconessmall. jpg" alt="Scones">

使用w后缀的值对引入sizes属性非常重要。通过后者可以把意图传达给浏览器。在前面的例子中，我们用第一个值告诉浏览器“在最小宽度为17em的设备中，我想让图片显示的宽度约为100vw”。
sizes属性的第二个值，意思其实是“浏览器，如果设备宽度大于等于40em，我只想让对应的图片显示为50vw宽”。我们用DPI(或表示Device Pixel Ratio的DPR，即设备像素比)来解释就明白了。比如，如果设备宽度是320像素，而分辨率为2x(实际宽度是640像素)，那浏览器可能会选择900像素宽的图片，因为对当前屏幕宽度而言，它是第一个符合要求的足够大的图片。

3. picture元素

最后一种情况就是你希望为不同的视口提供不同的图片。

<picture>
    <source media="(min-width: 30em)" srcset="cake-table.jpg"> 
    <source media="(min-width: 60em)" srcset="cake-shop.jpg"> 
    <source type="image/webp" srcset="scones-baby-yeah.webp">
    <img src="scones.jpg" alt="One way or another, you WILL get cake.">
</picture>

这里最不同的是source标签。在这个标签里，可以使用媒体查询表达式明确告诉浏览器在什么条件下使用什么图片。比如，例子中的第一个source标签跟浏览器说:“如果屏幕大于等于30em，给我替换成cake-table.jpg”。

资源：响应式图片

什么是响应式图片
响应式图片的使用场景是什么
解决方法