Si buscas acelerar tu sitio de WordPress, disminuir el tamaño de las imágenes es fundamental. En promedio, las imágenes representan cerca de la mitad del tamaño de una página web, por lo que cualquier mejora puede marcar una gran diferencia.
El WebP es un formato de imagen moderno que puede ayudarte a reducir el tamaño de las fotos sin afectar su calidad. La conversión a WebP puede disminuir el tamaño en aproximadamente un 25-35% sin que se note la pérdida de calidad.
¿Qué es WebP y por qué es importante?
En términos de almacenamiento de imágenes para usar en Internet, existen varios formatos de archivo disponibles. Los tres más comunes son PNG, JPEG (o JPG) y GIF. A pesar de su popularidad, cada uno tiene ventajas y desventajas:
- JPEG: Ideal para imágenes con muchos detalles y colores, como fotografías. Sin embargo, suelen tener un tamaño grande y no se comprimen fácilmente.
- PNG: Perfecto para imágenes con pocos datos, como logotipos, capturas de pantalla o iconos. Ofrecen buena calidad de compresión y transparencia, pero no son adecuados para fotos.
- GIF: Excelente para animaciones, pero no para guardar imágenes estáticas.
El WebP es un formato desarrollado por Google que permite mostrar imágenes en la web con calidad similar a los formatos existentes, pero con un tamaño de archivo menor.
Para lograr esto, WebP ofrece opciones de compresión con y sin pérdida. La última permite ahorrar más datos, mientras que la primera reduce aún más el tamaño de los archivos.
Según Google, las imágenes WebP tienen un tamaño:
- 25-34% más pequeño que imágenes JPEG comparables.
- 26% más pequeño en comparación con PNG.
Por esta razón, si estás optimizando tu sitio usando PageSpeed Insights, una de las recomendaciones es utilizar imágenes de última generación como WebP.
¿Cómo funciona la compresión en WebP?
WebP soporta compresión con y sin pérdida, por lo que la reducción exacta del tamaño del archivo dependerá del tipo de compresión utilizada.
- Compresión con pérdida de WebP: WebP emplea «codificación predictiva» para reducir el tamaño del archivo. Esta codificación usa los valores de los píxeles cercanos en una imagen para predecir valores y luego codifica solo la diferencia. Se basa en la codificación de fotogramas clave VP8.
- Compresión sin pérdida de WebP: WebP utiliza un conjunto de métodos más complejo desarrollado por el equipo responsable de WebP. La compresión sin pérdida de WebP emplea fragmentos de imágenes previamente vistas para reconstruir nuevos píxeles con precisión. También puede usar una paleta local si no se encuentra una coincidencia adecuada.
Si deseas aprender más sobre las técnicas de compresión WebP, este artículo es un buen punto de partida.
¿Cómo WebP ayuda a cargar WordPress más rápido?
El objetivo principal de este formato de imagen es ofrecer una opción para un tamaño de imagen menor en la web, logrando una carga de página más rápida.
Los archivos de imagen ocupan espacio, independientemente del formato en que se guarden. A medida que se agregan más imágenes y archivos multimedia al sitio, aumenta la probabilidad de que la velocidad de carga se vea afectada. Mantener una carga de página rápida es extremadamente importante, ya que los sitios lentos pueden alejar a los visitantes antes de que vean lo que ofreces. Además, Google considera la velocidad de carga de un sitio web como un factor de clasificación.
La compresión de imágenes las hace más pequeñas y eficientes, pero a menudo resulta en una pérdida de calidad. En general, cuanto más se comprime una imagen, peor empieza a verse. El formato de archivo específico influye en la intensidad de este efecto.
Las imágenes guardadas en formato WebP pueden ser significativamente más pequeñas que las JPEG y PNG de la misma calidad. Las imágenes WebP sin pérdidas funcionan como reemplazo de PNG y los archivos son aproximadamente un 26% más pequeños. La compresión con pérdida de imágenes WebP, por otro lado, es aproximadamente un 25-34% más pequeña que JPEG.
Es importante mencionar que ambos tipos de compresión en WebP mantienen la transparencia. JPEG no admite la transparencia como característica, pero WebP sí admite la compresión con pérdida.
Para que las imágenes WebP funcionen, el navegador web del usuario debe ser compatible.
Las imágenes WebP son compatibles con casi todos los navegadores, como:
- Chrome
- Firefox
- Edge
- Opera
- Safari: tiene soporte parcial para WebP ya que el requisito es usar macOS 11 Big Sur y versiones posteriores.
- Internet Explorer: no es compatible con WebP (pero Edge es compatible con WebP porque está basado en Chromium).
Puedes consultar los datos actualizados aquí: caniuse.com/webp
Creación de imágenes WebP
Las herramientas de edición de imágenes, como Photoshop, admiten la exportación WebP. También puedes utilizar herramientas basadas en la web como Squoosh. Una vez que guardes tus imágenes como WebP, podrás subirlas a WordPress y usarlas como cualquier otra imagen.
Uso de WebP en WordPress
Las imágenes WebP funcionan como cualquier otra imagen en WordPress con algunas observaciones adicionales. WebP admite compresión con pérdida y sin pérdida, así como formato animado y transparencia.
En WordPress, el formato WebP sin pérdidas solo es compatible cuando el servidor de hosting utiliza Imagick, mientras que LibGD agrega compatibilidad con WebP. Además, los formatos alfa y animado aún no son compatibles con las imágenes redimensionadas (en su lugar, se crean imágenes con pérdida cuando se cargan en estos formatos).
La compatibilidad con WebP en la biblioteca de medios de WordPress requiere que la biblioteca de procesamiento de imágenes del servidor web (WordPress admite tanto Imagick como LibGD) admita el formato WebP.
¿Cómo puedo saber si mi servidor tiene estas librerías?
Si tu servidor web no es compatible con WebP, verás un mensaje de error cuando intentes cargar una imagen en formato WebP.
Si la mayoría de tus visitantes utilizan navegadores no compatibles (como IE11), es mejor evitar el uso de imágenes WebP. WordPress planea usar WebP como formato de imagen predeterminado en el futuro, y al cargar PNG/JPG, se convertirán automáticamente a WebP.
WebP es un formato de archivo de imagen que tiene el potencial de acelerar tu sitio web al reducir el tamaño de las imágenes incluso más que el uso de archivos PNG o JPEG comprimidos. WebP ofrece compresión con pérdida y sin pérdida, un tamaño de archivo más pequeño y una calidad comparable a PNG/JPG.
Aunque no todos los navegadores son compatibles con este formato, la mayoría de ellos lo son, y su implementación en WordPress se realizó desde la versión 5.8. Considera usar imágenes WebP para mejorar la velocidad de carga de tu sitio web y ofrecer una mejor experiencia a tus visitantes.
Plugins para convertir las imágenes a Webp
Si tienes una web desde hace muchos años seguramente tienes imágenes JPG o PNG que debería comenzar a convertir. A continuación te dejo una lista con los plugins que puedes utilizar para ello:
- EWWW Image Optimizer: Este plugin optimiza automáticamente las imágenes de tu sitio al convertirlas al formato WebP. Además, ofrece compresión sin pérdida y con pérdida, lo que te permite elegir la calidad de las imágenes y el nivel de compresión. EWWW Image Optimizer también es compatible con la mayoría de los servicios de almacenamiento en la nube y CDN.
- ShortPixel Image Optimizer: ShortPixel es un plugin de optimización de imágenes fácil de usar que ofrece compresión con y sin pérdida para tus imágenes, incluida la conversión a WebP. También proporciona compatibilidad con CDN y opciones de redimensionamiento de imágenes. ShortPixel es un servicio freemium que ofrece una cantidad limitada de optimizaciones de imágenes gratuitas por mes, con la opción de comprar paquetes adicionales según tus necesidades.
- Imagify: Imagify es otro plugin popular para optimizar imágenes en WordPress, desarrollado por el equipo detrás de WP Rocket, un conocido plugin de optimización de rendimiento. Imagify convierte automáticamente las imágenes a WebP y ofrece tres niveles de compresión: Normal, Agresivo y Ultra. También es compatible con WooCommerce y NextGEN Gallery, lo que lo convierte en una excelente opción para tiendas en línea y sitios con galerías de imágenes.
Estos plugins no solo convierten tus imágenes a WebP, sino que también ayudan a optimizar el rendimiento de tu sitio web al reducir el tamaño de las imágenes y mejorar los tiempos de carga de las páginas.
