The Picture Element

The <picture> element allows specifying multiple versions of an image. The browser loads the best one, based on your requirements.

As stated in the previous chapter, you want your web page to be as small and fast as possible. If a user visits your website on their tiny phone, you don’t want to load your huge, high-resolution version. You want to load a much smaller version of the same image.

You also want to support all browsers, even old ones, even ones that don’t support a newer image format yet.

That’s why, on modern websites, almost all images are wrapped inside such an element. It gives multiple versions of an image and when to use each one.

How to use it

The rules are as follows.

• There should be one <img> element. This is the fallback in case everything goes wrong. It should also have the attributes I mentioned above (controlling size, lazy loading, and whatever else)
• There can be any number of <source> elements. These provide alternative sources, and are void elements.

The browser checks the sources top to bottom, and picks the first one that matches.

Yes, the official recommendation is to place picture elements inside figure elements.

The Source Element

The source element for other media types (such as video and audio) is very simple and will be discussed in their respective chapters.

For images, however, it has a lot of functionality. Why? So you can use responsive images.

Based on the screen size and resolution of the visitor, you load and display a different image. This way, you don’t need to load unnecessarily large image files, but also never display a pixelated or tiny image to users with high-resolution screens. It also allows users to zoom in (or out), and it loads new versions to match the new resolution.

The <source> element can have these attributes.

• type: the image format. (image/webp for webp, image/png for png, etcetera)
• srcset: one or multiple urls to source images plus their ideal display size, separated by commas.
  • After each url, type number + w (to set the ideal width in pixels) or number + h (to set the ideal height in pixels).
• media (optional): a restriction for when this image should be used. (A CSS media query, so out of scope for this course.)
• sizes (optional): the base size to display the source images. (The default is 100vw: full width. If you want your 500px image to be displayed at 250px, for example, the value would be 50vw.)

As mentioned, though, this is both complicated and advanced. My own websites use a lot of images, but aren’t extremely heavy on them, and I take great care to compress the images to tiny sizes anyway. As such, I have never actually needed to use these advanced HTML attributes.

If you do decide you need this, study the MDN docs for the full explanation, with examples. Remember, this course is NOT a documentation :)