What is the difference between the elements <img>, <picture> and <figure>?

Question

In HTML we have the elements <img> (image), <picture> and <figure>, which I believe to be a "figure" or "image". The img is well known, the others have been introduced recently. I note that in the examples they commonly appear together:

<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">   
  <figcaption>Legenda para a imagem impressionante</figcaption>
</figure>

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

What exactly is the function of each of them, and what is the correct way to use them? There are situations where it would make sense to combine figure and picture, and if there are, this is allowed?

Answer 1

<img> Standard element for image loading.

<figure> Element to be used in conjunction with the element <figcaption>. Its purpose is to mark diagrams, illustrations, photos, and code fragments (among other contents).

Example:

<figure>
  <img src="/kookaburra.jpg" alt="Kooaburra">
  <img src="/pelican.jpg" alt="Pelicano na praia">
  <img src="/lorikeet.jpg" alt="Papagaio">
  <figcaption>Pássaros Australianos. Da esquerda para direita, Kookburra, Pelicano e Papagaio. Originais por <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

<picture> Element that lets you treat responsive images the same way we treat audio files with the tag <audio> or videos tagged <video>. Also allows you to point several images through the tag source.

Example:

You can use the diagram below to configure that a certain image is loaded according to the orientation of the screen and/or any of the declared queries.

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

Inside the tag <picture> tag <source> for each image file pointed. Add the tag media to assign Queries based on screen resolution, screen orientation or pixel density. Add the tag srcset to assign the path of multiple image files. Use fallback with the tag <img> for browsers that do not support the resource.