Image Presentation Size and Resolution
Image handling has come a long way since the early days of the Web. The arrival of higher-resolution screens such as Apple’s “Retina” displays posed new challenges for content authors, while introducing greater potential for confusion about image size and resolution.
Thankfully, the new world of multi-resolution image handling becomes manageable with clear understanding of a few basic concepts.
Presentation Size
The first concern when including an image in HTML content is usually the size at which the image should be displayed. We’ll call this the image’s presentation size.
Early Web browsers established the practice of displaying bitmapped images at 1 screen pixel = 1 image pixel. This made practical sense since it required no scaling, and efficiently and faithfully presented an image at the size and resolution it was designed for. It also made establishing presentation size a simple matter of finding out how many pixels wide and high the image data was (its “pixel dimensions”). Web browsers ignored any resolution metadata that an image file might happen to carry, and instead always displayed images at 1:1 unless an <img> element had explicit width and height attributes that overrode that default sizing. Most often, an <img>’s width and height would match the referenced image file’s pixel dimensions. While width and height attributes are not strictly required on an <img> element, specifying width and height values enabled browsers to perform accurate content layout before a page’s referenced image files or their metadata headers had had the change to download.
When displays with significantly higher resolutions arrived, presenting existing HTML content with the same sizing and layout as before was important for compatibility. At the same time, people were eager to take advantage of the new display capabilities to present sharper, clearer images. This led to the decision to maintain the established behavior of looking only at an image file’s pixel dimensions and displaying images at the same presentation size as before, while adding provisions for content authors to offer higher-resolution images suited to the new generation of displays. In keeping with this decision, the interpretation of width and height attributes (and their CSS counterparts) had to remain the same. The unit they were implicitly expressed in became enshrined as the CSS “pixel” (px), which is an actual device pixel on an older (“1x”) display, and an imaginary virtual “pixel” of the same physical size on a higher-resolution display.
Resolution
Once we’ve established an image’s presentation size, the next concern is whether we have an image file of appropriate resolution for the presentation size, when the image is drawn on some given screen.
To determine this, we compare the number of pixels the image file contains on a given axis (for example, how many pixels wide the image file is) with the number of screen pixels those image pixels will be stretched over. If we have the same number of image pixels as screen pixels, the image has exactly the right resolution to be drawn at this size. If we have less than one image pixel per screen pixel, the image has less than the ideal resolution and may appear blurry or pixellated when stretched to this size. If we have more than one image pixel per screen pixel, the image has higher resolution than is needed for this size. It will look fine when displayed, but contains more pixel data than is strictly needed and could be replaced with a smaller version if we wanted to economize on storage and download time.
Example: An image that measures 800 pixels wide by 600 pixels tall would have:
- exactly the right resolution if drawn to a 800 × 600 device-pixel rectangle on screen
- insufficient resolution if drawn to a 1000 × 750 device-pixel rectangle on screen
- excessive resolution if drawn to a 400 × 300 device-pixel rectangle on screen
A screen’s scale factor determines the number of device pixels per CSS “pixel” (px), and screens are roughly classified into whole-number scale factors:
- A “1x” screen has resolution typical of the early days of the Web: typically somewhere between 72 and 108 dots per inch. On a “1x” screen, one CSS “pixel” (
px) corresponds to exactly one physical pixel. - A “2X” screen is treated as having twice that resolution on each axis. On a “2x” screen, one CSS “pixel” corresponds to a 2 × 2 grid of physical pixels.
- On a “3x” screen, one CSS “pixel” is comprised of a 3 × 3 grid of physical pixels.
…and so on. What this means for presenting images is that, on a 2x screen, you’ll want twice the number of pixels in each dimension to display an image at the same presentation size as on a 1x screen. You can use a lower-resolution image and let the user’s Web browser stretch the image to the desired presentation size, but the image won’t exhibit the sharpness and fine detail that the user’s screen is capable of.
Example: When displaying an image at a presentation size of 400 × 300 px, like so:
<img width="400" height="300" src="...">you’ll ideally want an 800 × 600 image for a 2x screen, or a 1200 × 900 image for display on a 3x screen.
What to Do About All This
The factors described above leave Web content authors with a variety of options for making the best use of today’s higher-resolution displays.
One approach is to provide images that are tailored to the highest-resolution device you expect your content to be viewed on, and let lower-resolution devices “downsample” (shrink) the same source image for display. For example, if you’re primarily targeting 2x displays you might write something like this to embed an image in your content:
<img width="400" height="300" src="my-800x600-pixel-image.jpg">This is the simplest, lowest-effort way to support high display resolutions, and may be the appropriate tradeoff for some kinds of content. But it does require 1x devices to spend more time than necessary downloading more image data than they need or can use.
Another approach is to provide variants of the same image that are tailored to different resolutions, each as its own distinct file, and let the browser choose which of them to download and display. This can be done using the <img> “srcset” attribute in HTML 5:
<img width="400" height="300"
srcset="my-800x600-pixel-image.jpg 2x,my-400x300-pixel-image.jpg 1x"
src="my-400x300-pixel-image.jpg">The above <img> element offers an 800 × 600 pixel image for use on 2x displays, and a 400 × 300 pixel image for use on 1x displays, leaving the browser free to choose which of them to download.
When using srcset, the src attribute serves as a fallback for older browsers that don’t understand srcset. You’re free to provide whichever image variant you want for the src attribute. You can specify the 1x variant as we did above, reasoning that older browsers that don’t understand srcset are likely to running on older hardware with lower-resolution screens. Alternatively, you could specify a higher-resolution variant of the image as the <img>’s src, reasoning that it will be either adequate or more than adequate for most situations. The choice is up to you.