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.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.