High DPI Pictures

As computer screens have increased in "pixel density," older web sites look fuzzy and out of date. In order to fix this you have to

Layout measurements in HTML assume that there are 96 CSS pixels per inch.

... HTML pages specify layout using Cascading Style Sheets (CSS).

Some modern laptops have higher resolution displays: for example, an Apple MacBook Pro with "Retina" screen has about 220 device pixels per inch. iPhones have 326 to 485 device pixels per inch; some smartphones go higher.

1x
1x image

Standard advice for coding HTML is to always specify WIDTH and HEIGHT (in CSS pixels) on an IMG tag, so that page layout does not need to wait for the image to be read in to determine its size. For example:

file: thumb-t1.jpg" width="75" height="75"
HTML: <img src="htmx/thumb-t1.jpg" width="75" height="75">

if WIDTH and HEIGHT are specified in an IMG tag, and the actual pixel dimensions of an image are different, the browser will stretch or shrink the image to fit into the specified size. Stretching a picture to fill a bigger space will always look fuzzy. When modern browsers do this, they use information about your screen's actual resolution. If you provide a picture stored at 96 DPI and the browser wants to display it on a 220 DPI screen, the browser has to interpolate about 4 pixels for every one in your image -- and this will make the picture look unsharp.

To make an image look sharper on displays with higher pixel densities

2x
2x image

Save the image at a large size, and then in the IMG tag, specify WIDTH and HEIGHT as half (or less) the image's pixel size. When your page is viewed on a high resolution screen, a modern browser will try to display the image to fit in the specified space... and it will use the "extra" pixels. (in the example to the right, I saved the picture as 150x150 pixels, and displayed it in a 75x75 CSS space.)

file: thumb-t1-2x.jpg" width="150" height="150"
HTML: <img src="htmx/thumb-t1-2x.jpg" width="75" height="75">

If you have a high-resolution screen, the thumbnail on the right should look sharper. We send an image with 4 times the number of pixels: on a low-density device, the browser discards most of the pixels; on a high-density device the browser uses all the pixels. (For a small file like a thumbnail, sending extra pixels won't make a noticeable difference in speed.)

Responsive Images

'Responsive Images' is a recent HTML design practice: you design web pages so that they make the best use of users' displays, by creating multiple versions of graphic files and telling the user's browser to select which one to show at viewing time.

New features in HTML5 allow you to specify which version of a file to load depending on the monitor's pixel density and size. Using responsive images requires that HTML be recoded to

For example, this IMG tag chooses which file to display depending on the display density:

<img src="thumb-t1.jpg" width="75" height="75" srcset="thumb-t1.jpg 1x, thumb-t1-2x.jpg 2x">

Old browsers that don't understand SRCSET= ignore it and use the SRC= attribute. For newer browsers, SRCSET= overrides SRC= and directs the browser to request the regular or the -2x file depending on which one will look best. Sending a smaller file, when the big one won't make the viewed image any better, can speed up site loading.

The features for responsive design are very complex and can handle a lot of cases. SRCSET can be used in several other ways besides the one described above to select which images are used in an IMG tag.

Responsive Design

'Responsive Design' is a related recent HTML design practice: it suggests designing web pages so that they display different features or arrange features differently depending on the size of the window (in CSS pixels). You write CSS "media queries" that instruct the visitor's browser to select different CSS statements depending on the current display's abilities. For example, a full size display might show a menu bar with drop-downs, while the same page, on a small device, could have a simpler menu, or one that is only displayed when a 'menu' icon is clicked. The following CSS example changes the way a page displays when the display window is less than 600 CSS pixels wide. The example turns off the "redmenubar" display element and turns on the "altmenubar" for small windows, and also adjusts margins:

  <style>
    .altmenubar {display: none;}
    @media (max-width: 600px) {
      .redmenubar {display: none;}
      .altmenubar {display: block; margin: 9px 5px 0 5px;}
      .main {margin-top: 0; padding: 5px 5px 5px 5px;}
    }
  </style>

This is just a taste of what you can do with the new features. RTFM.

updated 2021-01-21 10:52