HTML5 响应式图片属性 srcset 和 sizes 的使用方法

大家也许对响应式设计这个概念并不陌生，例如，我们在访问某博客页面时，会发现 PC 端和移动端时会呈现不同的表现形式。而所谓响应式图片，即针对不同的设备分辨率和尺寸，显示对应的最佳分辨率的图片。今天为大家简单分享一下 HTML5 响应式图片属性 srcset 和 sizes 的使用方法。

响应式图片介绍

HTML5 提供了新属性 srcset 和 sizes，目前主流的浏览器都支持该属性。其中 sizes 定义 img 显示的尺寸，srcset 定义图片源以及图片的自然大小。浏览器会根据实际情况自主选择加载哪张图片。

srcset

格式一：图片源地址 空格 屏幕像素密度[, 图片源地址 空格 屏幕像素密度, ...]，如：

srcset="1.jpg 1x, 2.png 2x"

格式二：图片源地址 空格 图片像素宽度[, 图片源地址 空格 图片像素宽度, ...]，如：

srcset="1.jpg 580w, 2.png 618w"

sizes

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

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

具体用法

<img src="avatar.jpg"
    srcset="avatar-small.jpg 500w, avatar-large.jpg 800w"
    sizes="(max-width: 600px) 400px, 900px">

srcset 定义了两个图片源，分别是宽度为 500 像素 avatar-small.jpg 和 宽度为 800 像素 avatar-large.jpg。如果不支持 srcset 属性，默认加载 avatar.jpg。

sizes="(max-width: 600px) 400px, 800px" 表示视口宽度不足 600 像素的时候，图像宽度为 400 像素，此时浏览器依然是加载小的图像（等比缩小），而当视口宽度大于 600 像素的时候，图像宽度为 900 像素，浏览器就会加载大的图像（等比放大）。

响应式图像除了可以适应视口的宽度，还可以适应不同的设备像素比，比如这里，当视口宽度不足 600 像素的时候，如果设备像素比为1，则浏览器还是加载显示小的图像，但是如果设备像素比为2 ，则浏览器会加载显示大的图像。

结束语

本文简单分享了 HTML5 响应式图片属性 srcset 和 sizes 的使用方法，仅供有此需求的朋友参考。通过响应式图片设计，既可以防止网络带宽的浪费，又可以提升网站的用户体验。如果有任何意见或建议，欢迎在下方评论处留言。