Html: load convenient image size at page loading time?

Question

I have an image in a gridView (table) which has a various number of columns according to the screen resolution. Html code like this:

As you can see, I have 6 columns on 'ld' resolutions ; 4 column on 'md' resolution ; etc...

At the end, the actual/displayed resolution of my image image_resolution_XXX.jpg is not really known in advance. It depends on the screen resolution of the device (and consequently of the number of columns of my grid).

My images are stored on my server in different folders according to their resolution : folder '128x128', '256x256', etc...

What I want is to avoid to load big resolution images in my gridView (ex: image_resolution_512.jpg) if only a smaller resolution is required (ex: image_resolution_256.jpg). Also, I want to avoid to load a small resolution image if a higher resolution is required.

How can I load the correct resolution at loading time ?

Perhaps a simplified way would be to define an image resolution of XXX pixels for xs devices and of YYY pixels for md devices, etc... Is it possible ?

Thanks for your help !

Answer 1

You could do something along the lines of...

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="css/ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="css/mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="css/hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="css/retina.css" />

And then just manage what images you want to show in the image container via each different CSS file?

Answer 2

In case of <img> , use srcset attribute.

• MDN documentation 's example:

   <img src="clock-demo-thumb-200.png" alt="Clock" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" sizes="(min-width: 600px) 200px, 50vw"> 

• There seems to be a polyfill for browser without srcset support

In case of CSS, use media queries.