Extracción de imágenes críticas para LCP y SEO

Última actualización: June 28, 2026

La extracción de imágenes críticas significa encontrar la imagen que controla la primera impresión visual de una página. En muchas páginas de productos, páginas de destino y publicaciones de blog, esa imagen es el héroe, la foto principal del producto o una gran ilustración por encima del pliegue (above-the-fold). Si la identificas temprano, puedes precargar o priorizar el archivo correcto en lugar de acelerar todas las imágenes por igual.

Respuesta rápida: ¿cómo extraes la imagen crítica?

Utiliza la extracción de imágenes críticas para nombrar la imagen más probable que se convierta en el elemento Largest Contentful Paint, y luego dale a ese archivo un tratamiento de carga especial. Por lo general, esto significa que la imagen visible más grande en el viewport inicial obtiene fetchpriority="high", sin lazy loading, dimensiones estables y, a veces, un <link rel="preload">.

No precargar todos los archivos grandes. Precarga la imagen o foto del producto solo cuando el navegador de otra manera lo descubriría tarde, como dentro de CSS, un carrusel, un componente renderizado por cliente o una pila <picture> responsiva con selección compleja de fuentes.

Después del cambio, verifica el resultado. La documentación de Largest Contentful Paint de Google define LCP en torno al elemento de contenido visible más grande, y PageSpeed Insights mostrará qué elemento fue medido. Las DevTools de Chrome también deben mostrar la solicitud de imagen crítica temprano en el waterfall.

Usa este orden:

1. Carga la página con un viewport móvil realista.
2. Encuentra la imagen o póster visible más grande por encima del pliegue.
3. Verifica si PageSpeed o Lighthouse lo reportan como LCP.
4. Elimina loading="lazy" de esa imagen.
5. Añade dimensiones o una relación de aspecto.
6. Añade fetchpriority="high" cuando sea un <img>.
7. Precárgalo solo cuando el descubrimiento es tardío.
8. Mantén las imágenes por debajo del pliegue en modo lazy.
9. Vuelve a probar después de cambios en el diseño, CMS o texto del héroe.

¿Qué cuenta como una imagen crítica?

Una imagen crítica es la imagen que un visitante espera antes de que la página se sienta útil. A menudo, pero no siempre, es el elemento LCP. Un pequeño logo en la parte superior de la página puede cargar primero, pero rara vez controla la preparación percibida. Una imagen de héroe que ocupa la mitad de la pantalla del teléfono generalmente sí lo hace.

Utiliza el tamaño renderizado, la posición en el viewport y el propósito juntos. Una miniatura en un menú de navegación es visible, pero no es el contenido principal. Una imagen de fondo detrás del titular puede ser crítica si es el elemento visible más grande. Una imagen de tarjeta social en metadatos es importante para compartir, pero no se obtiene para la página renderizada a menos que la plantilla también la muestre.

La guía de LCP de Google enumera los elementos <img>, los elementos de imagen dentro de SVG, las imágenes póster de video y las imágenes de fondo CSS como posibles candidatos. Esto significa que la extracción no puede detenerse en buscar la primera etiqueta <img>. Debes inspeccionar la página renderizada.

Para trabajo adyacente, mantén cerca la lista de verificación más amplia de optimización de imágenes para SEO. La extracción de imágenes críticas decide la prioridad; la compresión, los nombres de archivo, el texto alt y el contenido estructurado aún deciden si la imagen es útil después de que se carga.

¿Qué imagen debe recibir precarga o alta prioridad?

Dale alta prioridad a una imagen: la imagen LCP probable de la página actual. Si dos candidatos están cerca, elige el más grande en móvil primero, porque los Core Web Vitals móviles suelen ser más difíciles de superar.

Usa fetchpriority="high" cuando la imagen crítica sea un <img> normal o el <img> de reserva en un elemento <picture>. La guía de prioridad de obtención de Google explica que esta pista cambia la prioridad del recurso del navegador sin cambiar la ruta de descubrimiento del marcado.

Usa precarga cuando el problema sea el descubrimiento. La rel="preload" reference de MDN describe preload como una forma de solicitar recursos antes en la carga de la página. Eso ayuda cuando la URL de la imagen aparece en CSS, llega después de la hidratación o está detrás de un marcado que el navegador no puede descubrir lo suficientemente pronto.

Para una imagen responsiva normal, el marcado puede verse así:

<img
  src="/images/product-hero-960.webp"
  srcset="/images/product-hero-480.webp 480w, /images/product-hero-960.webp 960w, /images/product-hero-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 960px"
  width="960"
  height="640"
  fetchpriority="high"
  alt="Mochila de cuero negro mostrada abierta con el compartimento para portátil visible"
>

Si la imagen es un fondo CSS y aún no puedes moverla a HTML, precarga el mismo activo que utilizará el viewport inicial:

<link
  rel="preload"
  as="image"
  href="/images/home-hero-960.webp"
  imagesrcset="/images/home-hero-480.webp 480w, /images/home-hero-960.webp 960w"
  imagesizes="100vw"
>

La guía de precarga de imágenes cubre la sintaxis con más detalle. La regla importante aquí es más estricta: precargar después de la extracción, no antes.

¿Cómo evitas el lazy loading de la imagen incorrecta?

El lazy loading pertenece por debajo del primer viewport. Es un error en la imagen crítica extraída porque le dice al navegador que espere hasta que se realicen las comprobaciones de diseño y distancia. La guía de lazy loading a nivel de navegador de Google advierte contra el lazy loading de imágenes que son inmediatamente visibles.

Audita cuidadosamente los componentes globales de imágenes. Muchos frameworks hacen del lazy loading la opción predeterminada porque la mayoría de las imágenes están por debajo del pliegue. Ese valor predeterminado rompe páginas donde la imagen de héroe está envuelta en el mismo componente que las miniaturas de galería.

Revisa estos lugares:

1. Renderizadores de imágenes rich-text CMS.
2. Componentes de galería de productos.
3. Componentes de imagen de portada del blog.
4. Utilidades de fondo de héroe de la página de inicio.
5. Deslizadores que ocultan todas las diapositivas hasta que se ejecuta JavaScript.
6. Componentes de marcador de posición que cambian data-src a src.
7. Bloques de personalización de terceros.
8. Envoltorios de pruebas A/B que retrasan el marcado del héroe.

La solución suele ser pequeña. Añade una opción de priority, aboveFold o isLcp al componente y haz que el propietario de la plantilla lo elija explícitamente. Las imágenes corporales por debajo del pliegue aún deben usar lazy loading nativo, especialmente guías largas con capturas de pantalla y diagramas.

Para páginas con mucho contenido móvil, combínalo con la guía de optimización de imágenes móviles. Un héroe correctamente priorizado todavía tiene un rendimiento deficiente si el teléfono descarga un recorte de escritorio de 2400 px para una ranura de 390 px.

¿Cómo debes extraer imágenes de una página real?

Empieza en el navegador, no en la biblioteca de activos. La biblioteca de activos te dice lo que existe; el navegador te dice lo que reciben los usuarios.

Usa este flujo de trabajo manual:

1. Abre la página con 390 px de ancho y recárgala con caché deshabilitada.
2. Anota la imagen visible más grande antes de desplazarte.
3. Inspecciona ese elemento y registra su URL final.
4. Verifica si es un <img>, <picture>, póster de video o fondo CSS.
5. Confirma el ancho y alto renderizados.
6. Compara el ancho del archivo descargado con la ranura renderizada.
7. Busca loading="lazy" o asignación de src retrasada por JavaScript.
8. Revisa DevTools Network para el tiempo y la prioridad de inicio de la solicitud.
9. Ejecuta PageSpeed Insights y registra el elemento LCP.
10. Repite en escritorio si el héroe cambia con un breakpoint.

Para auditorías de plantillas, haz una pequeña tabla de extracción antes de editar código:

Generé los diagramas en este artículo como archivos WebP y mantuve cada uno por debajo de 40 KB. Ese no es un objetivo universal para fotos, pero es un recordatorio útil: la imagen extraída debe tener el tamaño adecuado antes de recibir prioridad. Si el archivo sigue siendo enorme, usa guía profunda de compresión de imágenes y guía de redimensionamiento por lotes antes de publicar.

¿Cómo verificas la imagen crítica en las herramientas?

La verificación tiene dos trabajos. Primero, demostrar que la imagen seleccionada es realmente el elemento LCP o un candidato serio a LCP. Segundo, demostrar que el navegador lo descubre lo suficientemente temprano.

Usa PageSpeed Insights para contexto de campo y laboratorio. El panel de diagnóstico generalmente nombra el elemento LCP, y la captura de pantalla ayuda a confirmar si el elemento reportado coincide con el héroe visual de la página. Usa Lighthouse o DevTools Performance cuando necesites un rastro local.

Usa DevTools Network para el comportamiento de la solicitud:

1. Filtrar por solicitudes de imagen.
2. Recargar con caché deshabilitada.
3. Confirmar que la imagen crítica comienza cerca de la parte superior del waterfall.
4. Verificar que la prioridad sea Alta o se actualice temprano.
5. Confirmar que las imágenes por debajo del pliegue no compiten todas al mismo tiempo.
6. Revisar código de estado, tipo de contenido, tamaño de transferencia y cabeceras de caché.

Usa la inspección de HTML renderizado para errores de marcado:

1. La imagen crítica tiene src o un srcset descubrible en el marcado inicial.
2. No tiene loading="lazy".
3. Tiene width y height, o una relación de aspecto CSS estable.
4. Su texto alt describe el sujeto visible cuando la imagen es contenido.
5. La URL CDN devuelve una respuesta 200 rastreable.

Para búsqueda, las mejores prácticas de SEO para imágenes de Google también enfatizan los nombres de archivo descriptivos, el texto alt y el texto explicativo útil circundante. La extracción de imágenes críticas mejora la prioridad de carga, pero la misma imagen aún necesita contexto de búsqueda.

¿Qué rompe la extracción de imágenes críticas?

El fallo más común es tratar cada página como si tuviera el mismo héroe. Un índice de blog, una página de producto y una página de precios pueden tener diferentes candidatos LCP. El paso de extracción debe ocurrir a nivel de plantilla y a nivel de breakpoint.

Cuidado con estas trampas:

1. Precargar la imagen Open Graph. La imagen de tarjeta social puede nunca renderizarse en la página.
2. Lazy-load la primera foto del producto. Las galerías de productos a menudo heredan valores predeterminados de miniaturas.
3. Priorizar cada diapositiva del carrusel. Solo la primera diapositiva visible puede ser crítica al cargar.
4. Ignorar los recortes móviles. Escritorio y móvil pueden seleccionar imágenes LCP diferentes.
5. Usar fondos CSS para contenido significativo. Son más difíciles de priorizar y menos accesibles.
6. Olvidar las dimensiones. La prioridad no evita el desplazamiento del diseño (layout shift).
7. Publicar una fuente sobredimensionada. Una imagen de 3 MB con alta prioridad sigue siendo lenta.
8. Probar solo en Wi-Fi local. Un 4G lento expone retrasos de descubrimiento.

Si el problema es principalmente el peso del archivo, empieza con la lista de verificación completa de optimización de imágenes. Si el problema es la elección del formato, compara AVIF vs WebP antes de cambiar las reglas de entrega.

Resumen: lista de verificación de extracción de imágenes críticas

La extracción de imágenes críticas es una decisión de velocidad de página, no un ejercicio de nombramiento de activos. Encuentra la imagen que controla el primer viewport, dale solo a esa imagen un tratamiento de carga temprana y evita que el resto de la página compita con ella.

Antes de publicar, confirma:

1. Que la imagen LCP probable está nombrada en la plantilla o notas de auditoría.
2. Que los candidatos móvil y escritorio se revisan por separado.
3. Que la imagen crítica no está cargada con lazy loading.
4. Que fetchpriority="high" se utiliza para un candidato <img> LCP visible.
5. Que Preload se usa solo cuando el descubrimiento es tardío.
6. Que el archivo seleccionado está redimensionado y comprimido.
7. Que ancho y alto, o una relación de aspecto, reservan espacio de diseño.
8. Que las imágenes por debajo del pliegue permanecen en modo lazy.
9. Que PageSpeed Insights reporta el elemento LCP esperado.
10. Que DevTools muestra la solicitud de imagen crítica al principio del waterfall.
11. Que la URL CDN devuelve 200 con el tipo de imagen esperado.
12. Que la imagen tiene un texto alt útil y contenido explicativo cercano.

Créditos de imágenes

• El diagrama de candidato LCP, árbol de decisión de prioridad y rastro de verificación se generaron para este artículo con ImageMagick y se exportaron como WebP.