Cómo servir formatos de próxima generación en WordPress: todo lo que debe saber

Si ha realizado una auditoría de rendimiento en Google PageSpeed ​​Insights, es posible que haya visto aparecer la oportunidad de "servir imágenes en formatos de última generación".

El contenido es el rey, pero el formato que utilizará para entregarlo en su sitio de WordPress también es importante. Los formatos de próxima generación (abreviatura de próxima generación) son una forma de acelerar los tiempos de carga de las imágenes en los sitios web. Se pueden cargar en navegadores modernos con información de compresión integrada, por lo que los visitantes no tendrán que esperar eternamente.

Este artículo repasa los formatos de próxima generación disponibles y cómo servir imágenes en estos formatos particulares en WordPress para hacer que su sitio sea más rápido y mejorar su puntaje de rendimiento de Lighthouse.

¿Qué son los formatos de próxima generación y por qué debería usarlos?

Las imágenes de última generación ofrecen compresión y calidad superiores. Son perfectos para uso web, ya que ocupan menos datos y mantienen el mismo alto nivel de calidad de imagen.

Hay dos formatos principales de próxima generación que puede usar para sus imágenes en WordPress, a saber:

• WebP (desarrollado por Google) es un formato de imagen que utiliza formatos de compresión con pérdida y sin pérdida. ¡Obtiene una imagen de alta calidad con un tamaño de archivo pequeño! WebP es definitivamente un excelente reemplazo para las imágenes JPEG, PNG y GIF, ya que también se conserva la calidad de la imagen:

• AVIF (desarrollado por Alliance for Open Media) es un formato de archivo de imagen que reduce el tamaño de las imágenes manteniendo la misma calidad de imagen. AVIF tiende a comprimir los archivos incluso más que WebP, pero AVIF está atrasado en compatibilidad con navegadores como un formato de archivo joven. Como resultado, lo alentamos a que use el formato WebP para su sitio de WordPress.

Google PageSpeed ​​Insights también le recomienda servir imágenes en formatos de próxima generación como WebP y AVIF en lugar de PNG o JPEG:

¿Cuáles son los beneficios de servir imágenes en un formato de próxima generación como WebP?

Las imágenes WebP son alrededor de un 30 % más pequeñas en comparación con las imágenes PNG o JPEG. Como se muestra a continuación, el formato PNG hace un buen trabajo en la optimización de imágenes, pero es superado por WebP (el último).

Tenga en cuenta que para la mayoría de los sitios web, las imágenes son las principales culpables de ralentizar su sitio. Las imágenes grandes no solo ralentizan su sitio, sino que también aumentan el peso de la página. Esto afectará su rendimiento en dispositivos móviles porque una página pesada tardará más en cargarse en las redes móviles.

Finalmente, la velocidad del sitio web es un factor importante que Google tiene en cuenta al determinar las clasificaciones. Si no desea aparecer en la página 5, recuerde optimizar sus imágenes utilizando un formato de próxima generación como WebP.

Veamos cómo convertir tus imágenes a WebP en WordPress.

Cómo servir imágenes en formatos de próxima generación en WordPress

La forma más fácil y rápida de convertir imágenes a formatos de próxima generación es usar un complemento de WordPress. Sin embargo, también puede optimizar y convertir sus imágenes manualmente.

Repasemos ambas opciones.

Opción 1: cómo convertir imágenes en formatos de próxima generación con un complemento

Como siempre, el uso de un complemento de WordPress le ahorra una valiosa cantidad de tiempo. Incluso Google recomienda usar un complemento para convertir las imágenes cargadas a WebP o Avif.

Hay seis complementos principales que puede usar para optimizar sus imágenes y servirlas en formatos de próxima generación, a saber:

1. Imagify: un complemento de conversión WebP gratuito para alrededor de 200 imágenes. Imagify también cambia el tamaño y comprime sus imágenes para aumentar el rendimiento (bonificación: tutorial completo y prueba de rendimiento incluidos en nuestro artículo) .
   
2. WebP express : agrega una simple línea de código para servir imágenes WebP.
   
3. EWWW: una opción de conversión inteligente para obtener el formato de imagen correcto para el trabajo (JPG, PNG, GIF o WebP).
   
4. Optimizador de imágenes de píxeles cortos: convierte cualquier JPEG, PNG o GIF a WebP y AVIF.
   
5. Smush: convierte a WebP y sirve imágenes automáticamente en formato WebP de próxima generación (solo versión pro).
   
6. Convertidor WebP para medios: reemplaza archivos en formatos estándar JPEG, PNG y GIF con formato WebP.

Cómo convertir imágenes a WebP usando Imagify

Veamos un ejemplo de conversión WebP usando el complemento Imagify. Solo se necesitan tres pasos

Paso 1: descargue e instale Imagify de forma gratuita. Active el complemento y cree su clave API.

Paso 2: vaya a Configuración> Imagify y desplácese hasta la pestaña Optimización .
Seleccione " Crear versión WebP de imágenes " y " Mostrar imágenes en formato WebP en el sitio ", así como la segunda opción " Usar etiquetas <imagen> ".

Paso 3: haga clic en Generar versiones WebP faltantes azul botón.

Felicitaciones, ahora está sirviendo a los visitantes formatos de imagen WebP, como puede ver en la biblioteca de WordPress:

Nota importante: sus imágenes WebP recién generadas no se mostrarán en la biblioteca de WordPress. Si desea verificar que la conversión fue exitosa, abra la página web que muestra la imagen. A continuación, vaya a la pestaña Desarrollador de Chrome > Inspeccionar elemento > Red > filtrar por IMG y mire la columna Tipo .

Ahora debería ver el formato "WebP" asociado con la imagen.

Para obtener más información sobre las conversiones de formato de última generación, le recomendamos que siga nuestra guía detallada sobre el envío de imágenes a WebP mediante Imagify.

Opción 2: cómo servir imágenes en formatos de próxima generación sin un complemento

Si no tiene ganas de usar un complemento para convertir sus imágenes al formato de próxima generación, puede agregar manualmente una pieza de código. Aquí hay dos opciones diferentes que puede seguir para su sitio de WordPress.

1. Edite directamente su archivo .htaccess de WordPress

Le recomendamos que siga esta opción solo si se siente muy cómodo codificando y editando los archivos de su sitio. El archivo .htaccess es un poderoso archivo de sitio web que controla la configuración de alto nivel de su sitio web.

Coloque el siguiente código de GitHub en su archivo .htaccess para reemplazar imágenes jpg/png/gif con imágenes WebP:

 <IfModule mod_rewrite.c> RewriteEngine On # Check if browser supports WebP images RewriteCond %{HTTP_ACCEPT} image/webp # Check if WebP replacement image exists RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # Serve WebP image instead RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image] </IfModule> <IfModule mod_headers.c> # Vary: Accept for all the requests to jpeg, png and gif Header append Vary Accept env=REQUEST_image </IfModule> <IfModule mod_mime.c> AddType image/webp .webp </IfModule>

2. Usa el elemento <imagen> en tu HTML

Modificar el archivo .htaccess puede ser complicado. Una opción más responsable es usar la etiqueta <picture>. En ese caso, el navegador elegirá automáticamente el formato de archivo apropiado para mostrar.

 <picture> <source type="image/webp"> <img src="/path/to/image.jpg" alt=""> </picture>

El impacto de WebP en el rendimiento

Como se vio anteriormente, puede usar el complemento Imagify para convertir sus imágenes de WordPress a WebP, el formato de próxima generación recomendado por Google. Imagify también le permite optimizar múltiples imágenes redimensionándolas y comprimiéndolas automáticamente (y en masa).

Sería interesante hacer algunas pruebas de rendimiento para confirmar lo que hemos estado diciendo. Ejecutaré dos escenarios:

Escenario 1: resultados de rendimiento con imágenes JPEG (sin Imagify)

• 13 imágenes servidas en formato JPEG
• Las imágenes no están optimizadas

Escenario 2: resultados de rendimiento con imágenes WebP y modo de optimización agresivo (con Imagify)

• 13 imágenes convertidas y servidas al formato WebP
• Imágenes optimizadas

Herramientas de rendimiento utilizadas:

Google PageSpeed ​​Insights y WebPageTest

Mi sitio de prueba:

Escenario 1: resultados de rendimiento con imágenes JPEG (sin Imagify)

Comenzamos la auditoría con todas mis imágenes servidas en JPEG. En promedio, su tamaño es de 270 KB.

Ahora echemos un vistazo a PSI. Obtengo una puntuación naranja en dispositivos móviles (75/100) y la puntuación de pintura con contenido más grande en rojo. La puntuación LCP es relevante, especialmente porque el elemento LCP que afecta el rendimiento es una imagen (como suele serlo). Hay posibilidad de mejora.

Además de eso, PSI ha señalado tres problemas relacionados con las imágenes:

• Imágenes del tamaño adecuado (especialmente desde dispositivos móviles)
• Sirva imágenes en formatos de próxima generación
• Los elementos de imagen no tienen ancho y alto explícitos

KPI	Mobile Score – Imágenes JPEG – No Imagify
Nota global	75/100
Auditoría PSI
Pintura con contenido más grande	4,9 s
Tamaño de página	1,2 MB
Solicitudes HTTP	22
Tiempo de carga	2.890 s

Escenario 2: resultados de rendimiento con imágenes WebP y modo de optimización "agresivo" (con Imagify)

Ahora es el momento de convertir mis 13 imágenes JPEG a WebP y optimizarlas con Imagify.

Para ello vamos a Ajustes > Imagify > Imagify'em all

Eso es todo. Mis imágenes ahora están optimizadas y publicadas en WebP. Notamos una caída importante en el tamaño del archivo. Está confirmado, WebP hace que tus imágenes sean más claras.

Ahora podemos realizar otra auditoría en Google PageSpeed ​​Insights para ver si mi rendimiento ha mejorado con Imagify. Los resultados son geniales. ¡Mi puntuación pasó de 75/100 a 92/100 en el móvil!

KPI	Puntuación móvil: imágenes JPEG ( Sin imaginar )	Mobile Score: imágenes WebP y modo agresivo (con Imagify)
Nota global	75/100	92/100
Auditoría PSI
Pintura con contenido más grande	4,9 s	3,0 s
Tamaño de página	1,2 MB	714KB
Solicitudes HTTP	22	17
Tiempo de carga	2.890 s	1.059 s

En conclusión, Imagify hizo que nuestro sitio web fuera más rápido en dispositivos móviles: la página es más liviana, la cantidad de solicitudes HTTP se redujo e incluso mi tiempo de carga es mucho mejor.

Por último, pero no menos importante, Imagify también ha abordado tres problemas principales señalados previamente por PSI:

"Servir imágenes en formatos de próxima generación", "Imagen del tamaño adecuado" y "Codificar imágenes de manera eficiente" ahora son una auditoría aprobada gracias a Imagify.

Terminando

En general, hemos visto que servir imágenes en formatos de próxima generación es un gran paso hacia la mejora del rendimiento. El formato WebP, junto con la optimización y el cambio de tamaño de las imágenes, es una combinación ganadora para acelerar su sitio de WordPress.

Tamaño de archivo usando JPEG	Tamaño de archivo usando WebP + imágenes comprimidas y redimensionadas (alrededor del 80% de ahorro gracias a Imagify)

La conversión de JPEG o PNG a un formato de próxima generación como WebP es muy fácil de hacer con un complemento como Imagify . Además de eso, Imagify también comprimió y redimensionó nuestras imágenes de WordPress, lo que nos hizo pasar a una puntuación verde en dispositivos móviles (92/100 en Google PageSpeed ​​Insights). Es hora de optimizar tus imágenes y servirlas en WebP.

¡Realice su auditoría y pruebe Imagify gratis hoy!