¿Ya estás familiarizado con el término WebP? Se trata de un nuevo formato de imágenes desarrollado por Google que ofrece imágenes de mucho menor peso, afectando muy poco o nada la calidad de las imágenes.
En este artículo indagaremos un poco más en por qué y cómo pasar de formatos tracionales (PNG, JPG, JPEG, etc.) a WebP como forma de optimizar el tiempo de carga y rendimiento de tu sitio web.
Optimizar tu sitio WordPress puede ser muy pesado a veces.
Si tienes una web que has desarrollado tú mismo y tienes conocimientos técnicos, el tema puede ser más manejable.
Pero entre un hosting compartido barato, el tema de WordPress que ha desarrollado otro y falta de conocimiento de qué aspectos tener en cuenta para optimizar el contenido que subes a tu web, el rendimiento se puede ver muy mermado.
Y ahora, te hablan de un formato que ni conocías y tienes que ver cómo aprovecharlo para, como en las carreras, rascar unas décimas de segundo en ese tiempo de carga.
Pero veámoslo como lo que es, una gran oportunidad para una forma de optimización con baja complejidad.
Los límites de la compresión de imágenes JPEG, PNG o GIF
Compresión de JPEG
En el caso de JPEG, es un formato muy “amable”, porque está ampliamente extendido, es muy exportable, mantienen muy buena calidad, color, lo soportan todos los navegadores y, en general, estamos muy acostumbrados a trabajar con él.
Pero como desventaja, sobre todo de cara a la compresión, es un formato que requiere mucho peso y tiene muchas limitaciones vinculadas a la pérdida de calidad. Es decir, la compresión está muy estrictamente relacionada al impacto que tendrá visualmente.
La compresión de JPEG es lo que llamamos “lossy“, que supone la pérdida real de ciertos elementos de contenido en la página.
Esto, por supuesto, se traduce en pérdida de calidad visual, algo que en ciertas páginas web puede ser inaceptable si la imagen es muy importante (imagina la web de un diseñador, un artista, una galería, etc).
Compresión de PNG
Si comparamos JPEG y PNG, ésta última tiene una gran ventaja para quienes necesitan conservar al máximo la calidad de la imagen, ya que PNG funciona con múltiples capas de imágenes y en general, hay más de dónde comprimir sin tocar los elementos que percibimos.
Es decir, es un tipo de compresión “lossless“. Las imágenes digitales comprimidas con este estándar pueden conservar todos sus datos, detalles y calidad independientemente de las veces que se codifique o decodifique.
Aun así, en general PNG es un formato que generalmente requiere más espacio y memoria, y por tanto, aunque se comprima bien, habrá un límite de hasta dónde se puede llegar. Por lo tanto, se recomienda más para imágenes que no requieren demasiada información, como logos, elementos gráficos, pantallas de interfaz, etc.
Compresión de GIF
El caso de GIF ni siquiera merece la pena detallarlo, es un formato genial para animaciones, pero no para gran calidad ni imágenes estáticas.
El nacimiendo de WebP
El propósito de WebP es precisamente el rendimiento web. Es un formato desarrollado por Google para mantener el mismo nivel (o casi) visual y calidad que el de los formatos tradicionales, pero con mucho menor peso.
WebP permite compresión en ambos estándares, tanto lossy como lossless, así tienes la flexibilidad de elegir entre conservar más datos y más calidad como optimizar al máximo aunque implique una calidad visual menor.
Comparativa de WebP vs. JPEG y PNG
Según un estudio de Google comparando formatos, el formato WebP es, de media:
- Un 26% más pequeño que PNG
- Entre un 25% y un 34% más pequeño de JPEG
En la WebP Gallery se pueden ver comparativas entre formatos como JPEG vs. WebP
Ventajas de usar WebP en tu página web
Llegados a este punto, creo que las ventajas son ya evidentes, pero en resumen:
Las imágenes ocupan espacio y suponen peso e incremento en el tiempo de carga de tu página, hagas lo que hagas.
Con los formatos tradicionales, ocuparás más espacio y sí, aunque puedes comprimir, siempre tendrán un coste importante. A lo mejor comprimiendo un JPEG o un PNG, con su correspondiente pérdida de calidad, puedas llegar al mismo peso que una WebP sin compresión.
El punto de la relación calidad/peso creo que ya está claro. Pero adicionalmente, WebP también soporta transparencias, tal y como lo hace PNG. Un factor muy útil de cara a web en algunos casos.
Desventajas de usar WebP en tu página web
Como siempre, sabemos que no todo es perfecto y, al ser un nuevo formato, la desventaja más relevante es que no todos los navegadores soportan WebP.
Probablemente esto se vaya solucionando a medida que vayan evolucionando los navegadores, especialmente si este formato termina extendiéndose.
Pero de momento, el único navegador destacable por el volumen de usuarios que representa sería Safari, así que aquellos que usen el navegador nativo de los dispositivos Apple (4% de cuota de mercado en España en 2019) no verían las imágenes en tu sitio web.
Os dejo esta interesante gráfica de WP Rocket detallando los navegadores que soportan (o no) WebP a fecha de junio 2019 (no he encontrado una más reciente).
Cómo usar WebP en WordPress
Me gustaría decirte que es tan simple como crear imágenes en formato WebP y subirlas a tu galería de imágenes de WordPress sin más.
Lamentablemente, al menos hasta esta fecha, WebP no es un formato soportado por defecto en WordPress.
Pero no temas, que como siempre, la flexibilidad de WordPress y la cantidad de desarrolladores trabajando en plugins, permite que haya alternativas.
Optimole
Optimole es un optimizador de imágenes freemium que la verdad está muy bien. Optimiza las imágenes automáticamente, permite servirlas a través de un CDN y, por supuesto, convierte las imágenes automáticamente a WebP si el navegador del usuario lo soporta.
Esto quiere decir que tú puedes seguir subiendo imágenes en otros formatos y, cuando sea posible, mostrará el formato WebP y, cuando no, mostrará PNG o lo que hayas subido.
WebP Express
WebP es un plugin completamente gratuito que funciona muy bien también y es muy simple. Es un poco más básico en términos de funcionalidades en comparación con Optimole, pero hace perfectamente lo que promete; automáticamente convertir imágenes a WebP y servirlas cuando el navegador las soporta.
Así que, al igual que con Optimole, puedes aprovechar las ventajas de WebP siempre que sea posible y, por ejemplo en el caso de Safari, seguir sirviendo JPEG o PNG.
Hay más alternativas y seguro se irán haciendo más habituales, pero seguramente con esto puedas encontrar buenas soluciones.
Esperamos que te sea de utilidad.