Servir imágenes adaptables con la etiqueta picture

En esta lección servirás una imagen distinta según el tamaño de pantalla, para no enviar archivos enormes a un móvil.

<picture> envuelve varios <source> y un <img> final. Cada <source> lleva una condición en media y su imagen en srcset; el navegador recorre la lista de arriba abajo y usa la primera que cumple. El <img> del final es obligatorio y actúa como alternativa por defecto.

En el código de ejemplo se carga una imagen pequeña en pantallas de 400px o menos y una grande en el resto. Cambia el ancho de la vista previa y recarga para ver el cambio.

Olvidar el <img> final es el error crítico: sin él no se muestra nada en absoluto. Y recuerda que el alt va en ese <img>, no en los <source>.

En sitios reales, esta misma etiqueta se usa para servir formatos modernos como WebP o AVIF con una alternativa en JPEG para navegadores antiguos. Es una de las optimizaciones de rendimiento con mejor relación entre esfuerzo y resultado.