When to use the img, figure or picture html tags

When it comes to showing images we have multiple choices. The img, figure, or picture do the same thing, but in different ways. Knowing when to use each of them leads to better semantics and SEO in our web pages.

Using the plain old img tag

The scope of img tags is to add a single inner image as part of specific content.

<img src="cat.jpg" alt="this is a cat" width="500" height="600">

It is meant to be used in a container like a paragraph and were the displayed image is needed so that the text in that container is better understood.

This means that it is not meant for things like icons, background patterns, or other images that only serve as decorations. For decorations, you will be better off of using something like a CSS background-image property.

Using the figure tag

Mainly used with a figcaption tag, the scope of the figure tag is to glue some text to one (or multiple) pictures.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" >
  <img src="rome.jpg" alt="Rome" >
  <figcaption>Pictures made my X in Italy </figcaption>
</figure>

The figcaption is used to give extra info for those images, like

• who is the photographer of those images
• when or where the images were taken or created
• a link with credits for that image.

Bradley Taunt has a nice example of using the figure element to give a performance boost by loading the images only at user click.

The figure tag is meant to be used outside containers like paragraphs.

Using the picture tag

The picture tag was meant for responsiveness and art direction.

<picture>
  <source media="(min-width:650px)" srcset="cat_big.jpg">
  <source media="(min-width:465px)" srcset="cat_small.jpg">
  <img src="cat_default.jpg" alt="Cat>
</picture>

You can use it to tell the browser what variant of the image to use and when.

Places like hero sections or main article images, where you have big images and need good control over the cropping of an image or how they should look on various screens size are excellent for the picture element.

As with the figure tag, the picture is meant to be used as a standalone object outside of containers.

---