Optimización de imágenes para SEO y rendimiento web

Las imágenes siguen siendo uno de los elementos que más peso generan dentro de una página web.

En muchos sitios web el mayor consumo de recursos no proviene del HTML ni del JavaScript, sino de imágenes mal dimensionadas o mal optimizadas.

Esto afecta directamente a:

• la velocidad de carga
• los Core Web Vitals
• el consumo de ancho de banda
• la experiencia del usuario

Debemos tener en cuenta que, cuando una imagen pesa más de lo necesario o se sirve en un tamaño incorrecto, el navegador necesita descargar más datos y procesar más recursos de los que realmente necesita.

Esto afectará negativamente a métricas como LCP y CLS, ralentizará la carga y aumentará el consumo de recursos.

En algunos casos, además, las imágenes también influyen directamente en el tamaño del HTML. Esto ocurre cuando se utilizan imágenes inline en base64, SVG complejos embebidos o constructores visuales que generan demasiado marcado para mostrar recursos gráficos.

Si te interesa este punto, aquí lo analizo con más detalle → límite de 2 MB de HTML en Googlebot

Optimizar imágenes es una práctica técnica que afecta directamente al rendimiento del sitio y a su capacidad para posicionar correctamente en buscadores.

Optimización básica de imágenes que sigue funcionando hoy

Aunque hoy hablamos mucho de formatos modernos, rendimiento y Core Web Vitals, hay señales básicas que siguen aportando contexto sobre una imagen:

1. Nombre del archivo

El nombre del archivo sigue siendo una señal semántica directa sobre el contenido de la imagen. Un nombre descriptivo ayuda a interpretar qué contiene incluso antes de analizar otros elementos de la página.

Buenas prácticas básicas:

• utilizar nombres descriptivos
• separar palabras con guiones
• evitar espacios y caracteres especiales
• evitar nombres genéricos como IMG_1234.jpg

Ejemplo:

incorrecto:
IMG_4587.jpg

correcto:
peso-dimensiones-imagen.jpg

No es un factor determinante por sí solo, pero suma contexto y coherencia semántica.

2. Atributo ALT

El atributo alt dentro de la etiqueta <img> sigue siendo uno de los elementos más relevantes en la optimización de imágenes.

Ejemplo:

<img src="peso-dimensiones-imagen.webp"
alt="comparación entre peso y dimensiones de una imagen">

El texto ALT cumple dos funciones principales:

• aportar contexto semántico a los buscadores
• mejorar la accesibilidad para usuarios con lectores de pantalla

Un buen ALT debe:

• describir el contenido real de la imagen
• ser natural y comprensible
• evitar relleno innecesario de palabras clave

No se trata de repetir keywords (keyword stuffing) , sino de describir lo que realmente aparece en la imagen.

Cuando una imagen aporta información relevante dentro del contenido, su atributo ALT debe reflejar ese valor, en cambio, cuando una imagen es decorativa y no aporta contenido real, puede utilizarse un atributo ALT vacío.

Ejemplo:

<img src="decoracion-linea.svg" alt="">

Esto evita generar ruido semántico innecesario.

3. Contexto semántico y leyenda

Una imagen no se interpreta de forma aislada.

El buscador también analiza el contexto que la rodea:

• el título principal de la página
• los encabezados cercanos
• el texto que acompaña a la imagen
• el propio atributo ALT

Cuando el nombre del archivo, el alt y el texto que rodea la imagen van en la misma línea, Google entiende mejor de qué trata esa imagen.

Y si además la imagen aporta información de verdad, añadir una frase breve o una pequeña leyenda debajo puede ayudar todavía más a reforzar ese contexto.

No hace falta hacerlo siempre, pero sí merece la pena cuando la imagen realmente está aportando algo útil.

El tamaño real de la imagen (no lo que ocupa) importa más que su peso

Uno de los errores más habituales al trabajar con imágenes es confundir peso y dimensiones, ya que son dos conceptos distintos y ambos afectan directamente al rendimiento del sitio.

• dimensiones: tamaño visual de la imagen en píxeles
• peso: tamaño del archivo en kilobytes o megabytes

En la práctica, el problema más frecuente no es solo el peso del archivo, sino utilizar imágenes con dimensiones mucho mayores de las necesarias.

Servir imágenes más grandes de lo necesario ralentiza la carga

Si un contenedor tiene un ancho máximo de 600px, no tiene sentido subir una imagen de 4000px.

Ejemplo típico:

imagen subida: 4000px ancho
imagen mostrada: 600px ancho

En este caso:

• el navegador descarga una imagen mucho más grande de lo necesario
• después la reduce visualmente
• se consumen más recursos sin aportar valor real

Redimensionar antes de subir siempre es mejor que escalar después

La forma correcta de trabajar con imágenes consiste en adaptar su tamaño antes de subirlas.

Pasos recomendados:

• medir el ancho real del contenedor donde se mostrará la imagen
• redimensionar la imagen a ese ancho máximo
• exportarla en calidad optimizada para web

Por ejemplo:

contenedor: 800px
imagen exportada: 800px
no: 4000px

Esto evita transferencias innecesarias y reduce el tiempo de descarga.

Utilizar imágenes responsive cuando existan múltiples tamaños

En muchos sitios web, la misma imagen se muestra en distintos tamaños según el dispositivo, en estos casos, lo correcto es servir versiones distintas según el ancho disponible.

Ejemplo:

<img src="imagen-800.webp"
srcset="imagen-400.webp 400w,
imagen-800.webp 800w,
imagen-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1024px) 800px,
1200px"
alt="ejemplo de imagen responsive">

Esto permite que el navegador descargue solo la versión necesaria para cada uno de los dispositivos.

Formatos modernos: cómo trabajar con WebP y AVIF

Elegir correctamente el formato de una imagen influye directamente en su peso final y en el rendimiento de la página.

Durante muchos años, los formatos más utilizados fueron JPG y PNG. Hoy siguen existiendo, pero ya no deberían ser la única referencia.

A día de hoy, los formatos modernos que conviene tener en cuenta son:

• WebP
• AVIF

1. WebP: el formato práctico por defecto

WebP es, hoy por hoy, la opción más práctica para la mayoría de sitios web.

Permite reducir el peso de muchas imágenes frente a JPG o PNG manteniendo una calidad visual similar y, además, soporta transparencia.

En la práctica, si trabajas con WordPress o con cualquier flujo de optimización moderno, WebP debería ser el formato por defecto para la mayoría de imágenes fotográficas y muchas imágenes de contenido.

2. ¿Por qué a veces un WebP puede pesar igual o más que un JPG?

Sí, puede pasar.

Convertir una imagen a WebP no garantiza automáticamente que vaya a pesar menos.

Esto suele ocurrir cuando:

• la imagen original ya estaba muy comprimida
• la exportación a WebP se hace con una calidad demasiado alta
• la imagen de origen no era buena candidata para ese formato

El formato ayuda, pero no hace magia.

Si partes de una imagen mal preparada o exportas sin criterio, el resultado puede ser igual de pesado o incluso peor.

3. ¿Google indexa WebP y AVIF sin problema?

Sí.

Desde el punto de vista SEO, Google puede indexar imágenes en WebP y AVIF igual que otros formatos soportados.

Por tanto, utilizar formatos modernos no supone un problema para Google Images ni para la indexación normal de imágenes.

4. Cómo trabajar con WebP y AVIF en WordPress

En WordPress, WebP ya forma parte de un flujo bastante normal.

AVIF también puede utilizarse, pero depende más del entorno, la versión y el soporte disponible en el servidor o en la herramienta que genera las imágenes.

A nivel práctico:

• WebP es la opción estable y fácil de integrar
• AVIF puede ser una capa extra de optimización si tu entorno lo soporta bien

Si trabajas en WordPress, lo importante no es solo poder subir el formato, sino comprobar que:

• se genera correctamente
• se sirve bien en frontend
• no rompe el flujo de miniaturas o regeneración

5. Cuándo seguir utilizando PNG

PNG sigue teniendo sentido en ciertos casos.

Por ejemplo:

• cuando necesitas transparencia
• cuando trabajas con gráficos simples
• cuando la imagen contiene texto o elementos muy definidos

No se trata de eliminar PNG por completo, sino de utilizarlo solo cuando realmente aporte valor.

6. JPG sigue siendo válido, pero ya no debería ser el final del proceso

El formato JPG sigue siendo habitual, especialmente en fotografía. Lo lógico es que una imagen JPG forme parte del origen de trabajo, no necesariamente del formato final servido al usuario.

Si el sitio sigue sirviendo JPG sin generar versiones WebP o AVIF cuando corresponde, lo normal es que el flujo de optimización esté desactualizado.

Buenas prácticas extra que siguen marcando diferencia

1. Lazy loading, pero no en imágenes críticas

El lazy loading permite retrasar la carga de imágenes que no son visibles en el momento inicial.

Ejemplo:

<img src="imagen-secundaria.webp"
loading="lazy"
alt="imagen secundaria">

Aplicado con criterio, mejora el rendimiento inicial de la página.

Pero no debe utilizarse en imágenes críticas como:

• la imagen principal del contenido
• la imagen destacada
• la primera imagen visible en el primer render

Si haces lazy loading sobre esas imágenes, puedes empeorar el LCP en lugar de mejorarlo.

2. Definir width y height para evitar CLS

Cuando una imagen no reserva espacio antes de cargarse, el contenido puede desplazarse al aparecer, esto afectará directamente a la estabilidad visual de la página y a la métrica CLS.

Ejemplo:

<img src="imagen.webp"
width="800"
height="600"
alt="ejemplo de imagen con dimensiones definidas">

Definir width y height no reduce el peso de la imagen, pero sí mejora cómo se renderiza la página y evita movimientos innecesarios.

3. Comprobar que las imágenes se descubren e indexan correctamente

Si trabajas con muchas imágenes, conviene comprobar que se están descubriendo correctamente dentro del sitemap generado por tu CMS o plugin SEO.

También ayuda que la imagen aporte contexto semántico, y esté integrada de manera clara dentro de la página, y no como simple relleno decorativo.

Cómo detectar imágenes problemáticas en un sitio real

Optimizar imágenes no consiste en aplicar reglas teóricas sin revisar el estado real del sitio.

Antes de tomar decisiones, lo primero es identificar qué imágenes están generando problemas.

Para ello, hay varias herramientas especialmente útiles:

• Lighthouse / PageSpeed Insights: detectan imágenes mal dimensionadas, formatos mejorables y recursos que deberían cargarse de forma diferida.
• DevTools: permite ver rápidamente qué imágenes pesan más y qué recursos están tardando más en descargarse.
• Screaming Frog: muy útil para detectar imágenes pesadas, sin ALT o sobredimensionadas de forma masiva.

Lo importante aquí no es optimizar a ciegas, sino localizar primero qué imágenes están generando el mayor impacto negativo y actuar sobre ellas con criterio.