Imágenes adaptables: srcset, sizes y el elemento picture explicados
Un móvil no necesita el mismo archivo que un monitor 4K. Las imágenes adaptables permiten que el navegador descargue solo lo que necesita, lo que reduce el peso de la página sin perjudicar la calidad. Esta guía explica el problema, las herramientas que ofrece HTML y cómo ponerlas en práctica.
El problema: un solo archivo para todas las pantallas
Si sirves una imagen de 2000 píxeles a todos los visitantes, un móvil con una pantalla de 390 píxeles de ancho descarga varias veces más datos de los que puede mostrar. Con una conexión móvil eso cuesta tiempo y dinero, y ralentiza la página justo para quienes menos pueden permitírselo.
Servir un archivo pequeño a todo el mundo tampoco es la solución, porque las pantallas grandes y de alta densidad lo mostrarían blando y borroso. Las imágenes adaptables lo resuelven ofreciendo varias versiones de la misma imagen y dejando que el navegador elija la adecuada.
Las tres herramientas: srcset, sizes y picture
| Herramienta | Qué hace | Para qué usarla |
|---|---|---|
srcset con descriptores de ancho | Enumera varios archivos y sus anchos en píxeles | Ofrecer distintos tamaños de la misma imagen |
sizes | Indica al navegador con qué ancho se mostrará la imagen | Ayudarle a elegir de srcset antes de conocer el diseño |
picture con source | Permite ofrecer distintos formatos o recortes | Servir WebP o AVIF con un formato de respaldo, o un recorte más ajustado en móviles |
Un ejemplo básico tiene este aspecto: <img src="photo-800.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" alt="...">.
El src es el respaldo para navegadores antiguos. El navegador combina el ancho del diseño, la densidad de la pantalla y su propio criterio, así que tú describes las opciones en lugar de imponer una.
Ventajas e inconvenientes de las imágenes adaptables
Ventajas
- Descargas más pequeñas en móviles y conexiones lentas, a menudo con un gran ahorro.
- Imágenes nítidas en pantallas de alta densidad sin penalizar a todos los demás.
- Mejores puntuaciones en las medidas de velocidad, como el Largest Contentful Paint.
- Funciona con HTML estándar, sin JavaScript.
Inconvenientes
- Más archivos que crear, nombrar y gestionar por cada imagen.
- Más código, y un valor de
sizesque debe coincidir aproximadamente con tu diseño para funcionar bien. - Si
sizeses incorrecto, el navegador puede elegir un archivo mayor de lo necesario. - La dirección de arte con
picturemultiplica el número de versiones, así que úsala solo donde importe.
La mayoría de los sistemas de gestión de contenidos y las CDN de imágenes generan las versiones y el código por ti, lo que elimina el principal inconveniente.
Paso a paso: aplica imágenes adaptables
- 1Decide los anchos. Opciones habituales son 480, 800, 1200 y 1600 píxeles. En webs pequeñas valen menos.
- 2Redimensiona a partir del original más grande. Usa Redimensionar imagen para producir cada ancho, manteniendo la proporción. No redimensiones nunca a partir de una copia ya reducida.
- 3Comprime cada versión. Pasa cada una por Comprimir imagen. Una calidad de 75 a 85 sirve para la mayoría de las fotos.
- 4Escribe el
srcsetenumerando cada archivo con su ancho en píxeles seguido dew. - 5Añade
sizesde acuerdo con tu diseño, por ejemplo(min-width: 1024px) 800px, 100vw: ancho completo en pantallas pequeñas y 800 píxeles en las grandes. - 6Mantén un
srcde respaldo y unaltpreciso. - 7Añade
widthyheightpara que el diseño no salte mientras carga. - 8Prueba cambiando el tamaño de la ventana del navegador y comprobando en el panel de red qué archivo se descarga.
Usar picture para formatos modernos y dirección de arte
Para ofrecer formatos modernos con un respaldo seguro, envuelve las fuentes en un elemento picture: <picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"><img src="photo.jpg" alt="..."></picture>. El navegador usa la primera fuente que admite, así que nadie ve una imagen rota.
Crea la versión WebP con JPG a WebP. La guía de formatos explica cuándo merece la pena el esfuerzo extra de AVIF.
El mismo elemento puede mostrar un recorte distinto en pantallas pequeñas mediante atributos media, por ejemplo un recorte cuadrado más ajustado en móviles. Recortar imagen ayuda a preparar cada versión. Resérvalo para los casos en que el motivo de verdad lo necesite, porque cada versión añade trabajo.
Errores frecuentes
- Escribir un valor de
sizesque no coincide con el diseño. El navegador elegirá entonces el archivo equivocado. - Crear versiones redimensionando una copia de una copia, lo que pierde calidad.
- Aplicar carga diferida a la primera imagen. Consulta la guía de carga diferida.
- Olvidar
widthyheight, lo que provoca saltos de diseño. - Escribirlo todo a mano cuando tu CMS ya genera
srcset. Revisa primero el HTML.
Preguntas frecuentes
¿Qué diferencia hay entre srcset y sizes?
srcset enumera los archivos disponibles y sus anchos. sizes indica al navegador con qué ancho se mostrará la imagen, para que pueda elegir el mejor archivo antes de conocer el diseño de la página.
¿Cuándo debo usar el elemento picture?
Úsalo cuando quieras ofrecer formatos modernos como WebP o AVIF con un formato de respaldo, o cuando un recorte distinto funcione mejor en pantallas pequeñas. Para ofrecer simplemente distintos tamaños de la misma imagen, basta con srcset en un elemento img.
¿Cuántos tamaños de imagen necesito?
Tres o cuatro anchos cubren la mayoría de las webs, por ejemplo 480, 800, 1200 y 1600 píxeles. Más versiones ajustan mejor, pero añaden trabajo y almacenamiento.
¿WordPress hace esto automáticamente?
Sí, WordPress genera varios tamaños y añade srcset a las imágenes del contenido. Comprueba que tu tema y tus plugins conservan ese código y optimiza el original antes de subirlo.
¿Ayudan las imágenes adaptables al SEO?
De forma indirecta. Las descargas más pequeñas mejoran la velocidad y los Core Web Vitals, lo que favorece la experiencia de página. No cambian cómo entienden la imagen los buscadores, así que mantén buenos textos alternativos y nombres de archivo.