Qué es WebP y por qué es mejor que PNG, JPG y GIF

Estamos rodeados de imágenes. Todos los días hacemos, guardamos, enviamos fotografías, y seguro que te has preguntado más de una vez la diferencia entre los distintos tipos de formatos.

portada que es webp

Imagen de Pixabay - © Jarmoluk

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.

Si eres de los que trabaja mucho con imágenes o simplemente quieres conocer este nuevo formato desarrollado por Google, ¡sigue leyendo!

Qué es WebP y para qué sirve

WebP es un nuevo formato de compresión de imagen que está causando sensación, sobre todo, entre los desarrolladores web

Este formato empezó a desarrollarse por On2 Tecnologies y que Google adquirió en el año 2010 y que empezó a probar en Chrome.

Por tanto, puedes imaginar que es el formato recomendado para el desarrollo de sitios web (está recomendado por su herramienta PageSpeed Insights de optimización web).

WebP es de código abierto, por lo que puede ser utilizado por todo el mundo, y consigue reducir el peso de la imagen por encima del 30% respecto a la misma imagen en otros formatos como PNG o JPEG sin perder calidad.

Uno de sus puntos fuertes es que soporta tanto la compresión con pérdidas como sin ella, y es un formato derivado del estándar de vídeo VP8.

En definitiva, este formato desarrollado por Google consigue disminuir el tiempo de carga de las imágenes en Internet y reducir su tamaño.

Por eso veíamos antes que es el formato recomendado para las imágenes de las páginas webs, porque cuando navegas con el móvil produce un ahorro grande en el ancho de banda y carga de forma más rápida la web.

Pero esto no se queda aquí. 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.

¿Qué es la compresión “con pérdidas”?

Normalmente, la información digital tiene que ser 100% exacta para que pueda funcionar. En un documento Word bastaría con manipular un solo bit para cambiar el contenido original del documento o incluso para hacer el fichero inservible.

Sin embargo, hay cierta información que se puede manipular profundamente y que a ojos del usuario no cambia. Eso sucede en la práctica, sobre todo, con el audio, las imágenes digitales y el vídeo.

Las imágenes, por ejemplo, suele contener muchas zonas con matices de color tan sutiles que un humano no las puede distinguir. Si juntamos estas zonas en una única más grande con un color único, hemos simplificado la imagen y reducida la información necesaria para representarla.

ejemplo foto
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.

Es importante tener claro que la compresión y la introducción de pérdidas son dos cosas totalmente independientes:

  • La introducción de pérdidas simplifica y reduce la información en sí, la información cambia. Podemos ser más “brutos” simplificando la información o más sutiles. A más pérdidas, menos información, pero hay un techo, cuando se noten las pérdidas demasiado.
  • En la compresión, un algoritmo detecta redundancias en la representación de la información y las elimina. Pero la información representada es exactamente la misma, simplemente se hace más eficiente la manera de describirla.

En el audio, vídeo y las imágenes estáticas suele haber un nivel muy alto de redundancia, por eso se consiguen grandes resultados comprimiendo esta información, pero, además, toleran muy bien las pérdidas y, si no nos pasamos, podemos reducir aún mucho más aplicando pérdidas.

Eso sí, cuando te pasas con las pérdidas se producirán resultados muy desagradables: un audio que percibes de mala calidad, como el de un teléfono antiguo, imágenes pixeladas o con “artefactos” extraños, etc.

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

Por eso, se puede comprimir siempre al máximo, pero al aplicar pérdidas hay que tener cuidado porque llegado un momento podemos afectar gravemente a la calidad percibida en el resultado.

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.

¿Qué diferencias tiene con GIF, JPG y PNG?

En el formato GIF las imágenes se comprimen sin pérdida de calidad, pero tiene una paleta limitada en 256 colores. Se usa en gráficos con pocos colores y sobre todo en secuencia de imágenes, uso por el que se suele conocer a este formato.

El formato JPG es el formato estándar de las fotografías, ya que reproduce muy bien los colores y las imágenes con sombra. Admite distintos niveles de compresión, en la que a más menor espacio tenemos una carga más rápida.

Este formato es el más usado en Internet porque, como acabamos de ver, podemos ahorrar mucho espacio gracias a su función de compresión con pérdidas. Estamos perdiendo detalles de la fotografía, pero a cambio ahorramos tiempo de carga.

El formato PNG tiene dos versiones: 8 y 24 Bits. El primero es muy similar al formato GIF, y el segundo reproduce de misma manera los colores que el JPG. El PNG comprime sin pérdidas, y se utiliza principalmente cuando no tenemos problema en tener un archivo muy grande, en logos o en imágenes con transparencia.

Finalmente, formato WebP compite directamente con JPG, ya que como hemos visto este último es el más utilizado para las imágenes de Internet, y Google ha desarrollado el formato WebP para optimizar este proceso.

Gracias a la capacidad de compresión sin pérdida del WebP, podemos subir imágenes a Internet, pero sin pérdida de calidad, además de hacerlo con el ahorro de espacio que suponía la compresión con pérdida del formato JPG.

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

Si comparamos GIF con WebP este vuelve a salir mejor parado, ya que aumenta la compresión sin perder calidad, pero con el factor en contra de que al ser un formato relativamente nuevo no todos los navegadores van a soportar este formato.

Cómo descargar y guardar una imagen WebP

Para guardar una imagen de Internet en formato WebP hay varios métodos, pero el más sencillo de todos es activando 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”.

webp extension ejemplo
Haz clic en "Añadir a Chrome".

Confirma la acción haciendo clic en “Añadir la extensión”.

webp extension
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.

Ves que aparece una nueva opción de “Save as type”, y a su vez un menú desplegable desde el que puedes seleccionar el formato en el que quieres descargar la imagen.

guardar webp
Haz clic en la opción de WebP.

Cómo convertir o pasar una imagen WebP a JPEG o PNG

Como en el caso anterior, hay varios métodos para guardar una imagen WebP en otros formatos, como JPEG o PNG.

Vamos a ver dos: con una herramienta online (hay varias) y desde tu PC

Cómo convertir formatos de imágenes online

El convertidor online que te voy a recomendar aquí es Convertio, pero hay muchos y te animo a que pruebes otros.

Desde su web puedes seleccionar la o las imágenes que quieras convertir en JPEG y hacer clic en el botón con forma de carpeta y lupa.

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

Selecciona los archivos y haz clic en “Abrir”.

Fíjate que justo al lado puedes seleccionar los formatos que quieres para tus imágenes.

guardar webp convertio
Cuando lo tengas, haz clic en "Convertir".

Una vez que hayas seleccionado las imágenes verás esta nueva pantalla. Si está todo correcto haz clic en “Convertir” y el sitio web empezará a convertir. Cuando haya finalizado el proceso haz clic en “Descargar”.

convertir webp
Haz clic en "Descargar" cuando el proceso haya finalizado.

Cómo convertir formatos de imágenes en tu ordenador local

Si prefieres convertir imágenes de forma local y no mediante páginas de Internet, la mejor opción es mediante el programa Pain.Net.

Este software es un editor de imágenes exclusivo para Windows, por lo que si tienes otro sistema operativo no podrás realizarlo.

La única desventaja de este método es debes convertir las imágenes de una en una, pero si no son muchas no tendrás problema.

Una vez que lo hayas descargado (que puedes hacer desde esta página), abre el programa. Verás una pantalla como ésta:

painnet
Este es el "lienzo en blanco" de Pain.net.

Ahora, copia la imagen que quieras convertir a formato WebP y pégala. Puedes hacerlo de una forma fácil copiando la imagen con tu teclado, presionando los botones de Ctrl + C, y pegándolo en Pain.net mediante Ctrl + V.

guardar paint webp
Puedes guardar la imagen con Ctrl + S.

Una vez que lo tengas copiado, haz clic en la opción de la barra superior, donde pone “Archivo” y selecciona la opción de “Guardar”. También puedes guardar la imagen mediante Ctrl + S.

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

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

Elige la ruta donde quieres guardar la imagen, el nombre, y lo más importante, en la barra inferior de formato debes hacer clic en elegir “WebP” en el menú desplegable.

¿Te gustaría leer más sobre esta temática? Busca aquí:

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 :)


6 comentarios en «Qué es WebP y por qué es mejor que PNG, JPG y GIF»

  1. Hola, muchas gracias por el artículo. Está genial.
    Yo me he encontrado un problema, a ver si también te ha pasado y me puedes ayudar.
    Con imágenes el formato WEBP trabaja muy bien, pero me he encontrado con el problema de la compresión WEBP entre colores sólidos, por ejemplo un gráfico. He visto que al realizar la conversión, justo la unión entre según qué colores, no se ven bien definidos y difumina la unión. Por ejemplo entre amarillos y rojos. Si tienes dos barras de color una al lado de otra, el Webp, las difumina y da la sensación de que la imagen es borrosa.
    He utilizado varios conversores online y todos me generan lo mismo.
    ¿Te has encontrado con esto?

    Un saludo y muchas gracias.

    Responder
    • Hola Cristian,

      Sí, es normal que pasen cosas así. Normalmente, la clave está en el grado de compresión. Cuánto más % de compresión metes, más sufrírá la calidad de la imagen y más probabilidades de que te salgan efectos raros como éste.

      ¡Un saludo!
      Berto

      Responder
  2. ¿Cual sería entonces el mejor formato y tamaño de la imagen para subir a wordpress? Yo las estaba subiendo ya siempre en webp pero al ver ahora que no son aptas para todos los navegadores ya voy perdido.

    Responder
    • Hola Juan.

      Al ser un formato relativamente nuevo es cierto que algunos navegadores no están soportándolo, pero poco a poco irán haciéndolo. Nosotros en nuestro blog utilizamos este formato por todas las ventajas que te contaba.

      Un saludo,
      Lucía

      Responder
  3. Entonces... ¿Se podrían subir las fotos a la web como webp? ¿O aún existen navegadores incompatibles? La solución que había visto hasta ahora era cargarlas como png o jpg y tener un plugin que genere y sirva copias en webp para ofrecerlas en lugar de las originales a los navegadores que las soporte.

    Responder
    • Hola Taisa,

      Sí, se podrían subir como WebP y todavía existen navegadores incompatibles con este formato (aunque se estima que un 80% del mercado es compatible con este formato).

      Un saludo,
      Lucía

      Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).