¿Qué es el formato WebP? vs otros 4 FORMATOS de imágenes

¡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.

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:

1. 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.

Luces leds de 7 colores tipo de formato web
Fuente: Pixabay.com

Imagen GIF animada
Tamaño: 15,4 Kb
Dimensiones: 294 × 142 pixeles

2. 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.

Cascada en medio de bosque formato de imagen jpeg
Fuente: modificada del PNG original de PNGEgg.com

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)

3. 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.

Cascada en medio de bosque
Fuente: PNGEgg.com

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)

4. 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.

Tomate formatos de imagenes para la web

Tomate formatos de imagenes para la web
Fuente: Wikimedia.org

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)

Código que genera imagen Tomate.svg para ser parte de formatos de imagenes para paginas web
Parte final del código de 2021 líneas que genera la imagen tomate.svg

Imágenes de formato 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:

  1. Tamaño reducido (con o sin pérdida de calidad) como los JPEG.
  2. Transparencias, como PNG.
  3. Animaciones, como GIF.
Cascada en medio de bosque formato webp
Fuente: modificada del PNG original de PNGEgg.com

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.

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.

Deja un comentario