Better Image Quality on a Website

Comparing image sharpness

Intro

Displays with higher pixel density are slowly com­ing in front of your web­site visitors’ eyes.1 On such dense displays, web­site im­ages will almost cer­tain­ly be­come bigger.2 And not only that, but it hap­pens also on dis­plays with low­er pixel density, when vis­i­tors zoom into the webpage.

A case from www.volkswagen.de: People like to have a zoomed-in web­page 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 but­tons for “Mein Auto,” “Probefahrt,” and “Konfigurator” below).

Figure 1: Quite a lot of text to read in a relatively small type-size.

Figure 2: From left to right, top to bottom – images zoomed in 100%, 125%, 150%, 175%, and 200%.

Trade-off

As website images become bigger, they ap­pear less sharp or even blurry some­times, which causes vis­i­tors’ over­all im­pres­sion to fall. Yet this im­pres­sion cost can be pre­vent­ed with the following options:

Options

  1. Absolute method (also suitable for zooming): Arrange bit­map im­ages to have double di­men­sions in com­par­i­son with the specified ones.3 Example:

    To display an image with dimensions of 300 × 150 pixels
    <img src="image@2x.jpg" width="300" height="150"> save it with (original) dimensions of 600 × 300 pixels.

  2. Relative method includes tech­niques which are guid­ed by the de­vice itself (no hu­man influence) wheth­er it should display single or double image.

    Example for image:
    <img src="image.jpg" srcset="image.jpg 1x, image-2x.jpg 2x" width="300" height="150">
    Example for back­ground image (CSS):
    .div-1 {
    background-image: url('image.jpg');
    background-image: -webkit-image-set(
    url(image.jpg) 1x,
    url(image-2x.jpg) 2x
    );
    background-image: image-set(
    url(image.jpg) 1x,
    url(image-2x.jpg) 2x
    );
    }

  3. Another option to keep the qual­i­ty is pre­par­ing vector images (such as SVG) to replace the bit­map ones where possible.

Note

Note that sometimes, images with dou­ble di­men­sions don’t look as clear as original ones. In that case, con­si­der wheth­er you should or should not implement these options.

1 Their commercial names are Full HD, Retina, 4K, 5K.

2 Either automatically by devices (with com­bin­ing 2×2 small pixels into one single) or man­u­al­ly by visitors (with zooming in).

3 If you can afford to prepare images with dou­ble dimensions;
a) if this won’t interrupt your site’s traffic flow and visitors’ loading time,
b) if you have your bitmap im­ages big enough as sources to resize by 50% to the desired dimensions.

Related articles: