本文介绍了HTML5中响应式图片的实现方法，包括基于设备像素比（DPR）、视口宽度、艺术设计和浏览器对图片格式的支持情况加载图片。通过`srcset`和`sizes`等属性，开发者可以灵活地根据设备特性和浏览器特性选择最佳图片资源，优化用户体验并节省带宽。
现在上网设备越来越多，各种设备的屏幕千差万别，如果只用一张图片去涵盖所有的设备，一是可能会造成某些设备上显示效果不佳，比如使用了一张低清晰度的图，而网页运行在一个高清大屏里；二是可能会浪费带宽，比如使用了一张超大图，而网页运行在小屏幕手机里。在很多情况下我们希望浏览器能根据具体的运行环境去选择最合适的图片来加载，这便是响应式图片。
一睹为快，可以克隆示例项目到本地运行查看
基于设备像素比（DPR）加载图片
设备像素比是指物理像素和逻辑像素（或CSS像素、设备独立像素）之间的比率，比如三个物理像素对应一个逻辑像素，那么设备像素比就是3：1。
不同的设备有不同的设备像素比。比如IPhone 6的DPR是2.0，Galaxy S5的DPR是3.0。设备像素比越高，显示效果就越高清，相应的对图片的分辨率要求也就更高。因此就出现了一个需求：希望高DPR的设备下载高清图，这样就不会出现模糊，低DPR的设备下载低清图，这样更节省带宽。
<img>标签的srcset属性并使用x描述符可以实现这个功能：
最低0.47元/天 解锁文章
扫一扫
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
