How do you handle the serving of images for screens with different dpi?

I have images with different dpi , How do you handle the serving of images for screens with different dpi? here is what I have so far.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

//high resolution images go here

}


Is this the right way of handling images with different dpi?

1 Answer
1

The best way to handle different image-sizes (responsive) in combination with retina is to use scrset/sizes, here you hand the browser information it needs to deside which is the best image to use.

https://ericportis.com/posts/2014/srcset-sizes/

<img src="small.jpg"
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
100vw"
alt="Alttext" />


E.g. this image has the width of 33.3% of the view port (33.3vw) with when the viewport it is bigger than 36em (pixelvalue possible here). The browser calculates how many pixels are needed for the current viewport dimensions (and also includes the dpi of the screen) and than chooses from the given imagesizes to just have the best fitting image.

33.3vw

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.