Displays with higher pixel density are slowly coming in front of your website visitors’ eyes.1 On such dense displays, website images will almost certainly become bigger.2 And not only that, but it happens also on displays with lower pixel density, when visitors zoom into the webpage.
A case from www.volkswagen.de: People like to have a zoomed-in webpage when text is small and there is much to read. And that's exactly how the Volkswagen News page appears. But when visitors zoom in, the image elements become blurry, pixelated, and less sharp (see the logo and buttons for “Mein Auto,” “Probefahrt,” and “Konfigurator” below).
As website images become bigger, they appear less sharp or even blurry sometimes, which causes visitors’ overall impression to fall. Yet this impression cost can be prevented with the following options:
Relative method includes techniques which
are guided by the device itself (no human influence) whether it should
or double image.
Example for image:
Example for background image (CSS):
Another option to keep the quality is preparing vector images (such as SVG) to replace the bitmap ones where possible.
Note that sometimes, images with double dimensions don’t look as clear as original ones. In that case, consider whether you should or should not implement these options.
1 Their commercial names are Full HD, Retina, 4K, 5K.
2 Either automatically by devices (with combining 2×2 small pixels into one single) or manually by visitors (with zooming in).