Cómo publicar imágenes con formatos de próxima generación

Las imágenes juegan un papel crucial en el rendimiento de una web y en el SEO. De media, ocupan 1.054 KB en pantallas grandes y 900 KB en dispositivos móviles, lo que las convierte en el recurso más pesado en las páginas de inicio, representando aproximadamente el 40% del peso total de la página. Optimizarlas con formatos de nueva generación como WebP y AVIF puede reducir significativamente los tiempos de carga y mejorar la experiencia del usuario. En esta guía, explicaré todo lo que necesitas saber sobre cómo publicar imágenes con formatos de próxima generación en WordPress.

¿Qué son los formatos de imagen de próxima generación?

Los formatos de próxima generación como WebP y AVIF ofrecen una compresión superior en comparación con los formatos tradicionales como JPG y PNG. Aquí tienes una rápida comparación:

• WebP: Desarrollado por Google, WebP ofrece una mejor compresión que JPG y PNG manteniendo una alta calidad de imagen. Admite compresión con pérdida y sin pérdida, transparencia (como PNG) y animaciones (como GIF). Las imágenes WebP comprimidas sin pérdida son un 26% más pequeñas que las PNG, y las WebP comprimidas con pérdida son un 26-30% más pequeñas que las JPEG. La gran ventaja de WebP sobre AVIF es prácticamente total compatibilidad con los principales navegadores, como Chrome, Edge y Firefox.
• AVIF: Basado en el códec de video AV1, AVIF es un formato aún más avanzado que WebP. Ofrece una aún mejor compresión (hasta un 50% más ligeras que un JPG) con mejor calidad. También admite compresión con pérdida y sin pérdida, transparencia y animaciones. Sin embargo, su compatibilidad con los navegadores es más limitada en comparación con WebP, lo que lo hace menos universal.

¿Se pueden subir imágenes WebP/AVIF en WordPress?

Sí, WordPress admite la subida de imágenes WebP de forma nativa, lo que significa que puedes subirlas directamente y publicarlas para todos los usuarios. Sin embargo, si subes imágenes WebP manualmente, no se optimizarán más de lo que se hubiera hecho antes de subirlas, lo que podría resultar en archivos innecesariamente grandes.

AVIF, por otro lado, aún no es compatible con la biblioteca de medios de WordPress, por lo que la única opción sería subir archivos sin optimizar (WebP) o no subirlos en absoluto (AVIF). Menudo dilema, ¿no?

Práctica adecuada: Convertir JPG, PNG o GIF a WebP/AVIF en WordPress

En lugar de subir imágenes en formato WebP directamente, es mejor subirlas con formatos estándar (JPG/PNG/GIF) y luego convertirlas dentro de WordPress con un plugin. Con esto te aseguras de que las imágenes estén correctamente optimizadas antes de ser servidas.

El mejor plugin para optimización de imágenes es ShortPixel Image Optimizer (SPIO), sin duda. Además, es la mejor manera de convertir imágenes a WebP y AVIF en WordPress. El proceso es muy sencillo:

1. Instala SPIO en tu WordPress: ShortPixel Image Optimizer – WordPress.org
2. Ve a Ajustes > ShortPixel y configura las opciones como quieras.
3. Ahora ve a Ajustes > ShortPixel > WebP/AVIF & CDN.
4. Activa «Crear imágenes WebP» y/o «Crear imágenes AVIF».
5. Sube tus imágenes y deja que el plugin las optimice y convierta a WebP/AVIF.

Pero esto no es suficiente. Todavía tenemos que publicarlas para todos los usuarios. Para eso, tenemos 3 métodos:

1) Publica los archivos WebP/AVIF almacenados localmente desde tu mismo servidor

ShortPixel te permite generar y publicar archivos WebP/AVIF desde tu propio servidor. Para activar esta opción:

• Ve a Ajustes > ShortPixel > WebP/AVIF & CDN.
• Activa la opción «Sirve las imágenes WebP/AVIF desde archivos almacenados localmente (sin usar la CDN)«.
• Elige un método de publicación:
  • Utilizando la sintaxis de la etiqueta <picture>: Este método analiza el código fuente HTML en busca de etiquetas <img> y las reemplaza con etiquetas <picture> que contienen referencias a la imagen original, así como a las versiones en WebP y/o AVIF. El navegador seleccionará automáticamente el mejor formato, priorizando AVIF. Este enfoque evita tocar la configuración del servidor (a diferencia del método con .htaccess), pero es menos efectivo: solo se aplica a las etiquetas <img>, no a las imágenes de fondo, y tiene un mayor impacto en el rendimiento de la web.
  • Sin alterar el código de la página (a través de .htaccess): Este es el método más eficiente en términos de rendimiento porque el servidor entrega directamente los archivos WebP/AVIF en lugar de depender de WordPress. Sin embargo, no funciona en servidores Nginx. Si tienes un servidor Nginx, te recomiendo consultar la documentación oficial.

2) Usa la CDN de ShortPixel para publicar WebP/AVIF

La segunda opción es entregar los WebP/AVIF a través de la CDN de ShortPixel. Esta opción:

• No depende de la configuración de tu servidor.
• Reescribe dinámicamente las URLs de las imágenes para entregar versiones optimizadas. Cada vez que se carga una página, ShortPixel escanea el código fuente y reemplaza las URLs estándar de las imágenes con otras que apuntan a spcdn.shortpixel.ai. Tus archivos originales permanecen sin cambios.
• Puede ser más lenta que la entrega local si tu servidor ya es lo bastante rápido.
• Algunas URLs de las imágenes pueden no ser reemplazadas dependiendo de cómo esté construida tu web.

Para activar este método, simplemente ve a Ajustes > ShortPixel > WebP/AVIF & CDN y activa la opción «Sirve las imágenes de próxima generación usando la CDN de ShortPixel«. Ten en cuenta que también debes activar «Crear imágenes WebP» o «Crear imágenes AVIF«.

3) Genera WebP y usa otro plugin para la publicación

Si prefieres no usar las opciones de publicación de ShortPixel, aún puedes utilizar el plugin para generar archivos WebP y dejar que otro plugin se encargue de la publicación. Las opciones más populares compatibles son:

• LiteSpeed Cache: Tendrás que activar la opción «Reemplazo de imágenes WebP» en LiteSpeed Cache > Optimización de imágenes > Ajustes de optimización de imágenes.
  
• WP Rocket: Activa el add-on llamado «WebP Compatibility«.
  
• Cache Enabler: Simplemente activa la opción «Crea una versión almacenada en la caché para la compatibilidad WebP«.
  

Desafortunadamente, estos tres plugins también son plugins de caché, por lo que usarlos solo para publicar tus archivos WebP podría ser excesivo. Sin embargo, si ya estás usando uno de ellos, te animo a aprovecharlos.

Recuerda que primero debes generar las versiones WebP con ShortPixel y desactivar ambos métodos de publicación nativos de ShortPixel. Es decir:

• Crear imágenes WebP: Activado.
• Sirve las imágenes de próxima generación usando la CDN de ShortPixel: Desactivado.
• Sirve las imágenes WebP/AVIF desde archivos almacenados localmente (sin usar la CDN): Desactivado.

¿Cuál es el mejor método para publicar WebP/AVIF?

De todas las configuraciones posibles, el mejor método para publicar imágenes WebP/AVIF en términos de rendimiento suele ser dejar que el servidor lo gestione y no WordPress. Esto significa:

• Usar el archivo .htaccess en servidores Apache, lo cual puedes configurar directamente desde los ajustes de ShortPixel.
• Configurar manualmente Nginx, ya sea a través de tu proveedor de alojamiento o por tu cuenta si eres tú el que gestionas el servidor.

Sin embargo, si tu audiencia es global o tu servidor no es lo suficientemente potente (por ejemplo, Bluehost, HostGator, SiteGround, GoDaddy, etc.), una CDN probablemente ofrecerá un mejor rendimiento. Consulta el paso #2 arriba.

En cualquier caso, te recomiendo comprimir primero tus imágenes con ShortPixel para asegurarte de que los archivos finales en WebP y/o AVIF sean lo más pequeños posible.

Pero yo quiero subir mis archivos WebP o AVIF directamente a WordPress…

¡Ningún problema! Suele ser mucho más fácil, pero asegúrate de optimizar los archivos antes de subirlos.

Ya comprimo mis imágenes antes de subirlas a WordPress. ¿Representa algún problema?

En absoluto. Si ya comprimes tus imágenes JPG/PNG/GIF antes de subirlas, solo necesitas una solución para crear y publicar sus versiones con formatos de próxima generación. Para ello, puedes usar un plugin sencillo como Modern Image Formats. Los ajustes recomendados son los siguientes:

• Formato de entrega de imágenes: AVIF. Es mejor que WebP.
• Salida de imágenes de reserva: Activado, para que siempre tengas disponible el formato original.
• Generar todos los tamaños de imagen de respaldo: Activado, para que siempre tengas disponible el formato original.
• Elemento picture: Desactivado para un mejor rendimiento. Esta opción es similar a la de ShortPixel y, aunque ofrece buena compatibilidad, cambia la estructura del HTML, lo que puede ser problemático en algunos casos.

Mientras que publicar WebP o AVIF a través del servidor (por ejemplo, usando el archivo .htaccess o la configuración de Nginx) es mejor que dejar que WordPress lo gestione, el plugin Modern Image Formats es la siguiente mejor opción. Se basa en los ganchos y filtros de WordPress para realizar el reemplazo sobre la marcha, en lugar de usar JavaScript o modificar el código fuente.

Conclusión

La mejor manera de publicar imágenes con formatos de próxima generación mientras se logra un buen rendimiento es:

• Subir imágenes en formato JPG o PNG.
• Asegúrate de que las imágenes estén comprimidas antes de subirlas, o usa ShortPixel Image Optimizer para comprimirlas después subirlas.
• Usa ShortPixel Image Optimizer o Modern Image Formats para convertir las imágenes a WebP o AVIF, dependiendo de si fueron comprimidas antes de subirlas.
• Elige el mejor método de entrega según la configuración de tu servidor. Si es posible, deja que el servidor lo gestione (Apache/LiteSpeed/Nginx) en lugar de WordPress.

¡Y si necesitas ayuda con esto, por aquí estoy!