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.

Some modern laptops have higher resolution screens: 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

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 computers with higher pixel densities

2x
2x

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">

Responsive Images

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

New features in HTML5 allow you to create high and low pixel-count versions of image files, and specify which 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. RTFM.

Responsive Design

'Responsive Design' is a related 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). For example, a full size page might use a menu bar with drop-downs, while a page for a small device might have a simpler menu, or one that is only displayed when a 'menu' icon is clicked. The following example changes the way a page displays when the window is less than 600 CSS pixels wide. The example turns off one display element and turns on another for small windows, and also adjusts margins:

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

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

updated 2020-07-29 15:40