Imágenes responsivas con srcset — Explicado correctamente

srcset ofrece archivos candidatos; sizes describe el espacio que ocupará la imagen. No sustituye al CSS ni obliga a elegir un archivo exacto. El navegador puede considerar densidad, caché y condiciones de carga.

Prepara dos archivos que puedas comprobar

Descarga el patrón de 800 × 600. Ábrelo en Redimensionar, conserva la proporción y cambia el ancho a 400: el alto esperado es 300. Aplica y descarga esa copia sin sobrescribir el original. Comprueba las dimensiones de ambos archivos.

Para una página de prueba, guarda las dos copias como sample-400.png y sample-800.png junto al HTML. Este ejemplo supone un diseño que ocupa el viewport menos 32 píxeles hasta un máximo de 800 píxeles; ajusta CSS y sizes juntos si tu diseño es distinto:

<img src="sample-800.png"
     srcset="sample-400.png 400w, sample-800.png 800w"
     sizes="(max-width: 832px) calc(100vw - 32px), 800px"
     style="width: min(800px, calc(100vw - 32px)); height: auto"
     width="800" height="600" alt="Synthetic colour and edge chart">

En una página en español, traduce el texto alternativo. Los números 400w y 800w son anchos reales de archivo, no puntos de ruptura. Inspecciona document.querySelector('img').currentSrc y la pestaña Red con distintos viewport y densidad. Usa un contexto nuevo o controla la caché: reducir la ventana no garantiza que el navegador sustituya una imagen grande ya descargada.

Elige descriptores adecuados

Los descriptores w permiten describir variantes de ancho y combinarlas con sizes. Los 1x y 2x expresan densidad y resultan útiles para una presentación de tamaño fijo. No mezcles ambos tipos dentro del mismo srcset. Un sizes inexacto puede provocar una selección poco apropiada; omitirlo no implica siempre descargar la variante mayor.

picture con type selecciona formatos; srcset puede ofrecer tamaños dentro de cada formato. No necesitas producir todas las combinaciones posibles: empieza por los tamaños que usa tu diseño y mide. La referencia HTML de MDN explica los atributos.

Verifica el resultado visible

Revisa nitidez y bytes descargados en móvil y escritorio. Reserva la proporción con dimensiones correctas para evitar desplazamientos. Si la imagen es el elemento LCP, evita retrasar su petición con lazy loading; consulta el recorrido de diagnóstico. No prometas una puntuación mejor sólo porque existan variantes.