Imagen responsiva
Técnica para entregar imágenes con el tamaño y formato óptimos según el tamaño de pantalla y la densidad de píxeles del dispositivo, evitando transferencias de datos innecesarias.
Las imágenes responsivas entregan imágenes de tamaño apropiado según el ancho de pantalla y la densidad de píxeles del dispositivo. Enviar una imagen de 4000px de ancho a un smartphone desperdicia ancho de banda; servir selectivamente tamaños apropiados para la pantalla reduce drásticamente la transferencia.
Los atributos srcset y sizes de HTML presentan múltiples candidatos de imagen al navegador. El elemento <picture> permite el cambio de formato (WebP para navegadores compatibles, JPEG como respaldo).
La implementación requiere pre-generar múltiples tamaños de imagen. La herramienta de redimensionamiento por lotes crea variantes a 320px, 640px, 1280px y 1920px para la enumeración en srcset. Combinado con la carga diferida, esto entrega solo las imágenes necesarias en tamaños apropiados.