Tema: images
-
Imágenes responsivas con srcset, sizes y picture
srcset con descriptores de ancho junto con un atributo sizes permite que el navegador elija el archivo de imagen más pequeño que llena el espacio disponible según el viewport y la densidad de píxeles actuales; los descriptores x sirven imágenes de tamaño fijo a varias densidades; picture con elementos source gestiona la dirección de arte y el respaldo de formato. Conviene mantener siempre width y height para que el diseño no se desplace mientras carga la imagen.
-
Pipeline de optimización de imágenes en tiempo de compilación: originales, escala de tamaños, formatos codificados y metadatos eliminados
Conserva los originales fuera del directorio web y genera a partir de ellos, en un paso de compilación reproducible, todos los tamaños y formatos servidos. Convierte a sRGB y elimina los metadatos por defecto (sharp lo hace salvo que se llame a keepMetadata; cwebp no copia ninguno salvo que -metadata indique lo contrario), nombra las salidas por origen y ancho o por hash de contenido, y comprueba con exiftool que no sobreviva ningún dato EXIF ni GPS.
-
Entrega de imágenes: AVIF y WebP con alternativas, carga diferida y prioridad de descarga
Sirve formatos modernos mediante elementos source de picture con el atributo type y un img en JPEG o PNG como alternativa (o negocia con Accept y Vary). Aplica carga diferida solo a las imágenes situadas bajo el primer viewport, con width y height definidos, y marca con fetchpriority=high la imagen más grande visible sin hacer scroll, en lugar de lazy.
Legible por máquina: JSON