Resolution Switching
Preamble
The resolution switching problem can be thought of as presenting an image of appropriate resolution given a device’s display density, viewport size or other size constraint. Put another way, we don’t want to send high resolution images to low resolution screens or send low res images to high res screens.
There’s no benefit for the user to receive an image with a resolution that needs to be scaled down. Worse, that image has consumed resources that it didn’t need to. Whether cellular network bandwidth or cpu processing cycles there’s an impact to the user that isn’t on the screen.
The resolution switching problem can be thought off in two scenarios. Same size, different resolution and same image, different size.
Same image, different sizes
In this situation we want to display the same image but an appropriately sized version depending on the display.
We can use the <img> element and incorporate two additional attributes. The srcset and sizes attributes allow us to offer images of varying sizes that the browser can select as the best choice.
srcset defines the list of images and related size the browser can choose from.
<img srcset="img/sizes/lego_320.png 320w,
img/sizes/lego_640.png 640w,
img/sizes/lego_1024.png 1024w">
Following the filename, you’ll notice a w this indicates the intrinsic or real width of the image. This helps the browser identify the file that best suits the location as determined by the sizes attribute.
sizes defines the media queries and associated image size that best suits the condition.
<img sizes="(max-width: 320px) 320px,
(max-width: 640px) 640px,
(max-width: 1024px) 1024px">
You’ll notice after the condition we declare a size for the slot. The slot is a placeholder for the matching image.
Now the browser can choose the most appropriate image.
Full Example
<img class="orig-img"
srcset="img/sizes/lego_320.png 320w,
img/sizes/lego_640.png 640w,
img/sizes/lego_1024.png 1024w"
sizes="(max-width: 320px) 320px,
(max-width: 640px) 640px,
(max-width: 1024px) 1024px"
src=“img/sizes/lego_640.png”
alt=“Life size person built from grey Lego bricks
standing next to partially completed lego people”>
Same size, different resolution
Same size different resolution refers to providing images for higher density displays. For example, a 4 inch display with a resolution of 480px by 480px is not the same as a 4 inch display with a resolution of 960px by 960px.
The physical size is the same but if we served a 480px image on the higher density display, it wouldn’t look very good so we need a way to adapt to higher resolutions. Consequently, the high res image on a low res display is wasteful.
The physical size constraints in the example above describes the problem in more concrete terms. In reality, the constraint is likely to be a width value set on an image or the viewport width.
To account for display density we can tweak the use of the <img> element and srcset attributes. This needs to work in conjunction with the presence of the viewport <meta>tag in the <head> of the document.
<img srcset="img/sizes/lego_320.png,
img/sizes/lego_480.png 1.5x,
img/sizes/lego_640.png 2x,
img/sizes/lego_960.png 3x">
Full Example
<img id="dpi"
srcset="img/sizes/lego_320.png,
img/sizes/lego_480.png 1.5x,
img/sizes/lego_640.png 2x,
img/sizes/lego_960.png 3x"
src=“img/sizes/lego_640.png”
alt="Life size person built from grey Lego bricks standing
next to partially completed lego people">
Further Review
Responsive images - Learn web development | MDN