Optimiza las imágenes eligiendo un formato adecuado, generando variantes de tamaño útiles y permitiendo que el navegador solicite la apropiada para el diseño. Reserva su espacio antes de cargarlas, retrasa las que realmente quedan fuera de pantalla y carga pronto la probable imagen LCP. La compresión es solo una parte: una variante demasiado grande o una solicitud tardía puede desperdiciar las ventajas del codificador.
Empieza por la imagen que realmente se descarga
Antes de modificar la exportación, inspecciona una página representativa en el panel Network. Recárgala con un viewport móvil y otro de escritorio. Anota URL solicitada, bytes transferidos, dimensiones mostradas e intrínsecas y comienzo de la solicitud. Una miniatura puede estar descargando el original aunque el CMS haya generado alternativas.
Localiza la imagen que participa en Largest Contentful Paint en cada diseño. Puede ser una fotografía principal en una pantalla y una imagen de producto en otra. La guía de optimización de LCP distingue retraso de descubrimiento, transferencia y renderizado para evitar tratar todo como compresión.
Conserva los originales fuera del circuito de entrega para regenerar variantes sin volver a comprimir archivos ya comprimidos. Incluye muestras de fotografías, capturas, ilustraciones, transparencias e imágenes con texto. Un ajuste aceptable para un paisaje puede estropear una etiqueta o un diagrama.
Distingue contenido editorial de decoración. Las imágenes significativas necesitan texto alternativo que comunique su propósito; las decorativas pueden tenerlo vacío. No sustituyas una imagen semántica por un fondo CSS para cambiar una auditoría. Los fondos pueden servir para decoración, pero cambian el descubrimiento y la accesibilidad. En imágenes enlazadas, el nombre accesible debe explicar el destino si constituyen el único contenido del enlace. Revisa esto junto con tamaño y carga.
Guarda una referencia antes de convertir todo el sitio. Conserva capturas y registra qué imágenes se solicitan antes del contenido principal. Es un procedimiento de inspección, no un benchmark: cambiar la extensión no garantiza un porcentaje de ahorro.
Ajusta el formato al contenido
Elige por contenido visual y requisitos de entrega. AVIF y WebP son opciones modernas útiles, pero el resultado depende de imagen, codificador, ajustes y navegadores admitidos. JPEG y PNG siguen teniendo usos apropiados; SVG resuelve un problema distinto de la compresión ráster.
Utiliza esta tabla como punto de partida y compara archivos reales.
| Formato | Punto de partida útil | Qué revisar |
|---|---|---|
| AVIF | Fotografías y ráster complejo que admite pérdida | Detalles, degradados, tiempo de codificación y compatibilidad |
| WebP | Fotografías, ilustraciones y opciones con o sin pérdida | Bordes, transparencia y ventaja a calidad aceptable |
| JPEG | Fotografías y alternativa compatible | Bloques, halos y daño tras recodificaciones |
| PNG | Ráster sin pérdida, algunas capturas y transparencias | Si existe una alternativa moderna menor y aceptable |
| SVG | Iconos, logotipos e ilustraciones geométricas vectoriales | Complejidad, ráster incrustado y seguridad de archivos subidos |
Una fotografía dentro de SVG no se convierte en vector compacto. Un formato sin pérdida tampoco corrige una captura sobredimensionada. Inspecciona el recurso antes de culpar a su extensión.
Los valores de calidad dependen del codificador. Un 70 no equivale objetivamente a otro 70 y ningún ajuste garantiza pérdidas invisibles en todas las imágenes. Compara al tamaño de presentación y con mayor densidad. Revisa cabello, texto, bordes, degradados y detalles de producto. Define un umbral visual defendible antes de buscar el mínimo de bytes.
Elimina metadatos innecesarios de los derivados cuando corresponda, preservando atribución y gestión del color necesarias. Conserva el original con su perfil. Comprueba la entrega en los navegadores objetivo: el aspecto en el editor no garantiza el mismo resultado en producción.
Describe los anchos disponibles con srcset
El ancho CSS no siempre coincide con los píxeles físicos necesarios para una imagen nítida. Importa la densidad del dispositivo. Para mostrar 600 píxeles CSS en una pantalla de alta densidad, el navegador puede seleccionar razonablemente un archivo más ancho. No prohíbas que el ancho intrínseco supere al mostrado.
Con descriptores de ancho, srcset enumera archivos y sus anchos reales. sizes describe el ancho de presentación previsto según las condiciones de medios. El navegador combina esto con el dispositivo y la navegación y conserva la decisión final; no son órdenes de descargar un archivo exacto en cada punto de ruptura.
El ejemplo corresponde a márgenes laterales de 16 píxeles por debajo de 992 píxeles y un ancho máximo de 960. Los archivos deben existir con los anchos declarados.
<style>
.article-image {
display: block;
width: min(100%, 960px);
height: auto;
}
.article-content {
width: calc(100% - 32px);
max-width: 960px;
margin-inline: auto;
}
</style>
<div class="article-content">
<img class="article-image"
src="/images/coast-960.webp"
srcset="/images/coast-480.webp 480w,
/images/coast-960.webp 960w,
/images/coast-1920.webp 1920w"
sizes="(max-width: 991px) calc(100vw - 32px), 960px"
width="1920" height="1080"
alt="Rocky coastline beside a calm blue sea">
</div>El punto de ruptura sigue la geometría: a 992 píxeles de viewport, restar 32 deja 960. Mantén CSS y sizes alineados al modificar el diseño. Un sizes="100vw" incorrecto en una tarjeta estrecha puede provocar una descarga excesiva.
Inspecciona currentSrc para saber qué candidato se eligió. Prueba con una navegación nueva: al redimensionar, el navegador puede reutilizar un candidato grande almacenado en vez de pedir uno menor. Incluye densidades realistas, no solo cambios de ancho de ventana.
Utiliza picture para formatos y dirección artística
picture añade reglas explícitas de selección. Sirve para formatos y para dirección artística, cuando el recorte móvil cambia la composición en vez de reducir solo píxeles. El img obligatorio sigue aportando texto alternativo y una fuente de respaldo.
Este ejemplo ofrece dos codificaciones modernas y JPEG para la misma composición; todas las variantes conservan la proporción.
<picture>
<source type="image/avif"
srcset="/images/garden-800.avif 800w,
/images/garden-1600.avif 1600w"
sizes="(max-width: 800px) 100vw, 800px">
<source type="image/webp"
srcset="/images/garden-800.webp 800w,
/images/garden-1600.webp 1600w"
sizes="(max-width: 800px) 100vw, 800px">
<img src="/images/garden-800.jpg"
srcset="/images/garden-800.jpg 800w,
/images/garden-1600.jpg 1600w"
sizes="(max-width: 800px) 100vw, 800px"
width="1600" height="1000"
style="display:block;width:min(100%,800px);height:auto"
alt="Raised garden beds arranged along a stone path">
</picture>El navegador evalúa las fuentes por orden y utiliza la primera opción compatible que coincida. No añadas formatos únicamente para alargar el marcado: generar, almacenar e invalidar variantes tiene un coste operativo que deben justificar tus imágenes y público.
Para dirección artística, añade media a una fuente y ofrece el recorte correspondiente. Si cambia la proporción, reserva la proporción correcta en ese punto mediante dimensiones de fuente o CSS. Aplicar una proporción de escritorio a un recorte vertical puede crear movimiento o huecos. Revisa la posición del sujeto, especialmente texto y detalles de producto.
Reserva el espacio y adelanta la solicitud LCP
Los atributos width y height permiten deducir la proporción antes de disponer de la imagen. El CSS adaptable puede seguir escalándola. No obligan a mostrarla con esas dimensiones físicas; proporcionan información previa a la decodificación.
Sin dimensiones, el contenido inferior puede moverse al llegar la imagen. La guía de cambios de diseño explica ese fallo. Revisa también contenedores, carruseles y marcadores: un img bien dimensionado puede moverse si su padre cambia de altura al iniciar JavaScript.
Aplica loading="lazy" a imágenes suficientemente alejadas del viewport inicial. La carga diferida nativa depende de heurísticas y no significa exactamente «descargar solo cuando sea visible». El navegador puede anticipar la solicitud para evitar espacios vacíos al desplazarse.
Este ejemplo para contenido inferior reserva espacio y permite decodificación asíncrona.
<img src="/images/workshop-960.webp"
width="960" height="640"
loading="lazy" decoding="async"
style="max-width:100%;height:auto"
alt="Hand tools organized on a workshop wall">No apliques carga diferida a la probable imagen LCP. Mantén su URL real visible en el HTML inicial cuando sea posible, no solo en un atributo de datos usado por JavaScript. fetchpriority="high" señala importancia, pero no repara un recurso que todavía no se puede descubrir.
Esta imagen principal solicita carga inmediata y prioridad alta.
<img src="/images/hero-1600.webp"
srcset="/images/hero-800.webp 800w,
/images/hero-1600.webp 1600w"
sizes="100vw"
width="1600" height="900"
loading="eager" fetchpriority="high"
style="display:block;width:100%;height:auto"
alt="Sunlight falling across a quiet mountain valley">decoding="async" orienta la coordinación de decodificación y presentación; no comprime ni garantiza mejor LCP. Evalúalo según el contexto visual y la traza. No marques todas las imágenes con prioridad alta: siguen compartiendo ancho de banda y procesamiento.
Comprueba el HTML generado
El CMS, el tema y un complemento pueden modificar los atributos. Inspecciona la respuesta final y la solicitud elegida, no solo la plantilla editada.
Crea un proceso de imágenes repetible
Una CDN de imágenes puede crear derivados redimensionados, recortados o recodificados y entregarlos mediante cachés distribuidas. Solo son útiles si las plantillas solicitan variantes adecuadas. Acercar geográficamente el original no corrige automáticamente un tamaño adaptable equivocado.
Define una familia pequeña de anchos ligada a diseños frecuentes. Generar cada ancho entero complica caché, procesamiento y almacenamiento. Incluye formato y transformación en la identidad de caché y verifica que una respuesta negociada por formato se almacene correctamente para clientes distintos.
Define el respaldo si falla la transformación. Prueba archivos nuevos y antiguos, transparencias, proporciones extrañas y medios protegidos. No envíes originales privados a una URL pública por reutilizar el flujo de imágenes públicas. Cuando corresponda, usa los controles documentados del proveedor para restringir orígenes y firmar URL.
La automatización del CMS debe generar tanto archivos como marcado correcto. Una biblioteca puede producir varios anchos mientras una plantilla sigue sirviendo el original. A la inversa, una plantilla puede pedir derivados que no se regeneraron tras un cambio. Esto puede provocar respaldos ocultos, errores o descargas grandes.
En WordPress, revisa la guía de Core Web Vitals antes de añadir otro complemento. En Shopify, sigue la guía de velocidad de la tienda y verifica las etiquetas generadas. Mantén una estrategia coherente para evitar que dos sistemas recompriman el mismo derivado.
Audita las páginas existentes en un orden útil
Documenta la plantilla, el viewport, la densidad de píxeles, la URL y los ajustes junto a la comparación visual para que otro editor o desarrollador pueda repetirla. Incluye una imagen con pie largo y otra sin pie: la disposición circundante puede cambiar su espacio. Asigna responsables de carga original, generación de variantes y marcado, para localizar futuros fallos. Cuando cambie el ancho del diseño, actualiza el registro y revisa el HTML. Conserva la pareja original y derivado aprobada como referencia para nuevos ajustes. Así detectarás regresiones sin depender de que alguien recuerde el aspecto anterior.
Empieza por una plantilla representativa con tráfico importante y su imagen LCP. Corrige fuentes reales ausentes, carga diferida accidental o tamaños inexactos antes de afinar diferencias marginales de compresión. Después revisa miniaturas repetidas y galerías inferiores, donde una corrección de plantilla puede abarcar muchas páginas.
Compara original y derivado en la calculadora de ahorro de imágenes con tamaños reales. El cálculo describe bytes, no una reducción temporal garantizada. Red, caché, decodificación y competencia por recursos determinan el efecto sobre la visita.
Prueba viewports estrechos y anchos, caché vacía y repetición. Desplázate hasta el final para inspeccionar imágenes diferidas. Verifica alternativas, recortes, transparencia y estabilidad. Si el archivo menor llega más tarde, vuelve a revisar descubrimiento y prioridad.
Incorpora el proceso al mantenimiento de optimización de velocidad: preservar originales, generar derivados, emitir marcado correcto y comprobar recursos tras cambios de plantilla. El siguiente resultado útil es un proceso verificado para una plantilla, con calidad visual y solicitudes documentadas para repetirlo en el resto del sitio.
