Documentación de UXR SEO Analyzer

Guía detallada

Optimización de Imágenes

6 min de lectura
Ver contenido

Introducción

Las imágenes son frecuentemente los recursos más pesados en una página web, representando del 40-60% del peso total en la mayoría de los sitios. Las imágenes no optimizadas impactan directamente los Core Web Vitals—particularmente LCP (Largest Contentful Paint), que mide qué tan rápido carga tu elemento de contenido más grande.

Entender la optimización de imágenes es esencial no solo para el rendimiento sino también para el SEO, ya que Google usa la velocidad de página como factor de posicionamiento y la búsqueda de imágenes puede generar tráfico orgánico significativo.

Por Qué Importa la Optimización de Imágenes

Cuando un navegador carga una página web, las imágenes compiten con otros recursos por el ancho de banda. Las imágenes grandes y no optimizadas causan varios problemas:

Impacto de las Imágenes en la Carga de Página:
┌─────────────────────────────────────────────────────────────┐
│ Imágenes No Optimizadas                                     │
│ ├── LCP más lento (la imagen más grande tarda más)         │
│ ├── Mayor uso de ancho de banda (costos en móvil)          │
│ ├── Mayor Time to Interactive (recursos compitiendo)        │
│ └── Mala experiencia de usuario (en conexiones lentas)     │
│                                                             │
│ Imágenes Optimizadas                                        │
│ ├── LCP más rápido (archivos más pequeños)                 │
│ ├── Mejores puntuaciones de Core Web Vitals                │
│ ├── Mejor experiencia móvil                                 │
│ └── Menores costos de servidor (menos ancho de banda)      │
└─────────────────────────────────────────────────────────────┘

Impacto en Core Web Vitals

Métrica Cómo la Afectan las Imágenes
LCP Las imágenes hero son frecuentemente el elemento LCP—imágenes grandes retrasan el LCP
CLS Imágenes sin dimensiones causan cambios de layout cuando cargan
INP Imágenes grandes pueden bloquear el hilo principal durante la decodificación

Conceptos Clave de Optimización de Imágenes

1. Formatos Modernos de Imagen

No todos los formatos de imagen son iguales. Los formatos modernos ofrecen significativamente mejor compresión:

Formato Mejor Para Compresión Soporte de Navegadores
WebP Fotos, gráficos 25-35% menor que JPEG 97%+ navegadores
AVIF Fotos, HDR 50% menor que JPEG 85%+ navegadores
JPEG Fotos (fallback) Buena, pero anticuada Universal
PNG Transparencia, gráficos Sin pérdida, archivos grandes Universal
SVG Iconos, logos, ilustraciones Escalable, archivos pequeños Universal

2. Imágenes Responsivas

Diferentes dispositivos necesitan diferentes tamaños de imagen. Una imagen hero de 2000px es un desperdicio en una pantalla móvil de 375px:

<!-- Imágenes responsivas con srcset -->
<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="Texto alt descriptivo"
>

El navegador selecciona automáticamente el tamaño de imagen apropiado basándose en el ancho de pantalla y la densidad de píxeles del dispositivo.

3. Lazy Loading

Las imágenes debajo del fold no necesitan cargarse inmediatamente. El lazy loading nativo difiere su carga hasta que el usuario se desplaza cerca de ellas:

<!-- Lazy loading nativo -->
<img src="imagen.jpg" loading="lazy" alt="Descripción">

<!-- Las imágenes críticas NO deben usar lazy loading -->
<img src="hero.jpg" alt="Imagen hero" fetchpriority="high">

4. Dimensiones Correctas de Imagen

Siempre especifica width y height para prevenir Cumulative Layout Shift (CLS):

<!-- ✅ Bien: Dimensiones especificadas -->
<img src="foto.jpg" width="800" height="600" alt="Foto">

<!-- ❌ Mal: Sin dimensiones (causa CLS) -->
<img src="foto.jpg" alt="Foto">

Fundamentos de SEO de Imágenes

Las imágenes optimizadas también mejoran tu visibilidad en búsqueda de imágenes:

Nombres de Archivo

❌ Mal:  IMG_20231015_143022.jpg
❌ Mal:  imagen1.jpg

✅ Bien: zapatillas-running-azules-vista-lateral.jpg
✅ Bien: sesion-entrevista-ux-research.jpg

Texto Alternativo (Alt Text)

El texto alt sirve dos propósitos: accesibilidad y SEO.

<!-- ❌ Mal: Vacío o lleno de palabras clave -->
<img src="zapatos.jpg" alt="">
<img src="zapatos.jpg" alt="zapatos comprar zapatos zapatos baratos zapatillas">

<!-- ✅ Bien: Descriptivo y natural -->
<img src="zapatos.jpg" alt="Zapatillas Nike running azules con suela blanca">

Sitemaps de Imágenes

Para imágenes importantes, inclúyelas en tu sitemap o crea un sitemap dedicado de imágenes:

<url>
  <loc>https://ejemplo.com/pagina</loc>
  <image:image>
    <image:loc>https://ejemplo.com/imagenes/foto.jpg</image:loc>
    <image:caption>Descripción de la imagen</image:caption>
  </image:image>
</url>

Problemas Comunes con Imágenes

Problema 1: Imágenes Sobredimensionadas

Problema: Subir una imagen de 4000x3000px cuando se muestra a 800x600px.

Solución: Redimensiona las imágenes a su tamaño máximo de visualización (o usa imágenes responsivas).

Problema 2: Formato Incorrecto

Problema: Usar PNG para fotografías (archivos enormes).

Solución: Usa WebP o AVIF para fotos, PNG solo para transparencia, SVG para iconos.

Problema 3: Sin Compresión

Problema: Subir imágenes directamente desde la cámara.

Solución: Comprime imágenes con herramientas como Squoosh, ImageOptim o Sharp.

Problema 4: Sin Lazy Loading

Problema: Todas las imágenes cargan inmediatamente, bloqueando recursos críticos.

Solución: Añade loading="lazy" a las imágenes debajo del fold.

Midiendo el Rendimiento de Imágenes

Usando Lighthouse

  1. Abre Chrome DevTools (F12)
  2. Ve a la pestaña Lighthouse
  3. Ejecuta una auditoría de Performance
  4. Busca recomendaciones relacionadas con imágenes:
    • “Properly size images”
    • “Serve images in next-gen formats”
    • “Efficiently encode images”
    • “Defer offscreen images”

Usando el Panel Network

  1. Abre DevTools → pestaña Network
  2. Filtra por “Img”
  3. Revisa tamaños de archivo y tiempos de carga
  4. Busca imágenes mayores a 100KB

Implementación

Estrategia 1: Elegir el Formato de Imagen Correcto

Comparación de Formatos Modernos

Árbol de Decisión para Selección de Formato:
┌─────────────────────────────────────────────────────────────┐
│ ¿Es una fotografía o imagen compleja?                       │
│ ├── SÍ                                                      │
│ │   └── Usa AVIF (primario) → WebP (fallback) → JPEG       │
│ │                                                           │
│ └── NO (icono, logo, ilustración)                          │
│     ├── ¿Necesita animación?                               │
│     │   ├── SÍ → Usa WebP animado o video                  │
│     │   └── NO                                             │
│     │       ├── ¿Es arte vectorial escalable?              │
│     │       │   ├── SÍ → Usa SVG                           │
│     │       │   └── NO → Usa PNG o WebP                    │
│     └── ¿Necesita transparencia?                           │
│         ├── SÍ → Usa WebP o PNG                            │
│         └── NO → Usa WebP o JPEG                           │
└─────────────────────────────────────────────────────────────┘

Implementando Progressive Enhancement con Picture

<picture>
  <!-- AVIF: Mejor compresión, soporte creciente -->
  <source
    srcset="imagen.avif"
    type="image/avif"
  >
  <!-- WebP: Buena compresión, excelente soporte -->
  <source
    srcset="imagen.webp"
    type="image/webp"
  >
  <!-- JPEG: Fallback universal -->
  <img
    src="imagen.jpg"
    alt="Texto alt descriptivo"
    width="800"
    height="600"
    loading="lazy"
  >
</picture>

Comparación de Compresión por Formato

Formato Foto (1000x800) Compresión Calidad
JPEG Original 450 KB - 100%
JPEG Optimizado (q85) 180 KB 60% menor 95%
WebP (q85) 120 KB 73% menor 95%
AVIF (q80) 75 KB 83% menor 95%

Estrategia 2: Implementar Imágenes Responsivas

Usando srcset y sizes

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-600.jpg 600w,
    hero-800.jpg 800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="
    (max-width: 400px) 100vw,
    (max-width: 800px) 100vw,
    (max-width: 1200px) 80vw,
    1200px
  "
  alt="Descripción de imagen hero"
  width="1600"
  height="900"
>

Entendiendo el Atributo sizes

Ejemplos de Cálculo de sizes:
┌─────────────────────────────────────────────────────────────┐
│ sizes="(max-width: 600px) 100vw, 50vw"                      │
│                                                             │
│ En viewport de 400px:                                       │
│ → Ancho de imagen = 100vw = 400px                           │
│ → El navegador selecciona imagen de 400w                    │
│                                                             │
│ En viewport de 1200px:                                      │
│ → Ancho de imagen = 50vw = 600px                            │
│ → El navegador selecciona imagen 600w o 800w (según DPR)    │
│                                                             │
│ En viewport 1200px con DPR 2x (Retina):                     │
│ → Ancho de imagen = 50vw = 600px × 2 = 1200px efectivo      │
│ → El navegador selecciona imagen de 1200w                   │
└─────────────────────────────────────────────────────────────┘

Dirección de Arte con Elemento Picture

Usa <picture> cuando necesites diferentes recortes para diferentes tamaños de pantalla:

<picture>
  <!-- Móvil: Recorte cuadrado, centrado en el sujeto -->
  <source
    media="(max-width: 600px)"
    srcset="producto-movil.webp"
    type="image/webp"
  >
  <source
    media="(max-width: 600px)"
    srcset="producto-movil.jpg"
  >

  <!-- Escritorio: Recorte panorámico ancho -->
  <source
    srcset="producto-escritorio.webp"
    type="image/webp"
  >
  <img
    src="producto-escritorio.jpg"
    alt="Nombre del producto - vista detallada"
    width="1200"
    height="600"
  >
</picture>

Estrategia 3: Optimizar Prioridad de Carga

Fetchpriority para Imágenes Críticas

<!-- Imagen LCP: Cargar con máxima prioridad -->
<img
  src="hero.webp"
  alt="Imagen hero"
  fetchpriority="high"
  decoding="async"
  width="1200"
  height="600"
>

<!-- Imágenes debajo del fold: Menor prioridad, lazy load -->
<img
  src="galeria-1.webp"
  alt="Imagen de galería 1"
  loading="lazy"
  decoding="async"
  width="400"
  height="300"
>

Precarga de Imágenes Críticas

<head>
  <!-- Precargar imagen LCP con hints de formato -->
  <link
    rel="preload"
    as="image"
    href="hero.webp"
    type="image/webp"
    fetchpriority="high"
  >

  <!-- Precargar imagen responsiva -->
  <link
    rel="preload"
    as="image"
    href="hero-1200.webp"
    imagesrcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    imagesizes="(max-width: 600px) 100vw, 1200px"
  >
</head>

Mejores Prácticas de Lazy Loading

<!-- ❌ Incorrecto: Lazy loading en imágenes LCP/above-fold -->
<img src="hero.jpg" loading="lazy" alt="Hero">

<!-- ✅ Correcto: Solo lazy load en imágenes debajo del fold -->
<img src="hero.jpg" fetchpriority="high" alt="Hero">

<section class="debajo-del-fold">
  <img src="producto-1.jpg" loading="lazy" alt="Producto 1">
  <img src="producto-2.jpg" loading="lazy" alt="Producto 2">
</section>

Estrategia 4: Compresión y Calidad

Comparación de Herramientas de Compresión

Herramienta Tipo Mejor Para Control de Calidad
Squoosh App web Optimización manual, pruebas Comparación visual
Sharp Node.js Pipelines de build, automatización Calidad numérica
ImageOptim Escritorio (Mac) Optimización por lotes Automático
svgo CLI Optimización de SVG Reducción de tamaño

Integración en Pipeline de Build

// Ejemplo de Sharp para Node.js build
const sharp = require('sharp');

async function optimizeImage(inputPath, outputPath) {
  await sharp(inputPath)
    // Redimensionar a dimensiones máximas
    .resize(1600, 900, {
      fit: 'inside',
      withoutEnlargement: true
    })
    // Salida como WebP
    .webp({
      quality: 85,
      effort: 6
    })
    .toFile(outputPath.replace(/\.\w+$/, '.webp'));

  // También crear versión AVIF
  await sharp(inputPath)
    .resize(1600, 900, {
      fit: 'inside',
      withoutEnlargement: true
    })
    .avif({
      quality: 80,
      effort: 6
    })
    .toFile(outputPath.replace(/\.\w+$/, '.avif'));
}

Guías de Calidad

Configuraciones de Calidad por Caso de Uso:
┌─────────────────────────────────────────────────────────────┐
│ Caso de Uso           │ JPEG/WebP │ AVIF  │ Notas           │
│───────────────────────│───────────│───────│─────────────────│
│ Imágenes hero         │ 85-90     │ 80-85 │ Alta calidad    │
│ Fotos de productos    │ 85        │ 80    │ Detalle importa │
│ Miniaturas de blog    │ 75-80     │ 70-75 │ Puede ser menor │
│ Patrones de fondo     │ 60-70     │ 55-65 │ Menor prioridad │
│ Iconos/logos (WebP)   │ 90-100    │ -     │ Mantener nítido │
└─────────────────────────────────────────────────────────────┘

Estrategia 5: Prevenir Layout Shift

Siempre Incluir Dimensiones

<!-- ✅ Correcto: Dimensiones explícitas -->
<img
  src="producto.jpg"
  width="400"
  height="300"
  alt="Producto"
>

<!-- ✅ También correcto: aspect-ratio en CSS -->
<style>
  .imagen-producto {
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
  }
</style>
<img src="producto.jpg" class="imagen-producto" alt="Producto">

Dimensionamiento Basado en Contenedor

<div class="contenedor-imagen">
  <img
    src="imagen.jpg"
    alt="Descripción"
    loading="lazy"
  >
</div>

<style>
.contenedor-imagen {
  position: relative;
  padding-bottom: 56.25%; /* aspect ratio 16:9 */
  height: 0;
  overflow: hidden;
}

.contenedor-imagen img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

Estrategia 6: CDN de Imágenes y Servicios de Optimización

Beneficios de CDN de Imágenes

  1. Conversión automática de formato - Servir WebP/AVIF según soporte del navegador
  2. Redimensionamiento al vuelo - Generar tamaños responsivos dinámicamente
  3. Caché en edge global - Entrega más rápida mundialmente
  4. Transformaciones basadas en URL - Sin paso de build requerido

Ejemplo: Transformaciones URL de Cloudinary

<!-- Original -->
<img src="https://res.cloudinary.com/demo/image/upload/sample.jpg">

<!-- Optimizado: Formato, calidad y tamaño automáticos -->
<img src="https://res.cloudinary.com/demo/image/upload/
  f_auto,
  q_auto,
  w_800,
  c_limit
  /sample.jpg">

<!-- Responsivo con srcset -->
<img
  src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/sample.jpg"
  srcset="
    https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_400/sample.jpg 400w,
    https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/sample.jpg 800w,
    https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_1200/sample.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Imagen de muestra"
>

Estrategia 7: Optimización de SVG

Configuración de SVGO

// svgo.config.js
module.exports = {
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergeStyles',
    'inlineStyles',
    'minifyStyles',
    'cleanupIds',
    'removeUselessDefs',
    'removeUselessStrokeAndFill',
    'removeHiddenElems',
    'removeEmptyText',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'convertPathData',
    'mergePaths',
    {
      name: 'removeViewBox',
      active: false  // Mantener viewBox para escalado responsivo
    }
  ]
};

Mejores Prácticas para SVG Inline

<!-- Para iconos usados múltiples veces: usar sprite -->
<svg style="display: none;">
  <symbol id="icon-buscar" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="icon-menu" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

<!-- Uso -->
<svg aria-label="Buscar"><use href="#icon-buscar"/></svg>
<svg aria-label="Menú"><use href="#icon-menu"/></svg>

Midiendo Mejoras

Comparación Antes/Después

ANTES de Optimización:
├── Peso total de imágenes: 2.8 MB
├── LCP: 4.2s
├── Número de imágenes: 15
├── Puntuación Lighthouse Imágenes: 45
└── CLS (relacionado a imágenes): 0.15

DESPUÉS de Optimización:
├── Peso total de imágenes: 450 KB (↓84%)
├── LCP: 1.8s (↓57%)
├── Número de imágenes: 15 (igual)
├── Puntuación Lighthouse Imágenes: 100
└── CLS (relacionado a imágenes): 0 (↓100%)

Auditorías de Lighthouse a Revisar

  • “Properly size images” - Sirviendo dimensiones correctas
  • “Serve images in next-gen formats” - Uso de WebP/AVIF
  • “Efficiently encode images” - Compresión aplicada
  • “Defer offscreen images” - Lazy loading implementado
  • “Image elements have explicit width and height” - Prevención de CLS

Checklist de Optimización

Antes de desplegar, verifica:

  • [ ] Imágenes hero/LCP usan fetchpriority="high"
  • [ ] Imágenes debajo del fold usan loading="lazy"
  • [ ] Todas las imágenes tienen atributos width y height
  • [ ] Versiones WebP (o AVIF) disponibles con fallbacks
  • [ ] srcset implementado para imágenes responsivas
  • [ ] Atributo sizes refleja correctamente el layout
  • [ ] Imágenes comprimidas a calidad apropiada
  • [ ] SVGs optimizados con SVGO
  • [ ] Texto alt es descriptivo y único
  • [ ] Nombres de archivo son descriptivos y amigables para SEO

Artículos Relacionados

Aprende más sobre optimizar las imágenes de tu sitio:

📚 Volver al Hub de Performance SEO - Explora todos los temas de rendimiento

Referencias

  1. MDN Web Docs - Responsive Images
  2. Ahrefs - Image SEO: 12 Actionable Tips
  3. web.dev - Optimize Images
  4. Chrome Developers - Efficiently Encode Images

Pruébalo Tú Mismo

¿Quieres revisar la optimización de imágenes de tu sitio?

🔧 Descarga UXR SEO Analyzer (Gratis, análisis 100% local)

Disclaimer: Los analizadores en esta extensión son guías de referencia basadas en documentación oficial de MDN, web.dev y mejores prácticas de la industria. No representan verdades absolutas sobre cómo los motores de búsqueda evalúan tu contenido—solo los motores de búsqueda conocen sus algoritmos internos. Usa estas recomendaciones como punto de partida para mejorar tu sitio.

Última actualización: 14 de diciembre de 2025

Artículos relacionados

Hub de categoría

Hub

Hub de SEO de Rendimiento

El rendimiento es un factor de ranking crítico e impacta directamente la experiencia del usuario

En la misma categoría

Guía detallada

Guía Completa de Optimización de LCP

Largest Contentful Paint (LCP) mide cuándo el elemento de contenido más grande se vuelve visible para los usuarios

Introducción

CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) es uno de los Core Web Vitals de Google—un conjunto de métricas que miden la experiencia real del usuario en tu sitio web

Introducción

Recursos que Bloquean el Renderizado

Los recursos que bloquean el renderizado son archivos que impiden que el navegador muestre contenido a los usuarios hasta que se descarguen y procesen...

Última actualización: