当需要这种级别的优化时，通常的做法是通过CSS使用图像作为背景图像。移动的浏览器将只加载应用于它的CSS。
CSS

<style>
@media (max-width:600px) {
   .image {
      display:none;
   }
}
@media (min-width:601px) {
   .image {
      background-image: url(http://www.example.com/wp-content/uploads/2013/05/img.jpg);
      width:700px;
      height:350px;
   }
}
</style>

字符串
HTML

<div class="image">

</div>

型

有多种方法可以做到这一点。我个人喜欢他们在这里使用的技术：http://adaptive-images.com/
它使您的代码简单，HTML语义正确
你也可以写自己的js解决方案。
你的HTML可能看起来像这样：

<img alt='some image' src='blank.gif' data-src-mobile='my-mobile-version.jpg' data-src-desktop='my-desktop-version.jpg />

字符串
blank.gif将是一个1 px的透明gif，使用JavaScript你可以检测移动的上的天气，然后用合适的data-src属性替换src属性。
这应该是一个简单的解决方案，但它需要你的js在图片开始加载之前运行，从技术上讲，它在语义上是不正确的。

为了防止图像加载，您可以使用remove()对象函数从代码中删除img标记：

$('img').remove();

字符串
或者你可以删除src属性，注意：它们有自己的CSS值，如width和height，如果定义的话，并且在代码中有它们的位置：

$('img').removeAttr('src');

型

要确保图像只在桌面设备上加载而不在移动的设备上加载，您可以使用HTML元素并将其与媒体查询结合起来。该元素允许您为图像定义多个来源，浏览器将根据媒体查询和设备的功能选择最合适的来源。
下面是如何修改代码来实现这一点：

<div class="image_holder">
    <picture>
        <source media="(min-width: 768px)" srcset="assets/images/background/bg_0.avif">
        <!-- The img tag below is a fallback and will use the source defined above if the media query matches -->
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Overflow Image">
    </picture>
</div>

字符串
事情是这样的：
具有media="(min-width: 768px)"属性的元素告诉浏览器仅当视口宽度为768像素或更大时才使用bg_0.avif图像（通常是桌面屏幕）。标签作为后备。如果元素中的媒体查询都不匹配，浏览器将使用标签中指定的图像。在这种情况下，我们使用一个微小的透明GIF作为占位符，因此没有实际的图像被加载到移动的设备上。
这样，图像只加载在桌面设备上，而移动的设备不会加载它，从而节省了资源。