¿Cómo hacer que la imagen se cargue en tamaño reducido en dispositivos móviles?

Para cargar imágenes en tamaño reducido en dispositivos móviles, se utilizan imágenes adaptativas mediante HTML y CSS:

1. Utilice el elemento <img> con los atributos srcset y sizes, para que el navegador elija el tamaño de imagen adecuado según el tamaño de la pantalla:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Descripción de la imagen">

2. Utilice CSS para limitar el ancho máximo de la imagen:

img {
  max-width: 100%;
  height: auto;
}

3. También puede aplicar formatos modernos de imágenes (WebP, AVIF) para reducir el tamaño de los archivos.

De esta manera, el navegador en un dispositivo móvil descargará el archivo de tamaño óptimo, lo que mejorará el rendimiento y reducirá el tráfico.