¿Cómo optimizar la carga de imágenes en una página web?

1. Compresión: Utilice herramientas para optimizar el tamaño de las imágenes sin pérdida de calidad (por ejemplo, TinyPNG, Compressor.io).
2. Formatos: Elija formatos modernos como WebP o AVIF, que ofrecen mejor compresión en comparación con JPEG y PNG. Para navegadores antiguos, utilice <picture> o el atributo srcset para fallback.
3. Carga diferida: Retrase la carga de imágenes fuera de la vista hasta que sean necesarias. Use loading="lazy" nativo o bibliotecas de JavaScript.
4. Imágenes responsivas: Sirva diferentes versiones de imágenes para distintos tamaños de pantalla y resoluciones, usando el elemento <picture> o atributos srcset/sizes.
5. CDN (Red de entrega de contenido): Aloje las imágenes en un CDN para una entrega más rápida del contenido a los usuarios desde la ubicación más cercana.
6. Caché: Configure encabezados de caché adecuados en el servidor para que el navegador pueda guardar las imágenes y cargarlas desde la caché local en visitas posteriores.
7. Placeholder/Blurhash: Muestre un "placeholder" de baja calidad o un Blurhash generado mientras se carga la imagen en tamaño completo.

Ejemplo de uso de loading="lazy":

<img src="image.jpg" alt="Descripción de la imagen" loading="lazy">

Ejemplo de uso de <picture> para diferentes formatos:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Descripción de la imagen">
</picture>