响应式图片 srcset 和sizes属性

Posted 2022-12-12 小向光

一、什么是响应式图片？

根据不同的屏幕分辨率，和设备像素比来尽可能选择高分辨率的图片。
或者换个角度来说，当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽啦。

1、同样是普通屏幕（相对与retain等高清屏幕而言）上，在手机屏幕上显示小图片，在电脑浏览器上显示大图片。 
2、同样大小的屏幕上，普通设备上显示普清图片，高清屏幕（如 retain屏幕）的设备上显示高清图片。

二、如何实现响应式图片？

1、使用一张图片+css样式

<div style="text-align: center" style="width: 100%">  
     <img src="css/a.png" style="width: 80%">  
</div> 

这样图片始终保持在频幕居中位置，且长度为外层div的80%宽

2、多张图片 
上面那种方式，如果图片被拉伸过大会导致图片不清楚，影响用户体验。所以我们可以提供多张图片让浏览器选择最合适的。 
2.1 采用媒体查询的方式

@media only screen and (max-width : 512px) 
    .img  background-image: url(sunset-small.jpg); 

@media only screen and (max-width : 1024px) 
    .img  background-image: url(sunset-large.jpg); 

only ：只针对，同类的有all media（所有设备） 
screen：适应计算机彩色屏幕，同类的还有print（适应打印预览模式下查看的内容或者打印机打印的内容） 
and：与条件 同类有or 
max-width ：1024px 适应浏览器的最小宽度为 1024 像素，同类还有（指定min-width，width） 

2.2 srcset和sizes新属性

srcset和sizes是HTML5新支持的属性，浏览器支持情况如下： 
http://caniuse.mojijs.com/Home/Html/item/key/srcset/index.html

<img class="image" src="mm-width-128px.jpg"
     srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">

•  src：当设备不支持srcset，sizes属性时，使用这个图片
• srcset: 列出图片资源，     格式为srcset=”[图片URL] [图片宽度], [图片URL] [图片宽度]…”，按最新的标准，单位“w”表示当前显示宽度的像素值。解释起来就是这张图片在低于128px宽度的时候，显示小图"mm-width-128px.jpg",；高于128像素且低于256px时，显示中等尺寸图片“mm-width-256px.jpg”；当图片显示尺寸大于512px时就显示全尺寸图“mm-width-512px.jpg”。
• sizes：用来表示尺寸临界点。 
  语法如下： sizes=”[media query] [length], [media query] [length] … etc”

例如上述代码中，size = "(max-width: 360px) 340px, 128px"表示当视区宽度不大于360像素时候，图片的宽度限制为340像素，其他情况下，使用128像素。

如果sizes="128px", 则尺寸就一直是128像素，图片只会根据设备像素比发生变化。

注意，这里所有的值都是指宽度值，且单位任意，em, px, cm, vw, ...都是可以的，甚至可以CSS3的calc计算（对应下面demo页面第2张图），例如：

sizes="(max-width: 360px) calc(100vw - 20px), 128px"

表示当视区宽度不大于360像素时候，图片宽度为整个视区宽度减去20像素的大小。

• 1. size = “(max-width: 360px) 340px” 
     (max-width: 360px)是媒体查询，表示当视图宽度不大于360px时，图片的宽度限制为340像素（这个宽度指的是css指定的图片大小，也称为渲染尺寸）。当设备像素比是1的时候，应该使用大于等于340w规格的图片，所以浏览器会选择mm-width-512px.jpg 
     当设备像素比是2的时候，应该使用大于等于340*2=680w规格的图片 
     为什么呢？因为设备像素比是2，代表设备放2个像素点，但实际我们看到的宽度只有一个像素，也就是设备上正常显示1个像素大小需要2个像素点，这就是高清的由来，相当于图片压缩了。可是srcset里没有大于等于680w的图片，浏览器只有尽量选择高清的图，即mm-width-512px.jpg。

Eg 当视觉宽度为400px（>360px），图片的宽度限制为128像素 
设备像素比为1时，选择>=128w规格的图（即mm-width-128px.jpg） 
设备像素比为2时，选择>=128*2w(图片限制的宽度*设备像素比），规格的图片即mm-width-256px.jpg ，设备像素比为3时，选择512w规格的图,设备像素比为4时，选择640w规格的图（可以没有提供，于是选择了512w的图）

   2. sizes=”(max-width: 360px) calc(100vw - 20px) "

代表：当视图宽度不大于360px时，应该使用大于100%视觉宽度-20px的规格的图片 
（注：vw代表视觉宽度的百分比） 
Eg 当视觉宽度为250px，设备像素比为1时，，图片的宽度限制为（250px-20px）=230px， 
设备像素比为1，选择规格230w以上的图片，所以应该选mm-width-256px.jpg这张图来显示 
设备像素比为2，选择230*2w以上的图片，所以选择mm-width-512px.jpg这张图来显示

参考资料：

响应式图片srcset全新释义sizes属性w描述符

响应式图片加载属性srcset和sizes

响应式图片