CODEWITHSUNDEEP
htmlimagecssresponsive-design
jimmy
jimmy

Reputation: 445

Different image sizes depending on viewport

In my full responsive single page application I have an image gallery consisting of 10 images at maximum. For mobile devices I would apply smaller images as background-image to improve loading and rendering times. This could be done via media-queries pretty easily.

Caveat: In case the user is resizing the browser window and is inside a media query, a new version of the image will be fetched from the CDN.

Is this acceptable or do you know a better solution?

Upvotes: 1

Views: 285

Answers (2)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11096

The idea is OK itself but it is better if you prevent fetching smaller images when users resizes the browser in desktop and rely on large loaded ones. You can force html to render using an exact width by this code:

//detect window size and if it is greater than X e.g. 1200 then:
document.querySelector("meta[name=viewport]").setAttribute('content', width=1200);

Upvotes: 0

Itay Gal
Itay Gal

Reputation: 10824

Sounds like a good plan :)

You can also use a prefetching mechanism to prefetch the smaller images

<link rel="prefetch" href="small-image.png">

Upvotes: 1

Related Questions