Formato, peso, alt text, lazy loading y datos estructurados: todo lo que necesitas para que tus imágenes impulsen el SEO en lugar de frenarlo.
Resumen: Las imágenes mal optimizadas son el lastre oculto de muchas webs: ralentizan la carga, generan saltos de layout y desperdician crawl budget. Con el formato correcto, alt text bien redactado, lazy loading y atributos de dimensiones, tus imágenes dejan de frenar el ascenso y empiezan a impulsarlo.
Solicitar auditoría SEO gratuita → Ver servicios SEO →
Las imágenes son el recurso más pesado de la mayoría de páginas web. Según el informe anual de HTTP Archive, representan de media más del 50 % del peso total de una página. Ese peso tiene consecuencias directas en tres métricas que Google mide con lupa:
En una auditoría reciente de escala14.com obtuvimos un score de 94/A, pero detectamos patrones comunes que se repiten en casi todos los proyectos que auditamos: 25 imágenes below-fold sin lazy loading, 12 sin atributos de dimensiones y un PNG sin migrar a formato moderno. Cada uno de esos puntos es una oportunidad de mejora concreta, no un dato abstracto.
El formato es la primera decisión y la que más impacto tiene en el peso final del archivo.
| Formato | Soporte navegadores | Compresión | Cuándo usarlo |
|---|---|---|---|
| WebP | +95 % (Chrome, Firefox, Safari, Edge) | Muy buena | Imágenes fotográficas y gráficos en general |
| AVIF | +85 % (Chrome, Firefox, Edge; Safari desde 16.4) | Excelente | Máxima compresión; ofrece como alternativa a WebP |
| SVG | 100 % | N/A (vectorial) | Iconos, logos, ilustraciones vectoriales |
| PNG | 100 % | Media | Solo cuando necesites transparencia y SVG no sea opción |
| JPG | 100 % | Buena | Fallback para compatibilidad; evitar en proyectos nuevos |
Recomendación práctica: usa WebP como formato principal y AVIF donde el navegador lo soporte (con <picture> y srcset). El PNG y el JPG deberían quedar solo como fallback en casos específicos. Un PNG sin migrar en una web con 96 % de adopción WebP es un paso fácil de cerrar.
<picture>
<source srcset="imagen.avif" type="image/avif">
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" alt="Descripción de la imagen" width="800" height="600">
</picture>Una imagen en WebP bien comprimida puede pesar un 30–50 % menos que su equivalente en JPG sin pérdida de calidad apreciable. Los objetivos de peso recomendados:
Herramientas para comprimir:
En Astro, el componente <Image> del paquete astro:assets genera automáticamente WebP optimizado y añade los atributos width y height. Aprovéchalo al máximo en lugar de usar etiquetas <img> crudas.
El alt text tiene dos funciones: accesibilidad (lectores de pantalla) y SEO (Google lo usa para entender el contenido de la imagen y puede posicionarla en Google Imágenes).
| Error | Por qué perjudica |
|---|---|
Alt vacío (alt="") | Invisibilidad para Google Imágenes y lectores de pantalla |
| Alt genérico (“imagen1”, “foto”) | Sin valor semántico para buscadores |
| Alt de baja calidad (descripción mínima sin contexto) | Posicionamiento débil en imagen search |
| Alt relleno de keywords | Penalización por keyword stuffing |
| Imágenes decorativas con alt descriptivo | Ruido para lectores de pantalla |
Nota: las imágenes puramente decorativas deben llevar
alt=""(vacío, no ausente), para que los lectores de pantalla las ignoren correctamente.
Cuando el navegador carga una página, reserva el espacio de cada elemento antes de que sus recursos lleguen. Si una imagen no declara sus dimensiones, el navegador no sabe cuánto espacio reservar: primero muestra la página sin la imagen y luego la recoloca cuando llega, provocando el temido layout shift.
Añadir width y height en la etiqueta <img> le indica al navegador el ratio de aspecto de la imagen antes de cargarla:
<!-- Mal: sin dimensiones -->
<img src="grafica-trafico.webp" alt="Evolución del tráfico orgánico">
<!-- Bien: con dimensiones -->
<img src="grafica-trafico.webp" alt="Evolución del tráfico orgánico" width="1200" height="630">Los valores no tienen que coincidir con el tamaño de visualización real (CSS se encarga de eso): lo importante es que el ratio de aspecto sea correcto para que el navegador pueda calcular el espacio reservado.
En nuestras auditorías es uno de los problemas más frecuentes: imágenes responsive controladas por CSS pero sin width y height declarados, lo que genera CLS incluso en webs bien optimizadas en otros aspectos.
El lazy loading difiere la carga de imágenes que están fuera del viewport hasta que el usuario se acerca a ellas al hacer scroll. El resultado es una página que carga más rápido en la primera visita, con menos datos transferidos y mejor LCP.
<!-- Above the fold: NO usar lazy loading -->
<img src="hero.webp" alt="Descripción" width="1440" height="600">
<!-- Below the fold: SÍ usar lazy loading -->
<img src="seccion-servicios.webp" alt="Descripción" width="800" height="450" loading="lazy">Regla clave: la imagen hero o cualquier imagen visible sin hacer scroll (above the fold) no debe llevar loading="lazy". Hacerlo retrasa la imagen más importante de la página y penaliza el LCP. Todo lo demás, sí.
El atributo loading="lazy" es nativo en todos los navegadores modernos: no necesitas JavaScript ni librerías externas para implementarlo.
Google lee los nombres de archivo como señal de relevancia. Un nombre descriptivo ayuda al posicionamiento en Google Imágenes y refuerza el contexto semántico de la página.
Convenciones:
optimizar-imagenes-seo.webp), nunca guiones bajos ni espacios.| Incorrecto | Correcto |
|---|---|
IMG_20240315_093245.jpg | grafica-trafico-organico-2024.webp |
imagen1.png | captura-search-console-enero.webp |
foto_empresa_Almeria.JPG | equipo-escala14-almeria.webp |
HERO-FINAL-v3.jpg | hero-agencia-seo-almeria.webp |
Una sola imagen servida al mismo tamaño en móvil y escritorio desperdicia ancho de banda en dispositivos pequeños. Con srcset y sizes le das al navegador varias versiones de la imagen para que elija la más adecuada según el tamaño del viewport:
<img
src="foto-equipo-800.webp"
srcset="
foto-equipo-400.webp 400w,
foto-equipo-800.webp 800w,
foto-equipo-1200.webp 1200w
"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
alt="Equipo de Escala14 en Almería"
width="800"
height="533"
loading="lazy"
>El componente <Image> de Astro genera el srcset automáticamente. Si usas imágenes en componentes de terceros o en Markdown, asegúrate de pasar por el pipeline de optimización en lugar de referenciar la ruta directamente.
Los datos estructurados en formato JSON-LD permiten que Google entienda mejor el contenido de tus imágenes y las muestre como rich results en búsqueda y en Google Imágenes. El tipo más relevante es ImageObject.
Si el artículo ya tiene marcado Article o BlogPosting, incluye la imagen en la propiedad image:
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Cómo optimizar imágenes para SEO",
"image": {
"@type": "ImageObject",
"url": "https://escala14.com/assets/images/articles/optimizar-imagenes-seo.webp",
"width": 1200,
"height": 630
},
"author": {
"@type": "Organization",
"name": "Escala14"
}
}Usa ImageObject independiente o dentro de Product / CreativeWork para que Google entienda que la imagen representa ese contenido específico.
Para implementar datos estructurados de forma sistemática en tu web, consulta nuestra guía sobre schema markup.
| Categoría | Herramienta | Uso |
|---|---|---|
| Compresión | Squoosh | Compresión visual individual en navegador |
| Compresión batch | Sharp, ImageMagick | Scripts automatizados, pipelines de build |
| CDN de imágenes | Cloudflare Images, Cloudinary | Transformaciones on-the-fly y entrega optimizada |
| Auditoría | PageSpeed Insights | Score de Core Web Vitals y recomendaciones concretas |
| Auditoría | Lighthouse (DevTools) | Análisis detallado de rendimiento e imágenes |
| Auditoría SEO | SEOmator | Análisis de 251 reglas incluyendo imágenes sin alt, sin dimensiones y sin lazy loading |
| Inspección | Chrome DevTools > Network | Ver tamaño real de cada imagen cargada |
| Formato | cwebp, avifenc | Conversión por línea de comandos a WebP/AVIF |
<img> tienen atributo alt con descripción relevante (no vacío salvo en decorativas).alt="" para excluirlas de lectores de pantalla.<img> tienen atributos width y height con el ratio de aspecto correcto.loading="lazy".loading="lazy".nombre-descriptivo.webp).srcset con al menos 2–3 tamaños.sizes refleja el tamaño de visualización real en distintos viewports.ImageObject en los datos estructurados.¿WebP o AVIF: cuál uso primero? WebP tiene soporte en más del 95 % de los navegadores y es la opción segura. AVIF ofrece mejor compresión pero su soporte en Safari es más reciente. La solución óptima es ofrecer ambos con <picture>: AVIF primero, WebP como fallback, JPG como último recurso.
¿Debo añadir loading="lazy" a todas las imágenes? No. Las imágenes visibles sin hacer scroll (above the fold) deben cargarse inmediatamente. Aplicar lazy loading a la imagen hero es uno de los errores que más perjudica el LCP. Aplícalo solo a imágenes que requieren scroll para verse.
¿El alt text afecta directamente al posicionamiento en resultados generales? El alt text influye directamente en Google Imágenes y aporta contexto semántico a la página, lo que puede ayudar al posicionamiento general. No es un factor determinante por sí solo, pero en combinación con un buen contenido y estructura, suma.
¿Qué pasa si ya tengo cientos de imágenes sin optimizar en mi web? Prioriza las páginas con más tráfico o las que tienen peor puntuación en Core Web Vitals. Un script con Sharp puede procesar en batch todos los archivos de una carpeta. Las ganancias en LCP y CLS suelen ser inmediatas y medibles en Search Console.
¿Es suficiente con que Astro (o mi CMS) optimice las imágenes automáticamente? Las herramientas automáticas hacen gran parte del trabajo (formato, dimensiones, srcset), pero no redactan el alt text ni definen los datos estructurados. La parte técnica se puede automatizar; la semántica requiere criterio humano.
¿Con qué frecuencia debo revisar la optimización de imágenes? Auditalo cuando publiques contenido nuevo y con cada actualización de diseño. PageSpeed Insights y Lighthouse te dan una fotografía del estado actual en cualquier momento. Una buena práctica es incluirlo en el checklist de publicación de cada nuevo artículo o página.
Cada imagen mal optimizada es peso extra en la mochila que ralentiza el ascenso. Con formato moderno, compresión ajustada, alt text relevante, dimensiones declaradas y lazy loading en su sitio, tus imágenes pasan de ser un lastre a ser un activo de posicionamiento.
Si quieres saber exactamente qué imágenes están penalizando tu web ahora mismo, una auditoría SEO te lo muestra en minutos.
Solicitar auditoría SEO gratuita → Ver servicios SEO → Estudio SEO antes de diseñar tu web →
Al encargar una web nueva todos miran el diseño y nadie pregunta por la velocidad. Y es una decisión de cimientos: arreglarla después suele costar rehacerla. Esto es lo que debes exigir desde el primer día.
Una web lenta no solo frustra a tus visitantes: Google la penaliza y la baja en resultados. Descubre cómo medirlo tú mismo en 2 minutos y qué hacer si suspende el test.
Una redirección mal configurada puede costar posiciones, link equity y rastreabilidad. Audita las 8 reglas de redirects SEO: bucles, tipos 301/302, meta refresh, JavaScript redirects y más.
/ Volver al campamento
Más de 20 artículos publicados sobre SEO, diseño web y marketing digital, con datos reales y reglas auditables.