When to use the img, figure or picture html tags

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

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.

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X