Optimiza las imágenes web: revisa la página antes de publicar

Comprobar primero

Empieza con lo que descarga el navegador

Los archivos de diseño y carpetas de medios no muestran lo que los usuarios realmente reciben. El navegador muestra qué URL de imagen se carga, su tamaño visible, si la página reserva espacio y si un archivo grande se reutiliza donde uno pequeño sería suficiente.

Plan de imágenes

Planifica cada imagen importante antes de convertir

Un plan de imágenes mantiene esta guía separada de los artículos sobre conversores. Define qué necesita cada área de imagen: tamaño, orden de carga, alternativa, función de metadatos y una comprobación final que confirme que la página usa el archivo correcto.

Cuando el plan indica que los archivos necesitan nuevas versiones, usa guía de conversión de imágenes para elegir el siguiente paso. Usa Guía de JPG a WebP para trabajo normal con WebP y la guía AVIF solo para fotos grandes que necesiten más ahorro.

Tamaños de imagen

Define tamaños claros para cada área de imagen

Las imágenes adaptables funcionan solo si el HTML coincide con el diseño. Mide el área, elige algunos anchos útiles, reserva la proporción y evita enviar un original grande solo porque existe.

Comprobación sencilla: si una tarjeta de 360 px descarga un archivo de 2400 px, la compresión no es el problema principal. La página necesita una versión más pequeña o el HTML apunta al archivo incorrecto.

Orden de carga

Haz que la primera imagen cargue intencionadamente

La imagen que define la primera pantalla necesita una regla diferente a las imágenes más abajo. Encuentra la probable imagen LCP, evita cargarla perezosamente por error y mantén las imágenes inferiores discretas hasta que se necesiten.

1. 1

   Nombra la imagen LCP

   Si la primera imagen significativa probablemente sea la Largest Contentful Paint, no la cargues perezosamente por error.

2. 2

   Mantén las imágenes inferiores discretas

   Las imágenes fuera del primer viewport deberían usar carga perezosa y decodificación asíncrona.

3. 3

   Revisar fondos CSS

   Un fondo recortado puede seguir descargando un archivo muy grande. Usa un archivo con el tamaño correcto para el área visible.

4. 4

   Revisar solicitudes repetidas

   Una imagen pequeña en una tarjeta se vuelve costosa cuando el mismo archivo sobredimensionado se repite decenas de veces.

HTML

Usa HTML adaptable para el área medida

Para imágenes importantes, deja clara la elección del navegador. El ejemplo muestra opciones de ancho, tamaños, dimensiones fijas y una alternativa. Cambia el comportamiento de carga según el área, no por costumbre.

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="Captura del panel mostrando el flujo de subida"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

Búsqueda y compartición

Haz que imágenes, texto alternativo y metadatos cuenten una sola historia

El SEO de imágenes no es solo añadir palabras clave. La imagen visible, el texto cercano, el texto alternativo útil, las etiquetas Open Graph y los enlaces JSON-LD deben describir claramente la misma página. Las imágenes decorativas deben seguir siendo decorativas.

Cuando la comprobación detecta vistas previas sociales débiles, continúa con Guía de imagen Open Graph. Si el problema son los esquemas y metaetiquetas, usa Guía de metadatos para Blazor para mantener JSON-LD y metadatos consistentes.

Pasos

Una comprobación sencilla de imágenes para cada página

1. 1

   Abre la página real

   Empieza desde la URL actual, no desde la carpeta de recursos. Registra las imágenes que realmente se cargan.

2. 2

   Crear el plan de imágenes

   Para cada imagen importante, anota el ancho objetivo, la proporción, el orden de carga, la alternativa y la función de metadatos.

3. 3

   Convierte solo lo que cambió

   Usa herramientas de conversión solo para archivos que encontró la comprobación, en lugar de reexportar toda la carpeta de medios.

4. 4

   Actualiza HTML y metadatos

   Apunta srcset, tamaños, dimensiones, Open Graph y enlaces JSON-LD a los archivos preparados.

5. 5

   Verifica la salida del navegador

   Revisa la página, las solicitudes de red, metadatos sociales, datos estructurados y diseño móvil.

6. 6

   Guarda la regla para la próxima vez

   Documenta las decisiones sobre imágenes para que futuras actualizaciones no comiencen con conjeturas.

Lista de comprobación

Lista de comprobación de imágenes antes de publicar

Usa esta lista antes de publicar un artículo, página de destino o producto. Detecta problemas que la conversión sola puede pasar por alto.