如何阻止浏览器在移动视口中加载图像

Question

我的网站上有一个标题，在桌面视图中如下所示：

但在移动版本上，照片设置为显示：无；

但审计表明浏览器仍然加载它！

所以我尝试了display: none;父亲 div 并且仍然加载，

有没有办法阻止浏览器加载它？

Answer 1

您可以使用您的图片作为背景图像。仅当媒体查询被接受时才会加载它，因此对于移动设备，图片不会加载，而对于桌面版本，图片将加载。

这样做的缺点是谷歌不会在谷歌图片等中索引你的图片，但如果你的图片对用户/文本没有好处，那也不错。

另一种选择是您使用

<picture>
  <source media="(min-width: 768px)" srcset="your-desktop-picture.jpg">
  <source srcset="your-mobile-picture.jpg">
  <img src="fallback-for-old-browsers.jpg" alt="">
</picture>

您可以使用图片在不同的图像之间进行选择，您的移动图片也可以是一像素大，但重要的是要有一个，因此浏览器不会选择桌面图片。

总之，我会推荐使用 css 媒体查询的解决方案，因为它更容易，并且您的图片对于文本理解来说不是必需的。