<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.