H5中＜img＞的srcset、size属性及＜picture＞介绍

H5中＜img＞的srcset、size属性及＜picture＞介绍

• srcset用来声明一组图像源，浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度，描述符w表示图像的宽度；浏览器使用这些信息从列表中选择合适的图像。
• sizes属性为浏览器提供将要显示图像的尺寸信息，srcset使用w描述符时必须包含此属性。

srcset属性列出了浏览器可以选择加载的源图像池，是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境，利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。

<img srcset=crest-8.jpg 1.5x, crest-510.jpg 2x src=crest-255.jpg alt=USWT crest />

可变宽度的图像：基于viewport选择

对于可变宽度的图像，我们使用srcset搭配w描述符以及sizes属性 。w描述符告诉浏览器列表中的每个图象的宽度。sizes属性是一个包含两个值的，由逗号分隔的列表。根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。

sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。需要注意是，源图尺寸值不能使用百分比，vw是唯一可用的CSS单位。

<img srcset=uswnt-480.jpg 480w, uswnt-640.jpg 640w, uswnt-960.jpg 960w,uswnt-1280.jpg 1280w sizes=(max-width: 400px) 100vw, (max-width: 960px) 75vw, 640px src=uswnt-640.jpg alt=USWT World Cup victory>告诉浏览器在viewport宽度小于400像素时，使图像的宽度与viewport等宽。在viewport宽度小于960像素时，使图像的宽度为viewport宽度的75％。当viewport大于960像素时，使图像的宽度为640像素。浏览器利用srcset和sizes信息来选择最符合规定条件的图像。如果浏览器的viewport是600像素，图像最可能以75vw的宽度显示。浏览器将尝试加载第一张大于450像素（600*0.75）的图像，也就是uswnt-480.jpg。如果我的是dpr为2的Retina显示屏，那么浏览器就会尝试加载第一张大于900像素（600*0.75*2）的图像，
也就是uswnt-960.jpg。我 们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。(译
者注：srcset和size列表是对浏览器的一个建 议(hint)，而非指令。例如，设备像素比(dpr)为1.5的设备，亦
可用1x也可用2x的图像，由浏览器根据其能力、网络等因素来决定。)

 

前两个例子都是以不同质量显示相同的图像，仅用srcset属性就足够了。不必担心老旧浏览器，老旧浏览器会把它看作为一个普通的图像并从src中加载。如果你想在不同宽度下显示稍微不同的图像，比如在较窄屏幕下仅显示图像的关键部分，那么要使用picture元素。

picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载图片，如果没有img，那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。

<picture><source media=(min-width: 960px) srcset=ticker-tape-large.jpg><source media=(min-width: 575px) srcset=ticker-tape-medium.jpg><img src=ticker-tape-small.jpg alt=USWT ticker-tape parade>
</picture>

source：基于图片格式选择

最近几年出现了一些新的图片格式，这些新图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错，但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错，但只有Chrome和Opera原生支持。JPEG-XR，最初被称为高清照片，是微软发布的一个专有图像格式，仅 Internet Explorer支持。

<picture><source type=image/ src=wwc2015.jxr><source type=image/jp2 src=wwc2015.jp2><source type=image/webp src=wwc2015.webp><img src=wwc2015.png alt=WWC 2015>
</picture>source的type属性用来指定每个图像的MIME类型，浏览器会选择第一个含有其支持的MIME类型的源。
源的顺序是至关重要的，如果浏览器无法识别所有的图象类型，它会回退至原来的img元素。

参考：《响应式图像之srcset和sizes属性》