响应式网页：防止桌面版图像以移动分辨率下载

Question

在我的 HTML/PHP 页面上，我首先有移动 HTML 块，它隐藏在桌面分辨率上，然后是桌面 HTML 块，它隐藏在相反的移动分辨率上：

<div class="mobile-version">
    <img src="/images/300.jpg">
</div>  

<div class="desktop-version">
    <img src="/images/90.jpg">
</div>    

我正在尝试提高我的 Google 页面速度得分，因此如果用户在移动屏幕宽度上，我不想加载 90.jpg。

但是，如果我只使用style="display:none"，我可以在 chrome dev 中看到。浏览器仍在加载图像的工具。

如何处理？

Answer 1

dom 在应用任何 css 之前被解释。在这个阶段，我看到了两种解决方案：

延迟加载：这将需要 javascript；你只能在没有被有效隐藏的元素上注入 src 标签。

Html 5 图片元素：这个 HTML5 元素包含 和 标签。优点是您可以在源元素中应用媒体过滤器，因此只能在桌面设备上加载。唯一会一直加载的是后备的 img src，但这样的问题较少。