Nos permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.
HTML5 introdujo el elemento <picture>
Este elemento contiene elementos <source> y cada uno de estos hace referencia a una imagen diferente. Y el navegador escoge una de ellas según la pantalla o el dispositivo.
En los atributos del source se describe cuando se tiene que usar cada imagen.
Es importante poner un <img> como último hijo, por si el navegador no soporta el <picture> o no encuentra el source adecuado, entonces carga el <img>.
En ejemplo de abajo si redimensionas la ventana del navegador verás como va cambiando de una imagen a otra.
<picture>
<source media="(min-width: 500px)" srcset="https://kikopalomares.com/car.jpg">
<source media="(min-width: 300px)" srcset="https://kikopalomares.com/pi%C3%B1a-calabaza-mac.jpg">
<img src="https://kikopalomares.com/kikopalomares.jpg">
</picture>
Normalmente se usa en dos casos:
- Ancho de banda: para dispositivos con pantallas pequeñas no hace falta cargar imágenes muy grandes.
- Soporte de formatos: algunos navegadores no soportan todos los formatos de imagen, usando
<picture>el navegador cogerá la primera imagen del formato que reconozca.
