Responsive Images Based On Device Pixel Ratio

Question

I am confused about responsive images. How Device Pixel Ratio can affect an image when viewed on a mobile device.

I have a mobile device with resolution 480x854 with device pixel ratio as 1.5 i.e. if I send an image with width 320px (480/1.5), it will automatically fit into browser's width provided we have specified viewport as,

<meta name="viewport" content="width=device-width, initial-scale=1">

If I provide an image with width 480px, it goes out of the actual width of the browser. But, if specify this,

<style>
    img {
        width: 100%;
    }
</style>

It is displayed 100% in browser's width with obviously higher quality than 320px image.

So, What is the feasible way to display an image based on Device Pixel Ratio? Do I have to send 320px or 480px (with 100%) image for my device?

Answer 1

The browser takes care of all the scaling needed. If you have a real device width of 480px, a virtual width of 320px that contains an image scaled to 100% (320px on the virtual width) but the image is 480px wide, it will be displayed in all 480px just fine, but programmatically will be measured as 320px.

These days, there is little point to trying to get an image pixel-perfect. There are many devices with many resolutions. Send a decent quality image and let the browser do the work for you.