如何在移动设备上使用较低分辨率的图像？答案

【问题标题】：How to use a lower resolution image for mobile?如何在移动设备上使用较低分辨率的图像？
【发布时间】：2015-11-16 14:54:00
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

小心。如今的移动屏幕可以胜过某些显示器。如果是 JPG，您可以安全地将图像质量保持在 60% 左右，而没有任何实际差异（大多数情况下），这将减少大量 KB 大小，如果可以的话，还可以使用 GZip 和缓存内容。
可能重复：stackoverflow.com/questions/22668535/…
@DanWhite 提出了一个很好的观点，图像优化绝对有帮助。我写了一个你可能会觉得有用的小脚本：github.com/ryanpcmcquen/image-ultimator

标签： javascript html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

另外，a JS polyfill 以防img 标签后备不够用！

【讨论】：

最简单的最佳答案！甚至不需要' '。

【解决方案3】：

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

【讨论】：

【解决方案4】：

在撰写本文时，picture 元素几乎没有浏览器支持。

所以这里有两种选择：

如果图像来源于 CSS，您可以使用 display: none 阻止它加载。
如果图像在 HTML img 标记中，则认为浏览器从 src 属性调用图像。您可以改用data attribute 来解决此问题。将data 应用于所有图像，并仅在您想要加载它们时添加src。

HTML

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

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

【讨论】：