Cómo usar srcset, sizes y picture correctamente
Las imágenes responsivas dejan que el navegador elija el archivo más pequeño y útil para la pantalla y el diseño de cada visitante. La clave es ofrecer variantes de ancho fiables, describir el espacio donde se renderiza con sizes, y mantener las decisiones de contenido accesible en tu página, no en un generador de imágenes.
Por PixoPublicado Actualizado
Genera variantes de ancho reales
Empieza con varios archivos que conserven la proporción del origen, como 320, 640, 960, 1280 y 1920 píxeles de ancho. No amplíes un original más pequeño, y no conserves una variante más grande que el origen sin una razón específica. El generador de imágenes responsivas de Pixo aplica ambas reglas y escribe las dimensiones resultantes y los tipos MIME en manifest.json.
Usa descriptores de ancho en srcset
Lista cada candidato con su ancho real en píxeles, por ejemplo image-640w.webp 640w. El descriptor w no es el ancho CSS ni un multiplicador de densidad; le indica al navegador el ancho intrínseco de ese archivo. Cada ruta en el srcset generado apunta a un archivo incluido en el ZIP, así que copia el directorio de archivos y el marcado juntos.
Haz que sizes coincida con el diseño
El atributo sizes describe con qué ancho se renderizará la imagen antes de que el navegador la descargue. Un punto de partida habitual es (min-width: 1024px) 50vw, 100vw para una imagen que usa la mitad del viewport en escritorio y el viewport completo en pantallas más pequeñas. Reemplaza ese ejemplo con tus puntos de quiebre CSS y anchos de espacio reales; un sizes impreciso puede hacer que el navegador elija archivos innecesariamente grandes o visiblemente borrosos.
Usa picture para elegir formato
Un elemento picture puede ofrecer fuentes WebP mientras conserva una alternativa img en JPEG o PNG. Coloca los elementos source primero y el elemento img al final. El navegador selecciona una fuente compatible y aun así usa el elemento img para la solicitud alternativa, el ancho y alto intrínsecos, el comportamiento de carga y el texto alternativo accesible.
Mantén width, height y alt en la página
Define width y height a partir del manifiesto generado para que el navegador pueda reservar el espacio correcto según la proporción y reducir el cambio de diseño. Pixo deja alt vacío a propósito porque solo el autor de la página sabe si la imagen es informativa, funcional o decorativa. Escribe un texto alt breve y contextual para las imágenes con significado, y deja alt vacío solo en las imágenes decorativas.
Implementa y verifica el paquete completo
Descomprime el paquete, publica el directorio de archivos sin renombrarlos, pega picture.html en tu página y ajusta sizes y alt. Luego prueba con viewports estrechos y anchos, confirma que el panel de Red solicita un solo candidato en vez de todo el conjunto, y verifica que cada URL solicitada resuelve con el tipo MIME de imagen esperado.