1

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?

benvc
  • 14,448
  • 4
  • 33
  • 54
jimmy
  • 413
  • 3
  • 6
  • 17
  • What are you trying to achieve? Better loading time with smaller images when the screen is smaller? – Itay Gal Oct 15 '18 at 20:11
  • Yes, this is one of my aims. In addition I want to improve the rendering performance, because the respective divs are much smaller than the actual image. – jimmy Oct 15 '18 at 20:14

2 Answers2

1

Sounds like a good plan :)

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

<link rel="prefetch" href="small-image.png">
Itay Gal
  • 10,706
  • 6
  • 36
  • 75
  • I'll get the images resources at runtime depending on my backend. But I have a small prefetcher, that fetches resources via XHR. But same caveat here: If I prefetch the smaller and larger version of the image on a phone, the last one would not make sense. Detecting phones via JavaScript could not be done... unfortunately. – jimmy Oct 15 '18 at 20:24
  • Check this out https://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript – Itay Gal Oct 15 '18 at 20:26
  • Also, you can present the images as backgrounds also for the big version, thus, when using media queries, only the small images will be loaded – Itay Gal Oct 15 '18 at 20:29
0

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);
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
  • You mean I'll fetch the larger ones at first (assuming the viewport meets the criteria) and in case the user is resizing the window, I'll prevent fetching the smaller ones by using your line of code? – jimmy Oct 15 '18 at 20:32
  • yes I mean so. But the limitation is that the website would not response against windows resize. Just the initial size decides what structure you will call @jimmy – Ali Sheikhpour Oct 15 '18 at 22:06