Question

我正在使用媒体查询设计响应式网站，以便在视口大小更改时更改布局。

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

如何禁用高质量图像并使用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代码回退不够！

Answer 2

这是使用媒体查询的简单解决方案：

<强> HTML

<div>
<img id="heavy-image" src="http://i.imgur.com/60PVLis.png" height="100" width="100" alt="">
<img id="lighter-image" src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="">
</div>

<强> CSS

#lighter-image {
    display: none;
}

@media only screen and (max-width: 300px) {
    #heavy-image {display: none;}
    #lighter-image {display: block;}
}

DEMO

要防止图像加载以节省带宽，请考虑以下两个选项：

如果图片来自CSS，则可以阻止其加载display: none。
如果图片位于HTML img标记中，请考虑浏览器调用src属性中的图片。您可以使用data attribute代替src解决此问题。将data应用于所有图片，并仅在您要加载时添加src。

<强> HTML

  <img data-src="http://i.imgur.com/60PVLis.png" height="100" width="100" alt="">

<强> JS

  $(document).ready(function() {
       $(this).find('img').each(function() {
         $(this).attr("src", $(this).data("src"));
       });
    });

Answer 3

您可以通过在移动视图中为大图片添加display none来开发您的css电子表格文件，如果新的移动浏览器在css中包含 display：none ，则允许页面加载更快，并且在桌面视图中为小图像添加非显示也会做同样的事情。

Answer 4

这很简单 - 创建一个分辨率较低的另一个图像，然后将其放在media queries。

媒体查询可以帮助您根据屏幕分辨率和媒体类型隐藏和显示元素。

CSSTricks上有一个很好的资源this article about media queries，涵盖不同的设备，平台和资源

如何使用较低分辨率的图像移动？

4 个答案: