Empieza por la imagen que el lector ve realmente
Revisa las dimensiones con que se muestra, el recurso seleccionado, los bytes transferidos y el papel de la imagen en la página. Un diagrama con etiquetas pequeñas necesita un tratamiento distinto al de una fotografía. Un archivo original grande no tiene por qué entregarse sin cambios a cada visitante.
Identifica el elemento Largest Contentful Paint real en una traza. Puede ser un texto y no una imagen. Optimizar una miniatura que está fuera de la vista inicial no arreglará una hoja de estilos que bloquea el renderizado y no tiene nada que ver.
Elige el formato y la calidad para cada archivo
Compara AVIF y WebP con tu JPEG o PNG actual en los tamaños que la gente va a usar. Revisa los bordes, los degradados, los tonos de piel, la transparencia y el texto. El ahorro de peso depende del contenido y de los ajustes del codificador; un porcentaje universal no es un objetivo de calidad útil.
Usa SVG para los diagramas e iconos adecuados, de modo que las etiquetas y las líneas se mantengan nítidas, y conserva una versión rasterizada para las plataformas donde se comparte, si hace falta. La explicación esencial también debe aparecer en HTML. No llames «sin pérdida» a una imagen con pérdida porque logre una alta puntuación de similitud perceptual.
Escribe un marcado responsivo que coincida con el diseño
El siguiente ejemplo supone una imagen a todo lo ancho dentro de una columna de contenido de 48rem con márgenes de 1rem en pantallas pequeñas. Ajusta sizes a tu diseño real. El navegador usa los anchos candidatos, el tamaño del espacio y las condiciones del dispositivo para elegir un recurso.
<picture>
<source type="image/avif"
srcset="/media/diagram-480.avif 480w,
/media/diagram-960.avif 960w,
/media/diagram-1440.avif 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem">
<img src="/media/diagram-960.webp"
srcset="/media/diagram-480.webp 480w,
/media/diagram-960.webp 960w,
/media/diagram-1440.webp 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem"
width="1440" height="900"
loading="eager" fetchpriority="high" decoding="async"
alt="Public requests pass through a cache before the origin">
</picture>Para una imagen secundaria fuera de pantalla, usa en cambio la carga diferida y la prioridad de descarga normal. El ancho y el alto reservan la relación de aspecto; el CSS aún puede hacer que la imagen sea fluida. Mantén las variantes con la misma relación de aspecto, salvo que uses dirección de arte de forma intencionada.
Usa el flujo de imágenes de WordPress siempre que puedas
Para las imágenes de la Biblioteca de medios, usa las funciones de imágenes adjuntas de WordPress para que los tamaños disponibles y los atributos responsivos se generen a partir de los metadatos del adjunto. Verifica la salida: el marcado personalizado o la falta de variantes pueden saltarse esas ventajas. Las ilustraciones del tema pueden usar un conjunto de tamaños explícito y versionado.
El texto alternativo debe transmitir la información que aporta la imagen. Las repeticiones decorativas del encabezado contiguo pueden usar un atributo alt vacío. No conviertas el texto alternativo en una lista de palabras clave objetivo.
Valida la entrega y el comportamiento de la caché
- Revisa las URLs de imagen seleccionadas en pantallas estrechas y anchas, incluidas las de mayor densidad de píxeles.
- Asegúrate de que la imagen principal se pueda descubrir sin esperar a JavaScript.
- Revisa la calidad de la imagen a su tamaño real de visualización, no solo en una vista previa pequeña.
- Confirma que los medios fuera de pantalla no dominen la transferencia inicial.
- Si una CDN negocia los formatos, verifica que las claves de caché distingan correctamente las respuestas.
- Versiona los archivos modificados o purga las cachés correspondientes para que los lectores reciban la actualización.
Preguntas frecuentes
¿Necesitas una CDN de imágenes?
Una CDN con transformaciones puede simplificar una biblioteca de medios grande y que cambia con frecuencia. Un blog pequeño puede funcionar bien con unas pocas variantes generadas y una caché estática normal. Compara el costo continuo, la complejidad operativa y el ahorro real de transferencia antes de agregar otro servicio.
¿La imagen principal del hero debe usar carga diferida?
Normalmente no, si se ve de inmediato o es el elemento LCP de la página. Haz que su URL se pueda descubrir en el HTML inicial, ofrece candidatas responsivas adecuadas y considera una prioridad de descarga alta de forma selectiva. Carga de forma diferida las imágenes secundarias que empiezan por debajo de la vista inicial.
¿AVIF es siempre mejor que WebP?
Ningún formato ni ajuste de calidad gana en todas las imágenes. Compara el tamaño resultante y la calidad visual con el archivo real, incluidas las etiquetas finas, los degradados y la transparencia. Conserva una alternativa adecuada y verifica el archivo que elige el navegador.
¿Por qué las imágenes necesitan ancho y alto si el diseño es responsivo?
Esos atributos establecen una relación de aspecto intrínseca para que el navegador pueda reservar el espacio antes de que llegue la imagen. El CSS aún puede hacerla fluida. Usa dimensiones correctas y fuentes responsivas, y luego revisa el diseño real en busca de desplazamientos. La guía de velocidad para WordPress sitúa la entrega de imágenes dentro del flujo de trabajo de rendimiento más amplio.
Fuentes y lecturas recomendadas
Sigue explorando
Continúa con el diagnóstico de las Core Web Vitals o con la checklist completa de rendimiento.
Leave a Reply