El formato WebP: qué es y cómo convertir Webp a JPG

Las imágenes nos acompañan en nuestro día a día, y más cuando hablamos de las imágenes de Internet.

Imagen de Pixabay - © Free-Photos

Si eres de los que trabaja mucho con imágenes y lo conoces, o simplemente quieres profundizar en el conocimiento de este formato, este post es para ti.

En este post repasamos los conceptos básicos de los formatos de siempre y conocemos en detalle el nuevo formato WebP, junto a las ventajas que tiene respecto a sus competidores.

En este post te contamos qué es WebP, para qué sirve, además de cómo trabajar con este nuevo formato de Google.

El formato WebP, definición y usos

En este apartado vemos en profundidad qué es el formato WebP, además de cuándo y cómo podemos usarlo.

Qué es WebP y que diferencias tiene con GIF, JPG y PNG

WebP es un nuevo formato de compresión de imagen, de código abierto, que reduce el peso de la imagen más de un 30%, sin perder calidad, respecto a esa imagen en otros formatos, como PNG o JPGE.

Además, soporta la comprensión con y sin pérdidas, lo que nos permite elegir la manera que más nos guste para la compresión.

Fue desarrollado inicialmente por On2 Tecnologies, pero viendo el potencial de este formato de imagen Google decidió adquirir en el año 2010. Después de esto comenzó a probar WebP en su navegador Chrome.

Para conocer un poco más en detalle hasta dónde llegan los beneficios de su uso, vamos a repasar los formatos de imagen más utilizados en Internet y su comparación con WebP.

El formato GIF tiene una paleta limitada en 256 colores, por lo que se usa en gráficos que contienen pocos y, sobre todo, en secuencia de imágenes (uso por el que es más conocido).

Las imágenes se comprimen sin pérdida de calidad.

La principal diferencia que encontramos respecto a WebP es que este último aumenta la compresión sin perder calidad.

Aun así, debes tener en cuenta que al ser un formato relativamente nuevo algunos navegadores pueden mostrar ciertas incompatibilidades.

El formato PNG tiene dos versiones, de 8 (similar al formato GIF) y 24 Bits. El formato de 24 Bits reproduce de la misma manera que JPG los colores.

La compresión que produce es sin pérdidas y su uso principal es cuando no tenemos problema en tener un archivo muy grande, en logos o en imágenes con transparencia.

El formato más conocido y usado en Internet es JPG. Este reproduce muy bien los colores y las imágenes que tienen sombras, por eso es el estándar de las fotografías.

La compresión puede ser a distintos niveles, y gracias a la compresión con pérdidas podemos almacenar en menor espacio y tener una carga más rápida. Eso sí, al ser compresión con pérdida vamos a perder detalles de la fotografía.

webp ejemplo foto
En este ejemplo podemos ver como una imagen la misma (o más) calidad puede tener mayor compresión en formato WebP.

Comparando el formato WebP con JPG, encontramos numerosas similitudes. De hecho, son competidores directos, ya que JPG es el formato más utilizado en web y Google quiere sustituirlo por WebP.

Gracias a la comprensión sin pérdida de WebP, podemos conseguir un ahorro considerable de espacio al subir imágenes a Internet, respecto a lo conseguíamos con la compresión con pérdida de JPG.

Para qué sirve el formato WebP

Con lo que hemos visto hasta ahora, podemos hacernos una idea de lo que conseguimos cuando utilizamos este formato, pero el campo en el que destaca de manera sobresaliente en el desarrollo web.

Esto es debido a que, como te he contado antes, fue Google el que adquirió este formato en el año 2010 y comenzó a probarlo en sus navegadores.

Por eso, su herramienta PageSpeed Insights, que mide la velocidad de carga de un sitio web recomienda el uso de este formato.

En definitiva, este formato desarrollado por Google consigue disminuir el tiempo de carga de las imágenes en Internet y reducir su tamaño, y derivado de esto, usando el formato WebP estamos mejorando la optimización de nuestro sitio web.

Si necesitas un hosting para tu web o tu blog, ¡actúa ya!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

Asimismo, conseguimos grandes ventajas cuando navegamos en sitios webs con este formato de imagen ya que supone un ahorro grande en el ancho de banda.

El formato WebP también pretende competir contra el formato GIF para las animaciones, combinando la alta compresión de la que hablábamos con el canal alfa de ocho Bits y la profundidad del color de 24 Bits.

Diferencias entre la comprensión con y sin pérdidas

Para que la información digital funcione debe ser 100% exacta. En un documento de Power Point tan solo tendríamos que modificar un solo bit para que el archivo fuera distinto al original (o en los peores casos, hacerlo inservible).

No obstante, hay cierta información que sí se puede modificar en gran medida y nuestro ojo no va a notar el cambio, como por ejemplo con el audio, el vídeo y las imágenes digitales.

Por ejemplo, estas últimas suelen tener ciertas zonas de la imagen con matices de color tan sutiles que un humano no las puede distinguir. Por eso, si juntamos estas zonas en una única más grande con un color único, la imagen se simplifica y queda reducida a la información necesaria para representarla.

webp ejemplo color
En esta imagen se han resaltado las zonas con cambios de color tan sutiles que se podrían unificar con un solo color sin que lo note el usuario.

De esto que acabamos de ver surgen las técnicas de compresión de imagen.

Pero antes de avanzar, es importante tener claro que la compresión y la introducción de pérdidas son dos cosas totalmente independientes:

  • Compresión: algoritmo detecta redundancias en la representación de la información y las elimina, siendo la información representada la misma, simplemente se hace más eficiente la manera de describirla.
  • Introducción de pérdidas: la información sí sufre cambios. Con las pérdidas se simplifica y reduce la información. A más pérdidas, menos información, pero hay un techo, cuando se noten las pérdidas demasiado.

Por eso, cuantas más zonas con información redundante tenga la imagen, más podremos comprimirla.

Eso sí, debes tener en cuenta que cuando te pasas con las pérdidas se introducen resultados que “estropean” el archivo: un audio que percibes de mala calidad, como el de un teléfono antiguo, imágenes pixeladas o con “artefactos” extraños, etc.

ejemplo compresion
Observa en la imagen de la derecha como han aparecido esos “artefactos” debido a una alta compresión con pérdida.

Por eso, debemos tener siempre cuidado al comprimir el archivo con pérdidas al máximo, para no afectar a la calidad percibida.

El formato WebP comprime sin pérdida imágenes entre un 15% y un 26% más en comparación con PNG, mientras que con pérdida reduce el tamaño de los archivos de imagen entre un 25% y 34%, con la misma calidad que en formato JPEG.

Convertir paso a paso WebP a JPEG o PNG

Es posible que una vez que tengas la imagen en formato WebP quieras convertirla en otros formatos, como JPEG o PNG.

En este apartado vemos dos métodos diferentes para convertir este tipo de archivos, primero de forma online y más tarde desde nuestro ordenador.

¿Cómo convertir a WebP online?

Hoy en día existen numerosos sitios webs especializados en este tipo de conversión, pero en este caso te voy a recomendar Convertio porque tiene una interfaz muy fácil de seguir.

Para convertir una imagen con formato WebP a formato JPEG debes ir a su página principal (a la que puedes acceder desde este enlace) y hacer clic en el botón con forma de carpeta y lupa.

convertio webp
Selecciona para subir los archivos que quieras convertir a WebP.

Selecciona los archivos y haz clic en “Abrir”.

En el botón de al lado puedes seleccionar los formatos que quieres para tus imágenes.

convertir webp
Cuando lo tengas, haz clic en “Convertir”.

Cuando ya tengas seleccionadas las imágenes llegas a la pantalla que ves en el ejemplo. Si el proceso ha ido bien, haz clic en “Convertir” y el sitio web empezará a convertir. Cuando haya finalizado el proceso haz clic en “Descargar”.

webp convertio
Haz clic en “Descargar” cuando el proceso haya finalizado.

Convierte WebP a JPG desde tu ordenador

Una de las formas más sencillas de convertir imágenes WebP en tu ordenador es utilizando el programa Paint.Net.

Eso sí, este software es exclusivo de Windows, por lo que si tienes otro sistema operativo te recomiendo la conversión que analizamos en el siguiente apartado.

También te recomiendo el convertidor online si tienes que convertir muchas imágenes, ya que desde este método debemos ir una a una.

Primero de todo, debes descargarte el programa de Paint.Net, que puedes hacer desde este enlace.

Después, abre el programa y verás una pantalla como esta:

paint ejemplo webp
Este es el “lienzo en blanco” de Pain.net.

Lo siguiente que tenemos que hacer es copiar la imagen que queremos convertir a formato WebP y pégala.

Una forma fácil de hacerlo es copiar la imagen con tu teclado, presionando los botones de Ctrl + C, y pegándolo en Pain.net mediante Ctrl + V.

Cuando lo hayas copiado, haz clic en la opción de la barra superior, donde pone “Archivo” y selecciona la opción de “Guardar”.

Ahora, verás la ventana típica de guardar un documento.

El siguiente paso es elegir la ruta para guardar tu imagen, el nombre que va a llevar, y lo más importante (y necesario para que salga bien), en la barra inferior de formato debes hacer clic en elegir “WebP” en el menú desplegable.

ejemplo guardar paint
Elige el formato en el que quieras guardar la imagen. En este caso es WebP.

¿Cómo puedo guardar una imagen WebP en mi ordenador?

Si quieres guardar una imagen de Internet en formato WebP desde tu ordenador hay varias vías, pero en este apartado hemos elegido el más sencillo, que es activar la extensión “Save image as Type” de Chrome.

Para activarla, ve a la página de Save image as Type y haz clic en “Añadir a Chrome”.

Haz clic en “Añadir la extensión” para confirmar la acción.

save as type
Haz clic en “Save image as…”.

Ahora ve a la imagen que quieres descargar en formato WebP y haz clic en el botón derecho de tu ratón.

Ahora puedes ver una nueva opción de “Save as type”. También, a su lado aparece un menú desplegable en el que puedes elegir el formato en el que vas a descargar la imagen.

Acerca del autor: Lucía Berlanga

Soy colaboradora de este blog. Me he formado en el tratamiento de datos, desde su extracción, al análisis y visualización, y disfruto mucho con el desarrollo web.

He trabajado en diferentes sectores, pero desde hace un tiempo enfocada a diseño y desarrollo web, junto al marketing digital. Por eso, en este blog hablaremos mucho sobre tecnología y SEO, entre otras muchas cosas :)

Deja un comentario