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

Question

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

Navigation

#1 by (9 votes)

13

In HTML we have the elements <img> ( image ), <picture> and <figure> , which I believe is a" figure "or" image ". The img is well known, the others have been introduced recently. I notice 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 of using them? Are there situations where it would make sense to combine figure and picture , and if they exist, is this allowed?

html html5

asked by anonymous 17.10.2015 / 21:36

1 answer

How to publish application made in Node.js Query to get sum 1024 in max 3 transactions

score 9 · Accepted Answer

<img> Default element for loading images.

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

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> An element that allows you to handle responsive images in the same way that you treat audio files with the <audio> tag or videos with the <video> tag. It also allows you to point multiple images through the source tag.

Example:

You can use the schematic below to configure a given image to load according to the screen orientation 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>

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