所以我目前有一个网站，根据屏幕尺寸加载两种不同的版本：一种用于桌面，另一种用于移动。出于某种原因，我在桌面版网站上显示的图片会加载到移动版上。
有没有办法阻止这些图片在移动设备上加载以增加性能/加载时间？我不是在谈论显示：无；属性/隐藏移动设备上的图像，我试图阻止它们甚至一起加载。
如果您想查看该网站，请点击以下链接：https://rubyredsound.com
【问题讨论】：
标签： javascript jquery css performance mobile-website
我看到你添加了 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
【讨论】：
如果在页面加载时未激活，您可以通过 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(...);
}
}
至于个人喜好，我始终牢记移动优先的方法，首先声明移动样式，然后用媒体查询覆盖它们以获得更大的分辨率。
【讨论】：
有没有办法阻止这些图片在移动设备上加载到 增加性能/加载时间？
是的。
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"
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 属性的现代浏览器支持，请参阅：
有关使用srcset 和sizes 构建Responsive Images 的更多详细信息和教程，请参阅：
上述答案中使用的数据 URL：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==
有效，但它有点杂乱无章，而且很不清楚它应该代表什么（除非你已经知道它是什么）。
我后来意识到：
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'/%3E
同样有效，而且更短、更简洁、更易于阅读。
【讨论】：
【讨论】：