响应式图片的实现（含picture标签、srcset属性、sizes属性的使用方法，设备像素比详解）

什么是响应式图片？

响应式图片即针对不同的设备分辨率和尺寸，显示对应的最佳分辨率的图片。

具体表现为：

• 高分辨率的屏幕，显示高分辨率图像（确保高清屏上，图片依然足够清晰）
• 低分辨率的屏幕，显示低分辨率图像（提升移动端网速较慢时的访问速度）。

高清屏是怎样让图片变模糊的？

此时需要学习一个新概念 —— 设备像素比

设备像素比 = 物理像素(设备像素) / 独立像素(CSS像素)

• 普通屏上1个css像素对应1个物理像素
• 高清屏上1个css像素对应4个或更多物理像素

以css像素为200px*300px的 img标签为例，普通屏幕下对应的物理像素为200*300，而高清屏（如苹果的retina屏幕）对应物理像素为400*600

即4个物理像素显示一个css像素

若图片资源的分辨率为200*300

• 在普通屏幕上，1个css像素刚好对应1个物理像素，则图片能清晰显示
  

• 在高清屏幕上，1个css像素对应4个物理像素，而位图像素不可分割，屏幕便只能就近取色，导致图片模糊

为了解决高清屏导致图片模糊的问题，便需要使用更高分辨率的图片，如400*600的图片，但更高分辨率的图片尺寸也会更大，需要消耗更长的页面加载时间。

对于普通屏，更高分辨率的图片虽然不会模糊，但会少一些锐利度或者色差，同样会造成资源浪费。

所以最佳方案为：随屏幕分辨率的不同，加载对应分辨率的图片。

响应式图片的实现

通常每个位图图像需要创建至少四个版本：

• source_1x.png “正常”尺寸，如 200*300
• source_2x.png 两倍大小， 400*600
• source_3x.png 三倍大小， 600*900
• source_4x.png 四倍大小， 800*1200

而纯矢量图形，导出一个SVG文件即可。因为SVG文件可无限扩展，无论分辨率如何，在所有屏幕上的显示效果都很好，且当前所有浏览器版本均支持。

srcset属性实现设备像素比自适配

srcset 属性内对源图片的数量没有限制

<img src="source_1x.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x, source_4x.jpg 4x">

在设备像素比为1时会显示图片source_1x.jpg
在设备像素比为2时会显示图片source_2x.jpg
在设备像素比为3时会显示图片source_3x.jpg
在设备像素比为4时会显示图片source_4x.jpg

浏览器的缩放，也会改变设备像素比，如把页面放大到200%时，设备像素比会变为2，此时便会显示图片source_2x.jpg

srcset 属性实现屏幕宽度自适配

<img src="source.jpg" width="100%" srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

w 为宽度描述符，以电脑的浏览器为例，设备像素比为1时，当浏览器窗口大小为 400px，则此时图片的实际宽度为 400px*1 = 400w，则会显示图片 source_400.jpg

调整浏览器窗口大小为 600px，则图片的实际宽度为 600px*1 = 600w，显示图片 source_600.jpg

srcset + sizes 属性实现屏幕宽度和分辨率的自适配

sizes 用来表示尺寸临界点，语法为

sizes="[media query] [value], [media query] [value] ... "

所有的值都是指宽度值，且单位可以为PX, VW, EM甚至是CSS3中的计算值CALC

<img src="source.jpg" 
 sizes="(max-width: 376px) 375px, (max-width: 769px) 768px, 1024px"
 srcset="source_375.jpg 375w, source_768.jpg 768w, source_1024.jpg 1024w">

• 当屏幕宽度为 0 ~ 376px 时，图片宽度按照375px计算
• 当屏幕宽度为 376 ~ 769px 时，图片宽度按照768px计算
• 当屏幕宽度大于 769px 时，图片宽度按照1024px计算
• 在普通的PC电脑上，浏览器缩放比例为100%时，屏幕的设备像素比是1，当浏览器窗口大小为 0 ~ 376px 时，sizes属性计算值为375px，则图片的实际宽度为375*1=375w，此时浏览器会加载图片 source_375.jpg。
• 在iphone6/7/8中，屏幕的设备像素比是2，sizes属性计算值为375px，则图片的实际宽度为375*2=750w，此时，375w < 750w < 768w, 则会加载图片 source_768.jpg 。
• iphone plus 和 iphone X中，屏幕的设备像素比是3，sizes属性计算值为375px，则图片的实际宽度为375*3=1125w，加载图片 source_1024.jpg。

picture 标签详解

picture 标签是专门针对响应式的需求设计的标签，用于实现在不同的设备上显示不同的图片。

<picture>
  <!-- 页面宽度为 0-640px -->
  <source
    media="(max-width: 640px)"
    srcset="small@2x.jpg 2x, small.jpg 1x"
  />
  <!-- 页面宽度为 640-960px -->
  <source
    media="(max-width: 960px)"
    srcset="medium@2x.jpg 2x, medium.jpg 1x"
  />
  <!-- 页面宽度 >960px，图片大小变为视口的三分之一 -->
  <source
    srcset="large@2x.jpg 2x, large.jpg 1x"
    sizes="calc(100vw / 3)"
  />
  <!-- 浏览器不支持 picture时 -->
  <img src="small.jpg" />
</picture>

• media="(max-width:640px) 表示在页面宽度不足640px的情况下，使用该<source>标签所提供的图片来源作为它所在<picture>元素显示图片的图片来源。
• srcset="small@2x.jpg2x,small.jpg1x 告诉浏览器，该来源同时又为同一素材图片提供了两种清晰度的版本small@2x.jpg和small.jpg，分别供高清设备与标清设备选择。浏览器可以根据实际情况自主选择。
• sizes="calc(100vw / 3)" 会动态改变图片的大小，最终图片宽度始终为视口的三分之一calc(100vw/3)
• 最后的img 标签不能省略，<source>标签只决定图片源，最终图片的渲染还是需要 img 标签，同时，在浏览器不支持 picture 标签的情况下，会使用 img 标签。