When it comes to showing images we have multiple choices. The
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
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>
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.
figure tag is meant to be used outside containers like paragraphs.
Using the picture tag
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
As with the figure tag, the picture is meant to be used as a standalone object outside of containers.