Imágenes y velocidad: formatos, tamaños y carga diferida

Por qué las imágenes deciden el tiempo de carga

Google escribe que las imágenes suelen ser lo que más contribuye al tamaño total de la página, lo que puede hacer que las páginas carguen de forma lenta y costosa. Dos de las Core Web Vitals (métricas web principales) dependen directamente de las imágenes. Largest Contentful Paint (LCP) mide la carga: Google aconseja que el elemento más grande aparezca en los primeros 2,5 segundos después de que la página empiece a cargarse. En muchas páginas ese elemento es una imagen, por ejemplo una foto grande en la parte superior. Cumulative Layout Shift (CLS) mide la estabilidad visual y debería quedarse por debajo de 0,1. Las imágenes que llegan sin espacio reservado empujan el texto hacia abajo y aumentan este valor.

El formato correcto

• Fotos: JPEG funciona en todas partes. WebP y AVIF suelen ser claramente más pequeños con una calidad parecida.
• Gráficos con bordes nítidos o transparencia: PNG, o WebP y AVIF, que también admiten transparencia.
• Logotipos e iconos: SVG, porque se mantiene nítido a cualquier tamaño y suele ser muy pequeño.
• La Búsqueda de Google admite imágenes en el atributo src en los formatos BMP, GIF, JPEG, PNG, WebP, SVG y AVIF.

Si ofreces WebP o AVIF, puedes mantener un JPEG como alternativa en un elemento picture. El navegador elige la primera fuente que entiende.

El tamaño correcto

Una imagen de 2400 píxeles de ancho que se muestra a 600 píxeles desperdicia la mayor parte de sus bytes. Exporta las imágenes aproximadamente al ancho con el que se muestran y, para pantallas nítidas, a aproximadamente el doble. Después, comprímelas. En muchos programas de imagen basta con un ajuste de calidad en torno a la mitad de la escala para fotos en la web. Revisa el resultado a tamaño completo antes de sustituir el original.

srcset y sizes

Un solo archivo nunca sirve para todas las pantallas. Con srcset ofreces varios archivos de la misma imagen e indicas el ancho de cada uno. Con sizes le dices al navegador con qué ancho se mostrará la imagen. El navegador elige entonces el archivo más pequeño que sea lo bastante nítido.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

En este ejemplo, la imagen ocupa toda la pantalla en pantallas estrechas y mide 700 píxeles de ancho en las más anchas. Google recomienda mantener siempre una alternativa en el atributo src. Escribe un texto alternativo real en lugar de los tres puntos.

width y height contra los saltos de diseño

Sin width y height, el navegador no sabe cuánto espacio necesita una imagen hasta que llega el archivo. El texto que hay debajo salta entonces hacia abajo. La guía de web.dev sobre los saltos de diseño aconseja incluir siempre los atributos width y height en las imágenes y los elementos de vídeo, con el tamaño en píxeles del archivo o al menos la relación de aspecto correcta. Los navegadores modernos fijan con estos valores la relación de aspecto predeterminada de una imagen y reservan el espacio. En el CSS, width: 100% y height: auto mantienen la imagen flexible. Si no puedes poner los atributos, la guía menciona como alternativa la propiedad CSS aspect-ratio.

Carga diferida (lazy loading)

Con loading="lazy", el navegador carga una imagen solo cuando se acerca a la zona visible. Así se ahorran datos en las imágenes de más abajo. Google dice sobre la carga diferida: no la añadas al contenido que probablemente sea visible de inmediato cuando un usuario abre una página. La carga diferida integrada en el navegador está disponible para imágenes e iframes.

La imagen LCP

La imagen más grande de la parte superior, a menudo una imagen principal (hero) o la foto principal del producto, es el archivo más importante de la página. La guía de web.dev sobre LCP dice: nunca cargues de forma diferida tu imagen LCP. fetchpriority="high" es una indicación al navegador para que la cargue pronto. Según la guía, una prioridad alta en más de una o dos imágenes ya no ayuda. Las imágenes cuya dirección oculta una biblioteca de scripts en data-src, o que solo son un fondo CSS, el navegador las encuentra tarde. Para una imagen de fondo, la guía menciona una precarga con link rel="preload" en el HTML. AVIF o WebP y un archivo más pequeño también acortan el tiempo de carga.

Para ver cómo rinden tus páginas, Google remite al informe Core Web Vitals de Search Console. Para una sola página, las herramientas de rendimiento de tu navegador muestran qué elemento es el elemento LCP y qué elementos desplazan el diseño. Mide antes y después de un cambio, para saber si ha servido.

Una lista de control breve

• ¿La imagen más grande de la parte superior se carga normalmente y no de forma diferida?
• ¿Tiene cada img width y height, o el espacio reservado con aspect-ratio?
• ¿Cada archivo tiene más o menos el ancho con el que se muestra, y está comprimido?
• ¿Las fotos grandes vienen en varios anchos con srcset y sizes?
• ¿Hay archivos JPEG o PNG que podrían ser WebP o AVIF?

Trabajar con Do4U

La Revisión de imágenes lee una página y cada imagen que contiene. Para cada archivo indica el formato, el tamaño del archivo y los píxeles y, del HTML, width y height, loading, fetchpriority, srcset y sizes, las fuentes de picture y las imágenes de fondo en atributos style. Do4U deduce del HTML cuál es probablemente la imagen LCP. No la mide, porque el elemento LCP real lo decide el navegador. Recibes una tabla de las imágenes con los hallazgos, el peso total y un resumen breve. No se incluyen las imágenes que inserta JavaScript ni las imágenes de fondo de archivos CSS externos. No se usa IA, y la comprobación es gratuita, con un límite diario.

Do4U encuentra indicios; tú revisas y decides. Confirma el elemento LCP con las herramientas de rendimiento de tu navegador antes de cambiar la página.