miércoles, 9 de julio de 2025

Imágenes webp

Google creó el formato de archivo WebP para que las imágenes en línea sean más livianas. Gracias a la reducción significativa del tamaño de fotos y gráficos, los sitios web cargan más rápido y ofrecen una mejor experiencia a los usuarios. Descubre más sobre el funcionamiento del formato de archivo WebP.

Conceptualización

☝️ Volver a indice

Google lanzó el formato WebP como parte de su misión de acelerar los tiempos de carga en internet. WebP permite a los sitios web mostrar imágenes de alta calidad, pero con tamaños de archivo mucho más pequeños que los formatos tradicionales como PNG y JPEG.

WebP es un formato de imagen moderno que ofrece una compresión superior con y sin pérdida de calidad para imágenes en la web. Con WebP, los webmasters y desarrolladores web pueden crear imágenes más pequeñas y ricas que aceleran la web.

WebP es un excelente reemplazo para las imágenes JPEG, PNG y GIF. Además, con WebP puedes elegir guardar archivos WebP con o sin pérdida de datos. Esto significa que puedes comprimir las imágenes sin perder datos o perdiendo solo información no esencial. En la compresión sin pérdida, no se pierden datos. La compresión con pérdida reduce el tamaño del archivo, pero a costa de reducir la calidad de la imagen.

Los desarrolladores de Google sugieren que las imágenes WebP sin pérdida de datos pueden ser hasta un 26 % más pequeñas que las PNG.

Puedes saber rápidamente si un archivo es una imagen WebP buscando la extensión .WEBP.

Las imágenes WebP son un 26 % más pequeñas que las PNG. Las imágenes WebP con pérdida son entre un 25% y un 34% más pequeñas que las imágenes JPEG comparables con un índice de calidad SSIM equivalente.

Las imágenes WebP sin pérdida (esto significa que no se pierde calidad al reducir el tamaño del archivo) son un 26 % más pequeñas que sus contrapartes JPEG y PNG. Por otro lado, las imágenes WebP con pérdida son son más pequeñas en el orden de una reducción del 25% al 35% en el tamaño del archivo. Esto reduce los tamaños de página y mejora el rendimiento.

  • YouTube descubrió que cambiar a miniaturas WebP permitió cargar páginas un 10% más rápido.
  • Facebook experimentó una reducción de entre el 25 y el 35% en el tamaño de los archivos JPEG y una reducción del 80% en el tamaño de los archivos PNG cuando cambió a WebP.
    •

WebP sin pérdida admite transparencia (también conocida como canal alfa) con un costo de tan solo el 22% de bytes adicionales. En los casos en que la compresión RGB con pérdida es aceptable, WebP con pérdida también admite transparencia , lo que suele proporcionar archivos tres veces más pequeños que PNG.

Las imágenes WebP animadas admiten formatos con pérdida, sin pérdida y transparencia , lo que permite ofrecer tamaños reducidos en comparación con GIF y APNG.

WebP es un formato de imágenes de nueva generación desarrollado por Google y promete mejorar los tiempos de carga de tu web al emplear un tipo de compresión intraframe basada en predicción por bloques.

Si te preocupa el SEO y el posicionamiento de tu página seguro que has probado alguna herramienta de auditoría como Google Page Speed o Semrush. En estas herramientas seguramente te recomienden que pases tus imágenes a un formato de nueva generación como WebP para reducir los tiempos de carga y mejorar tus resultados en las búsquedas.

En alguna ocasión te hemos hablado de la influencia de los archivos de imagen en la carga de tu web. Hoy te indicaremos un par de trucos para poder trabajar con este tipo de archivos de la forma más sencilla posible. Es importante destacar que aún siendo un formato de archivo que empieza a estar muy estandarizado, no lo soportan todos los navegadores del mercado, por ello, es importante que a la hora de emplearlo lo hagas con cuidado.

Puedes ver la compatibilidad de las imágenes WebP con los navegadores en la página Can I use.

Historial del archivo WebP.

☝️ Volver a indice

El formato WebP es relativamente nuevo, data de 2010. On2 Technologies, una empresa adquirida por Google, creó el concepto original.

Cada archivo WebP consta de datos de imagen VP8 o VP8L. Con el paso de los años, el formato ha evolucionado para adaptarse a los cambios en los hábitos de consumo y las nuevas tendencias digitales. Google añadió compatibilidad con animación y transparencia en 2011, y ahora es compatible con otros navegadores web, además de los productos de Google.

Google Chrome es compatible de forma nativa con WebP y otros navegadores web como Firefox, Edge y Opera. Sin embargo, también recomienda a los desarrolladores y diseñadores web convertir primero los archivos PNG y JPEG a WebP para acelerar la carga de las páginas.

Ventajas e inconvenientes de imágenes WebP

☝️ Volver a indice

Aunque se reduzcan mucho el tamaño de las imágenes y, por lo tanto, te ayude a mejorar los tiempos de carga de tu web, deberías saber que no todo es color de rosa con las imágenes WebP. Te indicamos algunas de las ventajas e inconvenientes más populares para poder tomar una decisión justificada.

Pros

  • Formato muy ligero. Las páginas web que cargan más rápido ofrecen una mejor experiencia de usuario e incluso mejoran el posicionamiento de un sitio web en los motores de búsqueda. Por el contrario, los sitios web con imágenes que cargan lentamente pueden incitar a los usuarios a buscar en otra parte al comprar productos y servicios.
  • El formato WebP es altamente compatible con varios navegadores web, incluidos Google Chrome, Microsoft Edge y Mozilla Firefox.
  • WebP podría liberar espacio de almacenamiento para las empresas al comprimir las imágenes de sus sitios web en tamaños más manejables.
  • Admite animaciones como GIF
  • Admite transparencia como GIF y PNG

Contras

  • El formato de archivo WebP está diseñado principalmente teniendo en cuenta Internet, por lo que puede que no sea útil si usa imágenes sin conexión.
  • No soportado por todos los navegadores. Es posible que algunos navegadores más antiguos, como Internet Explorer, no sean tan eficaces al soportar imágenes WebP, a pesar de la amplia compatibilidad del formato.
  • Perdida de color y nitidez por la compresión​. Incluso una pequeña cantidad de compresión puede reducir la calidad de una imagen, algo que vale la pena tener en cuenta si trabajas con fotógrafos profesionales e imágenes de alta calidad.
  • Tamaño máximo de 16.383 px X 16.383 px

Conversión a PNG o JPG a WebP

☝️ Volver a indice

Empecemos por lo primero. ¿Cómo consigo imágenes WebP? A día de hoy no existe ningún dispositivo (cámara, programa…) que ofrezca imágenes en este formato, por lo que tendrás que convertir tus imágenes PNG o JPG a WebP. Puedes utilizar alguno de estos conversores online:

  • https://ezgif.com/webp-maker
  • https://convertio.co/es/webp-jpg/

Para saber si estás empleando un buen conversor, como mínimo deberías poder indicar el grado de compresión de la imagen. El problema de los conversores online, es que, la conversión suele estar limitada a un número concreto de archivos. Si empleas PhotoShop, puedes realizar la conversión desde el propio programa. PhotoShop, de forma nativa, tampoco permite exportar a WebP, sin embargo, puedes descargarte de su web un plugin para poder exportar imágenes en este formato.

Nuestro consejo es que si vas a convertir todas las imágenes de tu web, crees un droplet para poder automatizar la conversión de un gran número de archivos.

Si eres desarrollador, recuerda que también puedes convertir imagenes a webP a través de Node.js. Necesitarás emplear el módulo imagein y el plugin imagemin-webp.

Uso de imágenes WebP

☝️ Volver a indice

Como comentamos, no todos los navegadores admiten imágenes WebP, tal como puedes observar en la web canIUse. Sin embargo, existe una forma de incluirlas ofreciendo una alternativa para los navegadores que todavía no las soporten.

WebP y HTML

☝️ Volver a indice

Para usar WebP en tu sitio web y que tu web siga funcionando en todos los navegadores que no soporten este nuevo formato, la técnica consiste en ofrecer diferentes opciones de imagen. Para ello, solamente tienes que cambiar el marcado HTML básico de <img> aplicando las etiquetas <picture> y <source> en HTML para servir la versión WebP a navegadores compatibles y la versión JPEG o PNG a navegadores que no lo soporten. Algo más o menos así:

      
          Antes:
    
  <img src="cat.jpg" alt=cat">


           Despues:
    
   <picture>
  <source type="image/webp" srcset="cat.webp">
 
  <img src="cat.jpg" alt="cat">
  </picture>

De esta forma, si tu navegador no soporta el primer source del marcado, irá yendo uno por uno por los declarados a continuación. Puedes poner por último el marcado img con el link a JPG, el cual es soportado por todos los navegadores. Recuerda que puedes emplear media queries para filtrar el uso de una imagen u otra según condiciones concretas, (por ejemplo solo entregar el formato WebP en móviles)

Cuando conviertes imágenes a WebP, tienes la opción de establecer una amplia variedad de parámetros de configuración de compresión, pero para la mayoría de las personas, lo único que debes tener en cuenta es la configuración de calidad. Puedes especificar un nivel de calidad de 0 (peor) a 100 (mejor). Vale la pena probarlo y descubrir cuál es el nivel correcto de compensación entre la calidad de la imagen y el tamaño del archivo para tus necesidades.

WebP y CSS

☝️ Volver a indice

Hemos visto que mediante el cambio de marcado de nuestra web y usando las media queries podemos solventar el problema que existe entre estas imágenes con navegadores antiguos… en CSS no pasa lo mismo. En este caso, para poder emplear imágenes WebP en nuestro código CSS será necesario tener Modernizr. Una librería JavaScript que se encargará de gestionar entre otras cosas, la entrega de imágenes WebP según el navegador que visite la página web.

WebP y WordPress

☝️ Volver a indice

Si trabajas con WordPress y tu versión es superior a la 5.8, tenemos buenas noticias. ¡Ya permite imágenes WebP de manera nativa! Si por cualquier motivo, no puedes actualizar la versión, tranquilo, existen varios plugins para que WordPress soporte archivos WebP:

Además, tanto en las nuevas versiones, como con los plugins, el propio WordPress se encargará de ofrecer las imágenes adecuadas según el navegador con el que se esté visitando la web.

Recursos online

Seguidamente, algunos recursos online convertidores webp:


⁂

at
Labels: