如何防止桌面网站上的图像在移动设备上加载？

Posted 2023-03-06

【中文标题】如何防止桌面网站上的图像在移动设备上加载？

【英文标题】：How can I prevent images that are on my desktop site from loading on mobile?

【发布时间】：2020-03-24 03:42:33

【问题描述】：

所以我目前有一个网站，根据屏幕尺寸加载两种不同的版本：一种用于桌面，另一种用于移动。出于某种原因，我在桌面版网站上显示的图片会加载到移动版上。

有没有办法阻止这些图片在移动设备上加载以增加性能/加载时间？我不是在谈论显示：无；属性/隐藏移动设备上的图像，我试图阻止它们甚至一起加载。

如果您想查看该网站，请点击以下链接：https://rubyredsound.com

【问题讨论】：

或者使用 jQuery 插件，如果当前未显示，则延迟加载所有图像。

【参考方案1】：

我看到你添加了 JQuery 标记所以：

<figure class="image"></figure>

$(document).ready(function()
    var w = window.innerWidth;
    if(w >= 600)
      $(".image").html("<img src='big-image.jpg'/>")
    
    else
      $(".picture").html("<img src='small-image.jpg'/>")
    
);

还有其他很棒的解决方案（旧浏览器不支持），看看image srcset <img srcset ... />

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

【参考方案2】：

CSS Media Queries 并使用背景图片

如果在页面加载时未激活，您可以通过 CSS prevent background images from loading。请记住这一点，您可以在移动设备上隐藏图像（或任何元素），然后通过媒体查询开始显示它们。

.myMobileImage 
  background-image: url(...);


.myDesktopImage 
  display: none;


@media only screen and (min-width: 768px) 
  .myMobileImage 
    display: none;
  

  .myDesktopImage 
    display: inline-block;
    background-image: url(...);
  

至于个人喜好，我始终牢记移动优先的方法，首先声明移动样式，然后用媒体查询覆盖它们以获得更大的分辨率。

【讨论】：

它仍然会加载图像源。 OP 希望阻止加载图像以提高性能。

@The_ehT 我已经更新了我的答案，这应该确实有效。

【参考方案3】：

有没有办法阻止这些图片在移动设备上加载到 增加性能/加载时间？

是的。

srcset 属性明确用于根据上下文下载不同的图像文件。

需要注意的是，您需要为每个环境声明一个图像（或后备）。

但这不会阻止您将 equivalent-to-null 图像（即 1x1 像素透明 png）用作您的后备，使用 base-64 Data URL 声明为内联，如下所示：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

---

srcset 和 sizes 语法：

完成后的<img> 元素，以及用于桌面和移动环境的文件将如下所示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
     srcset="/my-image-folder/desktop.png 640w,
             data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg== 1w"

     sizes="(min-width: 641px) 640px,
            (max-width: 640px) 1px"

     
/>

如果浏览器视口宽度为641px 或更大，则此<img> 元素仅会下载并显示desktop.png 图像。

否则会显示1x1像素透明png。

---

工作示例：

<h2>Narrow and Widen your Browser Viewport in Full Page</h2>

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
         srcset="https://via.placeholder.com/620x100 620w,
                 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg== 1w"
    
         sizes="(min-width: 641px) 620px,
                (max-width: 640px) 1px"

         
    />

---

浏览器支持

有关srcset 和sizes 属性的现代浏览器支持，请参阅：

https://caniuse.com/#feat=srcset

---

更多信息（加教程）

有关使用srcset 和sizes 构建Responsive Images 的更多详细信息和教程，请参阅：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

---

2021 年更新

上述答案中使用的数据 URL：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

有效，但它有点杂乱无章，而且很不清楚它应该代表什么（除非你已经知道它是什么）。

我后来意识到：

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'/%3E

同样有效，而且更短、更简洁、更易于阅读。

【参考方案4】：

有 4 种方法可以解决此问题：

使用图片标签。 使图像成为带背景的 div。 延迟加载（本机或使用插件）。 内容可见性。

详情在：link