Cómo comprimir imágenes WebP

Para comprimir un WebP, vuelve a codificarlo en modo con pérdida con una calidad de alrededor de 75, el valor predeterminado del codificador cwebp de Google, y luego ajústalo al ancho con el que realmente se muestra. Usa el modo sin pérdida o casi sin pérdida para gráficos planos y capturas de pantalla. Para un límite de tamaño estricto, un compresor de WebP que acepte un objetivo en KB encuentra la calidad adecuada por ti.

WebP ya suele ganarle a JPEG y PNG en tamaño de archivo, pero un WebP mal guardado todavía puede pesar mucho. El modo, el número de calidad y las dimensiones en píxeles importan, y las dimensiones suelen ser lo que más importa.

Cómo comprimir imágenes WebP en línea

Cuando un formulario o el presupuesto de peso de una página te da un número fijo, una herramienta con tamaño objetivo es más rápida que probar y fallar. La herramienta Comprimir WebP se ejecuta en tu navegador, así que el archivo no se sube a un servidor.

1. Abre la herramienta y agrega uno o más archivos WebP.
2. Escribe el tamaño que necesitas en KB o define la calidad a mano.
3. Inicia la compresión. Primero baja la calidad y solo reduce las dimensiones si la calidad por sí sola no logra quedar por debajo del objetivo.
4. Descarga el resultado y revísalo con zoom al 100% en su zona más cargada, como cabello, follaje o texto pequeño.

Si partes de un JPEG o un PNG, conviértelo antes con PNG o JPG a WebP. Convierte desde el original siempre que puedas. WebP conserva fielmente los artefactos en bloques de un JPEG ya comprimido, y pagas bytes por guardarlos.

¿Es nuevo para ti este formato? La guía sobre qué es un archivo WebP explica de dónde viene, qué admite y qué apps lo abren.

Con pérdida, sin pérdida o casi sin pérdida: ¿qué modo de WebP usar?

WebP tiene más de una forma de guardar una imagen, y el modo importa más que cualquier número de calidad.

WebP con pérdida

Funciona como JPEG. Descarta detalles que difícilmente notarás. Úsalo para fotos, fotos de producto, imágenes principales y cualquier cosa con degradados suaves. También admite transparencia, algo que JPEG no puede, así que un producto recortado sobre fondo transparente puede quedarse con pérdida y ligero.

WebP sin pérdida

Cada píxel se conserva con exactitud, como en PNG. Úsalo para logotipos, íconos, diagramas y capturas de pantalla con texto nítido. Normalmente pesa menos que la misma imagen guardada como PNG.

WebP casi sin pérdida

Una opción intermedia del codificador de Google. Ajusta ligeramente los valores de los píxeles para que el codificador sin pérdida los empaquete mejor, con poco efecto visible. Va bien con capturas de pantalla e ilustraciones en las que el modo con pérdida emborronaría los bordes pero el modo sin pérdida sigue pesando demasiado.

¿No sabes qué modo te conviene? Exporta la imagen de las dos formas y compara. Quédate con el archivo que pese menos y siga viéndose bien a tamaño completo. Una captura de pantalla con una foto pegada es el caso difícil clásico, y ahí casi sin pérdida suele ganar.

Google documenta los tres modos, además de las opciones de calidad y tamaño objetivo, en la página de referencia de cwebp.

¿Qué ajuste de calidad usar para comprimir WebP?

La calidad de WebP va de 0 a 100, y cwebp usa 75 cuando no defines una. Ese valor predeterminado es un buen punto de partida para fotos. A partir de ahí:

• Sube a unos 80 a 85 para imágenes principales grandes que la gente verá con atención, o imágenes con tonos de piel y textura fina.
• Baja a unos 60 a 70 para miniaturas, imágenes de tarjetas y fotos de fondo cubiertas por texto.
• Evita valores muy bajos en imágenes que contienen texto. Las letras se manchan rápido en modo con pérdida.

Los números de calidad de WebP no equivalen uno a uno a los de JPEG. No copies tu ajuste de JPEG suponiendo que significa lo mismo. Compara el resultado a ojo al tamaño en que se mostrará, idealmente en un celular además de en una laptop.

Cómo reducir el tamaño de un WebP cambiando sus dimensiones

Las dimensiones suelen importar más que la calidad. Una imagen guardada a 3000 píxeles de ancho para un espacio de 800 píxeles de ancho en pantalla lleva unas 14 veces más píxeles de los que necesita. Ningún ajuste de calidad cierra una diferencia así.

1. Busca el mayor ancho con el que aparece la imagen en tu sitio. Los ajustes de tu tema o diseño suelen indicarlo.
2. Duplícalo si quieres que se vea nítida en pantallas de alta densidad de celulares y laptops.
3. Cambia el tamaño a ese ancho con la herramienta Cambiar tamaño de imagen o con tu editor, manteniendo bloqueada la proporción.
4. Comprime la copia con el tamaño ya cambiado.

Para sitios responsivos, exporta varios anchos y deja que el navegador elija con srcset. La guía de MDN sobre imágenes responsivas explica cómo funciona ese código. Así, el navegador descarga el archivo pequeño en un celular y el grande en un monitor ancho.

Los WebP animados requieren el mismo razonamiento. Cada fotograma suma peso, así que reducir el número de fotogramas o el tamaño en píxeles ayuda mucho más que mover un poco la calidad. Un bucle corto a menor tamaño suele ser la solución práctica.

¿Por qué mi archivo WebP es más grande que el original?

Esto pasa más seguido de lo que la gente espera. Causas comunes:

• El original era un PNG pequeño, bien optimizado y con pocos colores, convertido en modo con pérdida a calidad alta. Prueba el modo sin pérdida para ese tipo de imagen.
• El original ya era un JPEG de baja calidad. Volver a codificarlo a una calidad mayor hace que WebP guarde con detalle todo el ruido del JPEG.
• La calidad se fijó en 100. En modo con pérdida eso produce un archivo grande con casi ninguna mejora visible.
• La imagen conservó las dimensiones completas de la cámara.

Algunas herramientas conservan automáticamente el original si la versión nueva queda más pesada. Si la tuya no lo hace, compara tú mismo los dos tamaños antes de reemplazar nada en tu sitio.

Con WebP, los metadatos rara vez son el problema. Por defecto, cwebp no copia datos EXIF, XMP ni el perfil de color del original, aunque otras apps sí pueden hacerlo. Si los colores se ven deslavados después de convertir, la causa probable es que falta el perfil de color. Vuelve a exportar conservando el perfil (cwebp tiene una opción -metadata icc para esto).

¿Qué ajustes de compresión WebP convienen para sitios web y formularios?

Para un sitio web, piensa en el peso de la página. La imagen principal es lo más pesado de la mayoría de las páginas, así que dale la mayor atención: ancho correcto, modo con pérdida y calidad entre 70 y pocos más de 80. Las miniaturas y los íconos pueden bajar mucho más o pasar a sin pérdida. La guía de WebP vs PNG profundiza en cómo elegir formatos para el rendimiento del sitio.

Todos los navegadores principales actuales muestran WebP, así que es seguro para sitios web. Los formularios de carga son otro asunto. Muchos portales y apps de escritorio antiguas todavía lo rechazan. En Mac, Vista Previa abre archivos WebP, pero su menú de exportación no ofrece WebP como formato de salida, así que no puedes volver a guardar uno ahí.

Si un portal o una app rechaza tu archivo, conviértelo con WebP a imagen. Elige JPG para fotos y PNG si la imagen tiene transparencia. Luego comprime el JPG o el PNG al límite del formulario como de costumbre.

Preguntas frecuentes