Optimizar imágenes web: formatos, tamaños, carga diferida y texto alternativo

Optimizar las imágenes de una web es servirlas en un formato moderno (AVIF o WebP), en el tamaño en que se muestran, con sus dimensiones declaradas y con carga diferida solo por debajo de la primera pantalla. Para Google cuentan además tres cosas: etiquetas img en el HTML, un texto alternativo que describa la imagen y un nombre de archivo descriptivo.

Para comprobarlo en tu web: Auditoría SEO

Las imágenes tocan dos partes del posicionamiento web a la vez: la velocidad, porque cada imagen es una descarga y muchas veces la principal es el elemento del LCP, y el contenido, porque Google las indexa y las muestra en sus resultados. Esta guía cubre las dos, con un fragmento de HTML comentado que puedes copiar.

¿Qué formato de imagen usar?

Para fotografías, AVIF o WebP, con JPEG como respaldo; para logotipos e iconos, SVG; para capturas de pantalla con texto, PNG o WebP sin pérdida. AVIF y WebP admiten compresión con y sin pérdida, transparencia y animación, y comprimen mucho más que JPEG o PNG1. Según MDN, una imagen WebP con pérdida pesa de media entre un 25 y un 35 % menos que un JPEG de calidad visual parecida1.

El soporte ya no es un problema. WebP funciona en todos los navegadores actuales, y AVIF desde Chrome 85, Firefox 93, Safari 16.1 y Edge 1211. Google Search admite los dos en sus resultados, junto con BMP, GIF, JPEG, PNG y SVG2.

La forma segura de servir AVIF es dentro de un elemento picture, que agrupa varias versiones de la misma imagen: el navegador usa el primer formato que entiende y, si no entiende ninguno, carga el img de respaldo3. Google pide precisamente que ese img con su src esté siempre presente2.

Sobre la compresión, la regla práctica: las fotografías toleran bien la compresión con pérdida, porque el detalle que se descarta apenas se ve; las capturas, diagramas y dibujos de línea piden compresión sin pérdida1. Ajusta la calidad mirando la imagen a su tamaño real, no ampliada.

¿Cómo servir el tamaño adecuado a cada pantalla?

Con los atributos srcset y sizes. srcset lista las versiones de la imagen con su anchura real en píxeles; sizes dice qué anchura ocupará la imagen en la página según el ancho de pantalla. Con los dos datos, el navegador elige la versión más pequeña que llena el hueco sin perder nitidez, teniendo en cuenta la densidad de píxeles de la pantalla3.

Un error habitual es subir la foto tal como sale de la cámara, de 4.000 píxeles de ancho, para mostrarla en un hueco de 800. El móvil descarga cinco veces más anchura de la que necesita. PageSpeed Insights lo señala en la insight Improve image delivery, que agrupa los formatos antiguos y las imágenes más grandes de lo que se muestran4. Cómo leer el resto del informe está en la guía de PageSpeed Insights.

Carga diferida: cuándo sí y cuándo nunca

La carga diferida nativa (loading="lazy") hace que el navegador no descargue una imagen hasta que está cerca de la pantalla. Chrome empieza a cargarla cuando está a unos 1.250 píxeles en 4G o a 2.500 en conexiones más lentas5. Funciona en todos los navegadores actuales sin JavaScript, y Google la admite: su rastreador ve las imágenes diferidas porque no dependen de que alguien se desplace o haga clic6.

La regla tiene una excepción que no admite matices: nunca pongas loading="lazy" en la imagen del LCP, la más grande de la primera pantalla. Web.dev lo dice así: diferir la imagen del LCP siempre provoca un retraso innecesario en su carga7. Al revés, esa imagen debe llevar fetchpriority="high" para que el navegador la pida antes que el resto7.

No es una precaución teórica. Un estudio de web.dev encontró que las páginas con carga diferida nativa, en su mayoría hechas con WordPress, tenían un LCP peor que las que no la usaban, porque se aplicaba también a las imágenes de arriba. Cuando se excluyeron las imágenes de la primera pantalla, la penalización desapareció y se mantuvo el ahorro de datos8.

Lo mismo con la prioridad: en una prueba de laboratorio de Google Flights, marcar la imagen de fondo con fetchpriority="high" bajó el LCP de 2,6 a 1,9 segundos9. Es una indicación al navegador, no una orden, así que mide el efecto en tu página9.

Dimensiones: el arreglo más barato del CLS

Declara width y height en todas las imágenes. Con esos dos números, el navegador calcula la proporción y reserva el hueco antes de descargar la imagen, así que el texto no salta cuando llega. Las imágenes sin dimensiones son una de las causas habituales de desplazamiento10, y web.dev recomienda los atributos en todas las etiquetas img5.

No hace falta que la imagen se muestre a ese tamaño exacto. Con max-width: 100% y height: auto en CSS, la imagen se adapta al ancho disponible y conserva la proporción que declaraste. Si no puedes tocar el HTML, aspect-ratio en CSS consigue lo mismo10. Cómo afecta esto a la estabilidad visual está explicado en la guía de Core Web Vitals.

Un ejemplo de HTML correcto, comentado

Este fragmento es la ficha de un producto ficticio: la imagen principal con formatos modernos, tamaños y prioridad; una imagen secundaria con carga diferida; y un adorno con texto alternativo vacío.

<!-- En tu CSS: img { max-width: 100%; height: auto; } -->

<!-- 1. Imagen principal, probable LCP: SIN loading="lazy" y con prioridad alta -->
<picture>
  <!-- El navegador usa el primer formato que entiende: AVIF y, si no, WebP -->
  <source type="image/avif"
          srcset="/img/sofa-lino-gris-800.avif 800w, /img/sofa-lino-gris-1600.avif 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <source type="image/webp"
          srcset="/img/sofa-lino-gris-800.webp 800w, /img/sofa-lino-gris-1600.webp 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <!-- Respaldo en JPEG: obligatorio; Google lee el src de este img -->
  <img src="/img/sofa-lino-gris-800.jpg"
       srcset="/img/sofa-lino-gris-800.jpg 800w, /img/sofa-lino-gris-1600.jpg 1600w"
       sizes="(max-width: 800px) 100vw, 800px"
       width="800" height="533"
       fetchpriority="high"
       alt="Sofá de tres plazas tapizado en lino gris, visto de frente">
</picture>

<!-- 2. Imagen por debajo de la primera pantalla: carga diferida -->
<img src="/img/sofa-lino-gris-costura.webp"
     width="600" height="400"
     loading="lazy"
     alt="Detalle de la costura doble en el brazo del sofá">

<!-- 3. Adorno sin información: alt vacío (no quitar el atributo) -->
<img src="/img/separador-ondas.svg" width="120" height="8" alt="">

Fíjate en tres detalles. El sizes dice que la imagen ocupa todo el ancho en pantallas de hasta 800 píxeles y 800 píxeles en las demás. Los nombres de archivo describen la foto. Y width y height mantienen la proporción real, 3:2, aunque la imagen se muestre más pequeña.

Texto alternativo: qué escribir y cuándo dejarlo vacío

El texto alternativo (alt) es la descripción que sustituye a la imagen cuando no se ve: la lee un lector de pantalla, aparece si la imagen no carga y, según Google, lo usa junto con su visión artificial y el contenido de la página para entender de qué trata la imagen2.

El W3C publica un árbol de decisión que resuelve casi todos los casos. Resumido en orden11:

1. ¿La imagen contiene texto? Si ese texto ya está al lado, alt vacío; si no, el alt reproduce el texto.
2. ¿Está dentro de un enlace o un botón? El alt dice adónde lleva o qué hace, no cómo es: «Ver el carrito», no «icono de carrito».
3. ¿Aporta información a la página? Una descripción breve de lo que aporta en ese contexto. Si es un gráfico complejo, los datos van también en el texto de la página.
4. ¿Es decorativa? alt="". El atributo vacío le dice al lector de pantalla que la salte; si falta el atributo, algunos leen en voz alta el nombre del archivo12.

Google añade su propio ejemplo de lo que no hay que hacer: un alt lleno de palabras clave da una mala experiencia, y lo considera relleno de palabras clave2. Entre alt="cachorro" y alt="Cachorro de dálmata jugando a buscar la pelota", Google prefiere el segundo. La relación con la accesibilidad está más desarrollada en accesibilidad web y SEO.

Nombres de archivo, contexto y sitemap de imágenes

Google solo indexa las imágenes que están en el src de un img; no indexa las imágenes de fondo en CSS2. Si una foto de producto importante es un background-image, para Google no existe como imagen.

Tres prácticas más de la guía de imágenes de Google2:

• Nombres de archivo cortos y descriptivos: sofa-lino-gris.jpg dice más que IMG00023.JPG. Si traduces la web, traduce también los nombres.
• Contexto: coloca la imagen cerca del texto que trata de ella, en una página sobre ese tema. El título y el texto de la página influyen en cómo aparece la imagen en los resultados.
• Sitemap de imágenes: sirve para avisar a Google de imágenes que quizá no encontraría, por ejemplo las que se cargan con JavaScript.

El sitemap de imágenes puede ser un fichero aparte o unas etiquetas añadidas al sitemap que ya tienes; a Google le valen las dos opciones13. Cada URL admite hasta 1.000 imágenes, y las etiquetas antiguas de título, pie, licencia y ubicación ya no se usan13. Las imágenes pueden estar en otro dominio, como un CDN, siempre que verifiques ese dominio en Search Console13.

La checklist de imágenes

Declaración de interés: este blog es de SmoothSeen, una herramienta de auditoría web que mide el posicionamiento en buscadores y en asistentes de IA. Entre las comprobaciones de Posicionamiento web revisa el texto alternativo de las imágenes (con texto, decorativas o sin atributo), si la imagen principal se carga en diferido, si las imágenes tienen dimensiones y la velocidad con PageSpeed Insights.

Preguntas frecuentes

¿Es mejor WebP o AVIF?

AVIF suele comprimir algo más que WebP para la misma calidad visual, pero su soporte es más reciente: Safari lo admite desde la versión 16.1 y Edge desde la 121. WebP funciona en todos los navegadores actuales. La opción más segura es servir las dos dentro de un elemento picture, primero AVIF y después WebP, con un JPEG de respaldo en el img.

¿La carga diferida perjudica al SEO?

No, si se usa bien. Google admite la carga diferida nativa del navegador, porque no depende de que el usuario se desplace o haga clic, y su rastreador ve esas imágenes. Lo que perjudica es aplicarla a la imagen principal de la primera pantalla: retrasa el LCP, que es una de las Core Web Vitals. Difiere solo lo que queda más abajo.

¿Todas las imágenes necesitan texto alternativo?

Todas necesitan el atributo alt, pero no todas necesitan texto. Las imágenes que aportan información llevan una descripción breve de lo que aportan en su contexto. Las decorativas, o las que repiten algo que ya dice el texto de al lado, llevan alt="", vacío, para que el lector de pantalla las salte. Quitar el atributo no es lo mismo que dejarlo vacío.

¿Hace falta un sitemap de imágenes?

No es obligatorio. Google descubre las imágenes que están en etiquetas img del HTML al rastrear tus páginas. El sitemap de imágenes ayuda cuando hay imágenes que podría no encontrar, como las que se cargan con JavaScript, o cuando se sirven desde otro dominio. Puede ser un fichero aparte o unas etiquetas dentro del sitemap que ya tienes.

Qué hacer ahora

Abre la página más visitada de tu web, identifica su imagen principal y comprueba tres cosas: que no lleve loading="lazy", que tenga width y height y que su alt describa lo que aporta. Después recorre la checklist con el resto de plantillas y sigue con la guía de posicionamiento web.