Img
El tag img no necesita introducción. Tiene el atributo srcset que nos permite indicar múltiples urls a diferentes resoluciones de una misma imagen, lo que permite al navegador mostrar la más adecuada dependiendo de la resolución.
Una vez cargada una imagen, no cambiará a otra sin hacer refresh por mucho que redimensionemos el viewport.
<img srcset="foo-320w.jpg 320w, foo-480w.jpg 480w, foo-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="foo-800w.jpg" alt=bar>Figure
Figure representa un elemento independiente que puede tener un caption.
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
<figcaption>An elephant at sunset</figcaption>
</figure>Picture
Picture es similar a srcset, pero no necesariamente debe ser la misma imagen en múltiples resoluciones, sino que podemos incluir diferentes imágenes en diferentes tamaños y resoluciones para mostrar en diferentes resoluciones o dispositivos.
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="photo" />
</picture>