Device pixel ratio - How to select a proper size image that looks sharp and display fast on different devices

Posted on | Edited on |

What is Device Pixel Ratio?

The term device pixel ratio plays the crucial role in different languages’ styling. The definition of Device pixel ratio from MDN:

The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.

My translation:

1
Device pixel ratio = (Device physical pixel width) / (Width of a device in a program)

For instance an iPhone12:

  • Physical Width: 1170px
  • CSS width: 390px
  • Device Ratio Pixel: 1170px / 390px = 3

How to select a proper width image

1
Proper image size = devicePixelRatio * width

If you setup a image with style width:150px, the phone will use 150 * 3 = 450 physical pixel to render, so the proper width of the image should be 450

Common Device Pixel Ratio

Reference