Should image DPI be 72pixels/inch in 2018?

Question

Some DPI stats first:

Mack Book Pro 13.3" has 227 DPI(2560x1600px/13.3 inches).

iPhone 6s has 326 DPI(750x1334px/4.7 inches).

Sony Xperia Z tablet has 224 DPI(1920x1200px/10.10 inches).

However when I save JPEG image for web it has 72 DPI and the image looks good only if I set container resolution 2 times lower then the image resolution.

For example,

<img src="200x200px_72dpi_image.jpg" width="100px" height="100px">

produces good results for retina displays(iPhone 6s, Mac Book Pro 13.3", etc.) and

<img src="100x100px_72dpi_image.jpg" width="100px" height="100px">

produces bad results.

What can I do with that in 2018? Should 300 DPI image be used for web?

Answer 1

Apple figured they would have an issue with this topic, and released several guidelines / suggestions how to handle it.

• About Proper Image Delivery on the Web
• Serving Images Efficiently to Displays of Varying Pixel Density

It all boils down to websites serving 2x images IF the client browser CAN support it -- else default back down to the 72 DPI standard.

Should image DPI be 72pixels/inch in 2018?

Yes. Devices that support higher resolution are relatively recent, and have yet to reach 100% market saturation.

Should 300 DPI image be used for web?

300 DPI might be overkill. Images of that resolution would have very large file sizes, and users might be more put-off from longer load times than slightly pixelated images. You'll need to design a reasonable balance that is inline with your business requirements.

What can I do with that in 2018?

My two cents...

• Explore other formats than JPEG. Explore SVG for line-art graphics. WebP is also worth exploring for photos.

• Default to 72dpi, and opt-in to higher DPI. With media queries, and many poplar modern CSS/JS frameworks, it takes very little effort for the device to load 2x resource over low-res defaults. True, you'll need to render the same image assets in different resolutions, but that can be automated.

• Time. Even in 2018, this stuff is still changing, and vendors are competing in this HDR space. Expect -webkit, -moz & -ms prefixes until a standard is reached (if not all ready).