如何使用较低分辨率的图像移动？ [英] How to use a lower resolution image for mobile?

问题描述

我正在设计一个响应式网站，使用媒体查询来更改视口大小变化时的布局。

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

如何禁用高质量图像，并使用CSS替换为较低质量的图像？

谢谢。

解决方案

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

 < picture& ; 
< source srcset =sm.pngmedia =（max-width：400px）> 
< source srcset =mid.pngmedia =（max-width：800px）> 
< source srcset =lg.png> 
< img src =lg.pngalt =MDN> 
< / picture> 
  

元素将会正常降级以在不支持它的浏览器中显示图像标记。 p>

详细了解<$ c

此外，一个JS polyfill ，以防 img 标记回退不够！

I'm designing a responsive site using media queries to change the layout as the viewport size changes.

For mobile, I think it would be beneficial to use a lower resolution image to save on page loading times and bandwidth.

How would I disable the high quality image and replace it with the lower quality image using CSS?

Thank you.

解决方案

Using the HTML5 picture element, you can specify inline media queries to size your images:

<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>

The element will degrade gracefully to show the image tag in browsers that don't support it.

Read more about the picture element on MDN.

Also, a JS polyfill in case the img tag fallback isn't enough!

这篇关于如何使用较低分辨率的图像移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！