Serving Responsive Images with the picture Tag

In this lesson you'll learn how to serve different responsive images using the picture tag, so you can show the optimal image while keeping data usage down. This is for people searching "HTML picture tag usage."

Using the <picture> tag lets you switch which image is displayed based on a condition, like the screen's width. This is used when you want to serve a small image on a phone and a large one on a computer, to keep data usage down.

The sample code specifies <source media="(max-width: 400px)" srcset="small-image">, switching to the smaller image only when the screen width is 400px or below. If the condition isn't met, the image from the final <img> tag is shown instead.

A common beginner stumbling block is that an <img> tag must always be included inside <picture>. A <source> alone won't display an image — <img> is required as the "default value for when no condition matches."

This is one of the important performance measures in real projects too, for improving how fast a page displays. On sites with a lot of mobile-network traffic in particular, the importance of this mechanism — avoiding needlessly loading a large image — keeps growing.