javascript - 如何为移动设备使用较低分辨率的图像？

Question

我正在设计一个响应式网站，它使用媒体查询来随着视口(viewport)大小的变化而改变布局。

对于移动设备，我认为使用较低分辨率的图像可以节省页面加载时间和带宽。

如何禁用高质量图像并使用 CSS 将其替换为低质量图像？

谢谢。

Answer 1

使用 HTML5 picture 元素，您可以指定内联媒体查询来调整图像大小:

<picture>
 <source srcset="sm.png" media="(max-width: 400px)">
 <source srcset="mid.png" media="(max-width: 800px)">
 <source srcset="lg.png">
 <img src="lg.png" alt="MDN">
</picture>

该元素将优雅地降级以在不支持它的浏览器中显示图像标签。

Read more about the picture element on MDN .

此外，a JS polyfill以防 img 标签回退不够!