¡Qué bueno que te has hecho la pregunta! Vamos a darle contestación en este posts. ¿Qué es el formato WebP?
Existen diversos formatos de imágenes, de los cuales hablaremos en un momento. WebP es un novedoso formato que viene a sumarse a los ya existentes mejorando ampliamente las características de todos los anteriores.
Esto tiene repercusión directa en la velocidad de carga de las páginas web, permitiendo que carguen mucho más rápido que otras similares, pero con imágenes en los otros formatos.
Pero dejemos el rodeo y vamos a revisar los detalles.
Tabla de contenido
Formatos de imágenes
A los efectos de la web, existen básicamente 4 formatos de imágenes que son los más utilizados para el diseño de las páginas:
Formato de imagen GIF
Uno de los primeros formatos existentes. Fue creado por CompuServe en 1987, y su nombre es el acrónimo de Graphics Interchange Format (o Formato de Intercambio Gráfico).
Las imágenes GIF se hicieron populares rápidamente por soportar animación y ser de muy pequeño tamaño. Su algoritmo de codificación permitió reducir el tamaño de las imágenes usadas hasta entonces, desplazándolas.
Sin embargo, tienen la gran limitante de que solo soportan 256 colores. Esto no era importante cuando aparecieron, pues la mayoría de las imágenes usada soportaban 8 a 16 colores y eran estáticas.
Pero, sin duda, es algo “grave” en un mundo que maneja 16 millones de colores, resoluciones HD, 2k y 4K, pantallas retina y otras tecnologías similares.
Imagen GIF animada
Tamaño: 15,4 Kb
Dimensiones: 294 × 142 pixeles
Formato de imagen JPEG
Formato de imágenes nacido en 1991. Su nombre es el acrónimo de Joint Photographic Experts Group, el comité de expertos que lo creó.
La ventaja fundamental que vino a representar JPEG sobre GIF estuvo dada por la posibilidad de usar 16 millones de colores en las imágenes.
Sin embargo, el algoritmo del formato hace que se pierda algo de calidad en las mismas (en comparación con RAW y TIFF, por ejemplo, que no se pueden usar en la web por su gran tamaño). Fue el costo que hubo que pagar a cambio de tener imágenes de menor tamaño, que cargan más rápido.
Imagen JPG
Tamaño: 191,9 kB
Dimensiones: 1358 × 887 pixeles
(Puedes hacer click sobre la imagen para apreciarla en detalle y descargarla para confirmar su tamaño y formato)
Formato de imagen PNG
El nombre de este formato nacido en 1997 es el acrónimo de Portable Network Graphics.
Las imágenes PNG muestran también 16 millones de colores con mejor calidad que las JPEG e incorporaron un elemento faltante en estas: la transparencia. Sin embargo, esto se logró a expensas de tener un mayor tamaño. Son más vistosas, pero ralentizan la carga de los sitios web.
Imagen PNG (Original)
Tamaño: 2,0 Mb
Dimensiones: 1358 × 887 pixeles
(Puedes hacer click sobre la imagen para apreciarla en detalle y descargarla para confirmar su tamaño y formato)
Formato de imagen SVG
Este formato nace en 1999 de la mano del W3C y su nombre es acrónimo de Scalable Vector Graphics.
La característica fundamental de SVG es que admite transparencias y es utilizado para elaborar imágenes vectoriales bidimensionales. Como resultado, no importa el tamaño al cual se escalen, su calidad no cambia pues realmente son vectores.
Son imágenes elaboradas con código (como las páginas web), por lo que un conocedor de este puede hacerlas con un simple editor de texto. Otra opción para generarlas es por medio de programas profesionales de edición vectorial. De allí que no sea muy común su uso.
Imagen SVG
Tamaño: 78 Kb
(Puedes hacer click sobre las imágenes para compararlas y agrandarlas todo lo que puedas para verificar que no se pixelan)
Formato de imagen WebP
Finalmente llegamos a las imágenes que nos trajeron hasta acá, y vamos a responder tu inquietud: Qué son las imágenes WebP.
Este formato de imágenes nació en 2010 impulsado por Google y reúne lo mejor de todos los formatos anteriores:
- Tamaño reducido (con o sin pérdida de calidad) como los JPEG.
- Transparencias, como PNG.
- Animaciones, como GIF.
Imagen WebP
Tamaño: 129,6 kB
Dimensiones: 1358 × 887 pixeles
(Puedes hacer click sobre la imagen para apreciarla en detalle y descargarla para confirmar su tamaño y formato)
De forma intencional hemos utilizado en los 3 formatos principales (JPEG, PNG Y WebP) la misma imagen de la cascada.
Si haces click sobre ellas y las amplías podrás comprobar la calidad de las mismas. Si las descargas podrás verificar la diferencia significativa de tamaño, sobre todo en comparación con PNG.
WebP vs JPG
Si nos ponemos a comparar entre una imagen WebP vs JPG con lo ya mencionado anteriormente tenemos que:
| Propiedades | JPG | WebP |
| Transparencia | No | Si |
| Compresión sin perdida | Si | Si |
| Compresión con perdida | Si | Si |
| Animaciones | No | Si |
| Firefox | Si | Si |
| Google Chrome | Si | Si |
| Edge | Si | Si |
| Safari | Si | No |
| Opera | Si | Si |
Aunque sabemos que WebP comprime mejor que JPG, actualmente WebP cuenta con la desventaja que no está disponible en todos los navegadores importantes. Para superar la barrera de la compatibilidad actualmente existen opciones de que si una web cuenta con los 2 formatos se pueda configurar para que muestre JPG cuando WebP no es soportado.
De resto podemos decir que WebP es un formato superior que JPG.
Imágenes WebP y el SEO
Quizá te estés preguntando, como hicimos nosotros: “Y si este formato es tan bueno, ¿por qué no se ha extendido más su uso?”.
La pregunta es muy válida. La respuesta es sencilla: el avance de las tecnologías web es tan abrumador. Desde 2010, fue apenas hasta mediados de 2020 cuando comenzó formalmente a darse soporte al formato en los navegadores que no lo hacían.
Al momento de escribir este post, solo Safari lo soporta parcialmente. Todos los demás ya tienen soporte para WebP al 100%.
De lo que puedes tener seguridad es de que este formato llegó para quedarse. Su implementación tiene incidencia directa en la mejora de la experiencia de usuario.
Las imágenes WebP garantizan una carga más rápida de la totalidad de los sitios web que las utilizan, en comparación con otros similares que no lo hacen. Y ya sabemos que esto incide en el posicionamiento de los sitios web.
Es por ello también que WebP es el formato al cual se convierten las imágenes de tu sitio cuando aplicas el plugin Femora Compress. Vas lograr la compresión de algunas imágenes en más de un 80%, sin perder su calidad.
Lo mejor de todo es que, mientras las tecnologías se adecuan, Femora Compress permite a los navegadores presentar las imágenes en el formato que soporten. Aquellos que soportan WebP, muestran tus imágenes en él.