CODEWITHSUNDEEP
javascripthtmlcss
peardrops
peardrops

Reputation: 109

Prevent mobile users from downloading desktop carousel images

I'd like a static background image to become a carousel at a certain (desktop-ish) breakpoint. Would it be possible for me to prevent the mobile user from downloading those carousel images? As far as I'm aware a media query won't be enough here.

I'm not referring to the user manually downloading the images to save to their device, I mean their browser doing so automatically.

Upvotes: 0

Views: 168

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

Media Queries will perfectly solve this issue.

/* Mobile-first */
element {
   background-image:url("small image here");
}


/* Desktop */
@media screen and (min-width: 1024px) {

  element {
     background-image:url("large image here");
  }
}

If you use this code and have your browser at a size greater than 1024px and using the developer tools, inspect the element, you will see the large version of the image being used as the source for the background. If you then shrink your browser below 1024, you will see the source change to the small version. Browsers will only download the value of the source for the image, so a mobile user will never wind up downloading the large version.

Upvotes: 1

Related Questions