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

Question

So I currently have a website that loads two different versions depending on screen size: one for desktop and one for mobile. For some reason, the images that I display on the desktop version of my site load on the mobile version.

Is there a way no prevent these images from loading on mobile to increase the performance/load time? Im not talking about the display:none; attribute/hiding the image on mobile, I'm trying to prevent them from even loading all together.

If you want to take a look at the site heres the link: https://rubyredsound.com

Answer 1

Is there a way to prevent these images from loading on mobile to increase the performance/load time?

Yes.

The srcset attribute is explicitly intended for downloading different image files depending on context.

The one caveat is that you need to declare an image (or a fallback) for every environment .

But that won't prevent you from using as your fallback an equivalent-to-null image (ie. a 1x1 pixel transparent png) declared inline using a base-64 Data URL , which looks like this:

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

---

srcset and sizes syntax:

The finished <img> element, with files indicated for desktop and mobile environments will look like something like this:

<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"
/>

This <img> element will only download and display the desktop.png image if the browser viewport width is 641px or greater.

Otherwise it will display a 1x1 pixel transparent png.

---

Working Example:

 <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" />

---

Browser support

For contemporary browser support for srcset and sizes attributes, see:

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

---

More Info (plus tutorial)

For more in-depth info and a tutorial on using srcset and sizes to build Responsive Images , see:

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

---

Update in 2021

The Data URL used in the answer above:

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

works, but it's a bit scrappy and pretty unclear what it's supposed to represent (unless you already know what it is).

I've since realised that:

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

works just as well and is both shorter and cleaner and more human-readable.

Answer 2

CSS Media Queries and using background-images

Via CSS you can prevent background images from loading if not active on page load. Keeping that in mind you can hide an image (or any element really) from mobile on and start displaying them through a Media Query.

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

.myDesktopImage {
  display: none;
}

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

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

As for personal preference I keep the mobile first approach in mind, declaring mobile styles first and overwriting them with Media Queries afterwards for bigger resolutions.

Answer 3

There are 4 ways that we can fix this issue:

1. Using picture tag.
2. Making the image a div with a background.
3. Lazy loading (native or with a plugin).
4. Content-visibility.

Details are in : link

Answer 4

I see you added JQuery tagg so :

<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'/>")
    }
});

There are other great solutions too (not supported in old browsers), take a look at image srcset <img srcset ... />

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