Imágenes WebP y AVIF en WordPress: guía práctica

Si tu WordPress ya sirve páginas rápido pero Google o PageSpeed siguen marcando las imágenes como el problema, el formato es casi siempre el culpable. Un JPEG o PNG subido tal cual desde la cámara o el diseñador pesa mucho más de lo necesario. Esta guía explica qué ganás con WebP y AVIF, cómo migrar sin romper nada y qué errores evitar.

WebP y AVIF: qué son y en qué se diferencian

Ambos son formatos modernos de compresión de imágenes pensados para la web. La idea es la misma: mostrar una imagen visualmente equivalente con menos bytes.

• WebP: es el formato más compatible hoy. Lo soportan prácticamente todos los navegadores actuales y es la opción segura por defecto.
• AVIF: suele comprimir mejor que WebP, sobre todo en fotografías, pero codificarlo consume más tiempo y no todos los entornos antiguos lo manejan.

El ahorro real depende de cada imagen y de la calidad que elijas, así que no te fíes de promesas de porcentajes fijos: medí con tus propias fotos.

Por qué importa para el rendimiento

En la mayoría de los sitios, las imágenes son el recurso más pesado de la página. Una imagen grande en la parte visible suele ser el elemento que define el LCP (Largest Contentful Paint), una de las métricas de Core Web Vitals. Bajar el peso de ese archivo acelera directamente esa métrica, algo que ya vimos en nuestra guía de Core Web Vitals.

La forma correcta de servirlas: <picture>

No conviene reemplazar el JPEG por un AVIF a ciegas. La manera robusta es usar la etiqueta <picture> con varias fuentes:

• Primero la fuente AVIF.
• Después la WebP.
• Al final el <img> original como respaldo.

El navegador toma la primera que entiende. Si no soporta ninguna moderna, usa el original y el visitante nunca ve una imagen rota.

Atributos que no deberías olvidar

• width y height para evitar saltos de diseño (CLS).
• loading="lazy" en imágenes fuera de pantalla, pero no en la imagen principal de la parte superior.
• alt descriptivo: también es SEO y accesibilidad.

Cómo migrar sin dolores de cabeza

• Empezá por las páginas que más tráfico reciben: portada, páginas de servicio y productos estrella.
• Elegí la calidad con criterio: una calidad muy baja ahorra bytes pero se nota en degradados y textos dentro de la imagen. Probá varios niveles y compará a simple vista.
• Conservá los originales. Si algún día cambia el formato recomendado, querés poder regenerar desde la fuente.
• Revisá el resultado en móvil, donde el peso de la imagen más se nota.

Errores frecuentes

• Subir imágenes de 4000 px para mostrarlas a 800 px. Ningún formato arregla un tamaño absurdo: redimensioná primero.
• Convertir y olvidar las versiones responsivas (srcset), con lo que el móvil descarga la versión de escritorio.
• Aplicar lazy load a la imagen principal y empeorar el LCP.
• Servir AVIF sin respaldo para navegadores que no lo entienden.

Dónde encaja la caché

Optimizar imágenes y cachear páginas son mejoras complementarias: la caché evita que el servidor tenga que construir la página en cada visita, y las imágenes livianas hacen que lo que se descarga después sea mínimo. En cache.lat, además de servir HTML estático, la optimización de imágenes a AVIF/WebP con el formato y la calidad que elijas y la reescritura a <picture> forman parte del plugin; podés ver el detalle en los datos técnicos y entender el mecanismo completo en cómo funciona.

Si querés que alguien revise tu caso concreto, podés escribirnos desde la página de contacto de TuNegocioEnLinea.net.

Checklist rápido

• Redimensioná las imágenes al tamaño máximo real de uso.
• Convertí a WebP o AVIF con una calidad probada visualmente.
• Servilas con <picture> y respaldo.
• Definí width/height y no hagas lazy load de la imagen principal.
• Medí antes y después con PageSpeed Insights usando la misma URL.

Con estos pasos, la mayoría de los sitios WordPress recortan una parte importante del peso de sus páginas sin cambiar nada de lo que ve el visitante.