En estos días, cuando los tiempos de carga y los elementos vitales del núcleo web son más importantes que nunca, ofrecer imágenes en formato WebP parece una obviedad.
Reducir el tamaño de las imágenes acelera su sitio web y ahorra ancho de banda.
Los archivos WebP suelen ser hasta un 25-35 % más pequeños que JPG y PNG, sin perder calidad de imagen.
Pero, ¿cómo se empieza? ¡Te lo explicamos todo en esta entrada de blog!
1. ¿Qué es WebP y por qué usarlo?
WebP fue desarrollado por Google en un esfuerzo por hacer la web más rápida. Está destinado a ser utilizado como reemplazo de JPG, PNG.
El tamaño total del archivo de los sitios web promedio consta de aproximadamente un 50% de imágenes, por lo que reducir el tamaño del archivo de sus imágenes puede tener un gran impacto en el tiempo de carga general, así como en puntajes como los vitales principales de la web.
Google piensa que el beneficio de usar WebP es tan significativo que incluso sugieren usar WebP cuando se prueba el sitio web de uno usando su herramienta PageSpeed Insights .
WebP permite la compresión de imágenes sin pérdida y con "pérdida".
La conversión sin pérdidas, por supuesto, significa que no habrá pérdida alguna de calidad de imagen. Sin embargo, incluso la compresión con pérdida usando WebP prácticamente no ofrece ninguna diferencia visual en términos de calidad de imagen, como se puede ver en esta galería de muestra proporcionada por Google .
2. WebP vs JPG: una comparación rápida y sencilla
También hicimos una prueba simple y subimos 10 imágenes diferentes a una página de demostración.
El tamaño combinado de todas las imágenes cargadas en formato JPG fue de 4,0 MB, como se ve a continuación:
Después de convertir todas las imágenes a WebP mediante una conversión con pérdida, el tamaño combinado de todas las imágenes fue de apenas 2,0 MB.
¡Esa es una reducción del 50% en el tamaño, y no pudimos ver ninguna diferencia en la calidad de la imagen!
3. Acerca del soporte WebP nativo de WordPress
Desde WordPress 5.8 , hay soporte nativo para WebP integrado en WordPress.
Para usarlo, uno simplemente puede cargar imágenes en formato WebP a la biblioteca de medios, al igual que con los formatos de imagen más tradicionales.
Este enfoque requiere que conviertas tus imágenes a WebP antes de subirlas a WP. Para hacer eso, hay varias herramientas de conversión útiles disponibles en línea .
Es así de simple usar el soporte integrado de WordPress y comenzar a cargar WebP en su sitio.
Sin embargo, se debe tener en cuenta que la compatibilidad del navegador con WebP todavía no es del 100 %, por lo que a partir de hoy le recomendamos que se asegure de tener un respaldo en su lugar.
4. Sirviendo WebP con respaldo
WebP es un formato de archivo bastante nuevo y, aunque hoy en día es compatible con todos los principales navegadores, los visitantes que utilicen versiones de navegador anteriores no podrán ver las imágenes de WebP, a menos que utilicemos un respaldo. Para obtener una descripción actualizada de la compatibilidad del navegador con WebP, visite caniuse.com .
Para una mejor compatibilidad con versiones anteriores y para poder ayudar a los visitantes que utilizan navegadores más antiguos, le recomendamos que cargue sus imágenes en WordPress en formato JPG y PNG, como lo haría normalmente, y luego las convierta a WebP después de cargarlas.
A pesar de que WebP ahora es compatible de forma nativa con WordPress, la compatibilidad con el navegador sigue siendo ~95%. Por ahora, aún recomendaríamos el enfoque de conversión, ya que permite una alternativa para los visitantes con navegadores más antiguos.
Al hacer esto, su sitio puede servir imágenes "dinámicamente" y solo mostrar imágenes WebP a los visitantes que lo admitan, y recurrir a la versión original PNG/JPG para los visitantes con navegadores más antiguos.
Todos los complementos populares de WebP (incluidos los que se enumeran a continuación) tienen esta función de respaldo incorporada y son fáciles de configurar.
5. Sirviendo WebP en WordPress usando un complemento
Para la mayoría de los propietarios de sitios de WordPress, la forma más fácil de convertir todas las imágenes a WebP y comenzar a servirlas a sus visitantes será usar uno de los muchos complementos disponibles para esto.
Hay varios complementos disponibles para WordPress que le permiten convertir todos sus JPG y PNG a WebP, algunos son gratuitos y también existen algunas opciones pagas.
Algunas de las opciones más populares son:
- WebP Express (Gratis e ilimitado)
- Imagify (modelo Freemium, se pueden convertir 20 MB de imágenes gratis cada mes)
- ShortPixel (modelo Freemium, 100 imágenes por mes se pueden convertir gratis)
- Smush (conversión WebP solo disponible en la versión “Pro” de pago)
Tenga en cuenta que además de convertir sus imágenes al formato de archivo WebP, también tendrá que configurar su servidor web para servirlas a sus visitantes.
Para entornos Apache, su archivo .htaccess debe actualizarse automáticamente y debería funcionar de forma inmediata. Para los entornos de alojamiento nginx, se necesita una configuración manual, por lo que es posible que deba pedirle ayuda a su host. Aquí en Templ, este servicio, por supuesto, se incluye de forma gratuita como parte de nuestro alojamiento gestionado.
El uso de un complemento es en su mayor parte fácil y directo, pero el uso de un complemento tiene sus inconvenientes, ya que la instalación de complementos adicionales en su sitio significa que se necesita ejecutar más código en cada carga de página, lo que ralentiza el sitio y la conversión a WebP a través de PHP no es exactamente ideal.
6. Sirviendo imágenes en WordPress SIN plugin
Entonces, idealmente, nos gustaría servir imágenes en formato WebP sin depender de un complemento para WordPress para que esto suceda.
Esto nos daría lo mejor de ambos mundos; podríamos servir a WebP y acelerar nuestro sitio web, y no tendríamos que agregar más código a nuestro sitio web y, por lo tanto, ralentizar el backend.
Sin embargo, si está alojando su sitio web en un VPS o tiene otro alojamiento no administrado para su sitio, esto es bastante técnico y es probable que tenga que hacerlo todo usted mismo. Un buen punto de partida en esos casos sería la documentación oficial sobre cómo convertir imágenes en diferentes sistemas operativos.
Si, por otro lado, está utilizando un proveedor de alojamiento administrado, es posible que su host pueda ayudarlo y configurarlo por usted.
Aquí en Templ, por ejemplo, ofrecemos conversión de imágenes a WebP, incluida toda la configuración necesaria del servidor, todo incluido de forma gratuita con todos nuestros planes.
7. Resumen
Con todo, es claro decir que el beneficio de usar WebP en su sitio puede ser significativo y cuando se usan respaldos tampoco vemos inconvenientes.
Hay una buena razón por la que PageSpeed Insights de Google recomienda "servir imágenes en formatos de última generación".
Recomendamos a cualquier persona que comience a investigar la conversión de WebP y comience a usarla en su sitio web lo antes posible.
Si tiene alguna pregunta sobre las imágenes de WordPress y WebP, puede preguntarnos en el chat aquí en esta página o publicar en el cuadro de comentarios a continuación.
¡Buena suerte! 🙂
0 Comentarios