如何防止桌面版网站上的图片加载到移动设备上？

Question

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

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

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

Answer 1

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

是的。

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

一个警告是您需要为每个 environment 声明一个图像（或后备） 。

但这不会阻止您使用使用base-64 Data URL内联声明的等效空图像（即 1x1 像素透明 png）作为回退，如下所示：

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"

     alt="Alternative Text for My Image"
/>

如果浏览器视口宽度为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" alt="Alternative Text for My Image" />

---

浏览器支持

对于当代浏览器支持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

效果也一样，而且更短、更干净、更易读。

Answer 2

CSS 媒体查询和使用背景图像

如果在页面加载时未处于活动状态，您可以通过 CSS 阻止加载背景图像。 记住这一点，您可以在移动设备上隐藏图像（或任何元素）并开始通过媒体查询显示它们。

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

.myDesktopImage {
  display: none;
}

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

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

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

Answer 3

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

1. 使用图片标签。
2. 使图像成为具有背景的 div。
3. 延迟加载（本机或使用插件）。
4. 内容可见性。

详情在： 链接

Answer 4

我看到你添加了 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