Make Images Responsive with HTML

This post is based on Responsive images on MDN

When talking about responsive images, we want our images look good on both smartphones and laptops, there are two ways to do it under different conditions, to show good images on smartphones, one way is to display the main part of the original image by zooming it in, another way is to supply a smaller sized image for smartphones user, we call the first one Art Direction Problems, and the second one Resolution Switching Problems. For the resolution switching problems, we also have two categories, one is to display different size images on different size devices, one is to display the same size images on different resolutions devices.

We use <picture> to solve art direction problems, srcset and sizes attributes of the <img> element to solve resolution switching problems, srcset with x-descriptors to solve the same size images on different resolutions devices.

Resolution Switching Problem

Different Size Images

Showing the same image but containing different pixels. small screen size users don’t want to download a large image with pixels more than its device, which waste the bandwidth.

For example, think of a phone with 500px width wand each pixel can only show a pixel of an image, if you supply a 1000px width image to it, it will diplay the same as a 500px width image, but with extra bandwidth used.

The traditional <img> element can only reference a single src, to solve the problem above, we need two new attributes — srcset and sizes — to provide different sized images along with hints to help the browser to pick the right one.

For example, to provide smaller images for smartphones and larger images for laptops or desktops:

1
2
3
4
5
6
<img
srcset="apple-480w.jpg 480w, apple-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="apple-800w.jpg"
alt="A red apple."
/>

Let’s explore these attributes in more detail:

  • srcset defines the set of images we will allow the browser to choose from, and what width each image is followed by the file position.
  • size defines a set of media conditions and indicates what image size would be best to choose when certain media condition are true, if one image size not comes with a media condition, that’s the default condition, always put the default condition in the last one of the list because the browser ignores everything after the first matching condition.

With these attributes set, the browser will:

  1. Look at the width of the device
  2. Work out which media condition is true in the sizes list
  3. Look at the slot size given to the media condition
  4. Request the image referenced in the srcset list that most closely matches the chosen slot size.

A common metadata in the <head> element is <meta name="viewport" content="width=device-width">, this forces mobile browser to adopt their real viewport width for loading the pages (because some browsers lie about their viewport width, and instead load the page at a larger viewport width and shrink the loaded page down, which is not helpful for responsive design).

Same Size but Different Resolution Images

To support multiple display resolutions but keep the image in the same size, you can do like this:

1
2
3
4
5
6
<img
srcset="apple-320w.jpg, apple-480w.jpg 1.5x, apple-640w.jpg 2x"
src="apple-640w.jpg"
alt="A red apple."
style="width: 320px"
/>

In this case, size is not needed, the browser will get the resolution of the display and serves the most approprite image refered in the srcset list. So if the device accessing the page has a standard/low resolution display, with one device pixel representing one CSS pixel, the apple-320w.jpg image will be loaded, if the device has a higer resolution of two device pixel representing one CSS pixel, the apple-640w.jpg image will be loaded.

Art Direction Problem

Use different images (like cropped images) for different space allocations.

We use the <picture> element to implement:

1
2
3
4
5
<picture>
<source media="(max-width: 799px)" srcset="mary-480w-portrait.jpg" />
<source media="(min-width: 800px)" srcset="mary-800w.jpg" />
<img src="mary-800w.jpg" alt="Mary stands in front of the school gate." />
</picture>

You must provide an <img> element after all <source> elements, otherwise no images will appear, because it’s the <img> element that makes the image (or alt) displyed. This also provides the default case if none of the media conditions above return true (So you could actually remove the seond <source> in the above example), also, it works as a fallback for browsers that don’t support the <picture> element.

Why not CSS or JavaScript

You might think that we can do these with CSS or JavaScript, but when the browser starts to load the page, it starts to download any images before the main parser has started to load and interpret CSS and JavaScirpt. This is a useful technique which make the page load faster.

As you can see, images are loaded before CSS and JavaScript are parsed, so we need HTML to make images responsive, that’s why we need to learn the <picture> element, the srcset and sizes attributes of the <img> element.

Responsive images by Mozilla Contributors is licensed under CC-BY-SA 2.5