Lo que WebP lossless realmente te ahorra frente a PNG

La versión corta

WebP lossless suele ser más pequeño que PNG para los mismos píxeles. Esa es la razón práctica por la que se usa.

Pero la palabra "suele" importa. WebP lossless no es un reemplazo mágico para todos los PNG. Tiende a ahorrar más en imágenes con transparencia, capturas de pantalla, capturas de UI y contenido mixto de gráficos y fotos. Puede ahorrar poco, o incluso salir perdiendo ocasionalmente, en recursos muy pequeños, PNG de paleta muy optimizados e iconos simples.

Si estás optimizando un sitio web real, la pregunta correcta no es "¿Es WebP mejor que PNG?". Es: "¿Cuáles de mis PNG se vuelven significativamente más pequeños como WebP lossless, sin crear problemas de compatibilidad o de flujo de trabajo?"

Esa es una pregunta más acotada, y mucho más fácil de responder.

Qué significa "lossless" aquí

Lossless significa que los píxeles decodificados coinciden exactamente con los píxeles de origen. Si un PNG se convierte a WebP lossless y se decodifica de nuevo, los píxeles de la imagen deberían ser idénticos.

No significa que el archivo sea el mismo. Los metadatos, la gestión de perfiles de color, los chunks auxiliares de PNG, la información gamma, las marcas de tiempo y los chunks específicos de herramientas pueden cambiarse, eliminarse o representarse de otra forma según tu canal de conversión.

Esta distinción importa si trabajas con imágenes de archivo, flujos de impresión, imágenes científicas, pruebas legales o cualquier situación en la que el contenedor del archivo lleve información importante que no sea de píxeles. Para la entrega web ordinaria, a la mayoría de los equipos les importan principalmente los píxeles visuales, la transparencia, las dimensiones y la consistencia del color.

Si publicas imágenes aportadas por usuarios, los metadatos también son un asunto de privacidad. Cubrimos ese tema más amplio en cómo eliminar metadatos EXIF antes de compartir fotos en línea, pero aquí se aplica el mismo principio: la optimización de imágenes debe ser explícita sobre lo que conserva y lo que elimina.

Por qué PNG comprime bien, y dónde se detiene

PNG es un formato muy bueno. Se convirtió en un estándar de la web por buenas razones:

• Es lossless.
• Admite transparencia alpha.
• Tiene soporte amplio.
• Es predecible y sencillo de usar.
• Es excelente para gráficos planos, capturas de pantalla, logotipos y recursos de UI.

La compresión PNG funciona filtrando las filas de la imagen y aplicando después compresión DEFLATE. Esa combinación es eficaz, especialmente cuando los píxeles cercanos son similares.

El problema no es que PNG sea malo. El problema es que PNG es antiguo. Su modelo de compresión tiene menos recursos disponibles que los formatos más nuevos. Una vez que has optimizado un PNG con un buen codificador, puede que aún estés dejando bytes sobre la mesa porque el formato en sí no puede representar algunos patrones con tanta eficiencia como WebP lossless.

Ahí es donde entra WebP lossless.

Qué hace diferente WebP lossless

WebP lossless usa un sistema de compresión diseñado específicamente para imágenes, en lugar de una capa de compresión de propósito general añadida sobre filas filtradas. Internamente, puede usar técnicas como codificación predictiva, transformaciones de color, paletas, referencias hacia atrás y codificación de entropía para representar de forma compacta patrones de píxeles repetidos o predecibles.

No necesitas memorizar los detalles de implementación. El modelo mental útil es este:

PNG comprime bien las filas. WebP lossless tiene más formas de describir la estructura de la imagen.

Esa flexibilidad adicional es la razón por la que WebP lossless puede producir con frecuencia archivos más pequeños a partir de la misma imagen de origen.

Google ha descrito históricamente las imágenes WebP lossless como alrededor de un 26% más pequeñas que PNG en promedio en sus propios estudios. Tómalo como una referencia direccional, no como una promesa. Tus imágenes no son un promedio. Tu sistema de diseño, capturas de pantalla, fotos de producto, ilustraciones, recursos exportados y cargas del CMS tendrán su propio comportamiento.

Dónde WebP lossless suele ahorrar más

Imágenes transparentes

PNG se usa habitualmente por su transparencia alpha. WebP lossless también admite alpha y a menudo la comprime de manera eficiente.

Esto es útil para:

• Recortes de producto
• Stickers e insignias
• Superposiciones de interfaz
• Diagramas con fondos transparentes
• Logotipos exportados a un tamaño mayor del necesario

El ahorro puede ser notable cuando el canal alpha contiene grandes regiones predecibles, bordes suaves o formas repetidas. Si tienes un catálogo lleno de imágenes de producto transparentes, merece la pena probar WebP lossless pronto.

Capturas de pantalla y capturas de UI

Las capturas de pantalla suelen contener grandes áreas planas, componentes de interfaz repetidos, texto, iconos, sombras y algunas regiones fotográficas. Esa mezcla puede ser incómoda para PNG, especialmente en dimensiones grandes.

WebP lossless suele manejar bien estas imágenes. Una captura de UI de página completa que pesa 900 KB como PNG optimizado podría pasar a 500–700 KB como WebP lossless. A veces el ahorro es mayor. A veces es menor. Pero la categoría es prometedora.

Si esas capturas aparecen en documentación, páginas de marketing, flujos de onboarding o casos de estudio, el efecto agregado puede ser real.

Contenido mixto de ilustración e imagen

Muchos gráficos web modernos no son ni ilustraciones puras ni fotos puras. Piensa en una imagen hero que contenga UI de producto, degradados, iconos pequeños, etiquetas de texto y fotos incrustadas.

PNG puede preservarla perfectamente pero generar un archivo grande. WebP o AVIF con pérdida pueden crear artefactos alrededor del texto y los bordes si se fuerzan demasiado. WebP lossless puede ser un punto intermedio sensato cuando importan los bordes exactos.

Para un árbol de decisión más amplio sobre formatos de imagen, incluidos AVIF y WebP con pérdida, consulta Formatos de imagen en 2026: cuándo AVIF supera a WebP y cuándo no.

Dónde PNG puede seguir siendo mejor

Iconos diminutos y recursos simples

En archivos muy pequeños, la sobrecarga del formato importa. Un icono PNG de 650 bytes no es un candidato obvio para conversión. WebP podría ahorrar 80 bytes, o podría hacerse más grande.

A esa escala, la complejidad operativa puede superar el beneficio. Si el archivo ya es diminuto, no bloquea el renderizado y se almacena en caché durante mucho tiempo, probablemente tengas cosas mejores que arreglar.

PNG de paleta cuidadosamente optimizados

Algunos PNG son mucho más pequeños de lo que la gente espera porque usan una paleta limitada. Un buen PNG de color indexado puede ser difícil de superar en gráficos simples.

Esto es especialmente cierto para:

• Logotipos pequeños
• Pixel art
• Iconos planos
• Diagramas simples
• Gráficos con pocos colores

Ten cuidado al comparar WebP con exportaciones PNG descuidadas. Si el PNG salió directamente de una herramienta de diseño con metadatos innecesarios y malos ajustes de compresión, WebP puede parecer drásticamente mejor. Eso no significa que WebP haya superado a un PNG bien optimizado por el mismo margen.

Una prueba justa compara WebP lossless con PNG optimizado, no con cualquier archivo que se haya subido.

Imágenes que deberían ser con pérdida

Este es el error silencioso: los equipos convierten PNG a WebP lossless cuando la imagen no debería haber sido PNG desde el principio.

Las fotografías son el caso habitual. Una fotografía a todo color guardada como PNG puede ser enorme. Convertirla a WebP lossless puede reducir el archivo, pero normalmente seguirá siendo mucho más grande que un WebP o AVIF con pérdida de alta calidad.

Si el usuario no puede percibir la diferencia, lossless suele ser el objetivo equivocado. La fotografía de producto, las imágenes editoriales, los fondos y los retratos suelen pertenecer a un formato con pérdida con ajustes de calidad sensatos.

Lossless debería reservarse para casos en los que importan los píxeles exactos: capturas de UI, diagramas, gráficos con mucho texto, transparencia, gráficos generados y recursos que se degradan visiblemente con compresión con pérdida.

Qué ahorra además de bytes

El ahorro obvio es el tamaño de transferencia. Los archivos de imagen más pequeños suelen significar menos ancho de banda, descargas más rápidas y mejor comportamiento en conexiones lentas.

Pero hay beneficios secundarios:

• Menos datos usados por visitantes con planes medidos
• Población más rápida de la caché de imágenes
• Menor ancho de banda de CDN
• Menor volumen de almacenamiento y copias de seguridad a escala
• Menos presión sobre los presupuestos de rendimiento

Estos ahorros no se distribuyen de manera uniforme. Un solo PNG de 2 MB convertido a un WebP de 900 KB importa más que cincuenta iconos reducidos en 100 bytes cada uno.

Por eso la optimización de imágenes debe priorizarse por impacto en la página, no por ideología de formato. Si Lighthouse marca la entrega de imágenes, léelo como una pista, no como un veredicto. Nuestra guía sobre cómo leer un informe de Lighthouse sin entrar en pánico explica cómo separar problemas de rendimiento significativos de diagnósticos ruidosos.

El equilibrio del coste de decodificación

Los archivos más pequeños no son la única variable de rendimiento. Los navegadores también necesitan decodificar las imágenes antes de pintarlas.

La decodificación de PNG es madura y normalmente rápida. La decodificación de WebP también tiene soporte amplio y es eficiente, pero puede costar más CPU en algunos casos. En dispositivos modernos rara vez es un bloqueo, pero en teléfonos de gama baja, páginas con muchas imágenes o recursos grandes above-the-fold, merece la pena medirlo.

La regla práctica: si WebP lossless reduce un PNG grande en un 30–50%, el ahorro de red suele dominar. Si reduce un PNG pequeño en un 3%, probablemente no valga la pena preocuparse por el equilibrio.

El trabajo de rendimiento está lleno de estas decisiones de umbral. No optimices cada byte con la misma intensidad.

Un método de prueba sencillo

Usa un lote representativo, no una sola imagen.

Crea una carpeta con ejemplos de tu sitio real:

• Logotipos e iconos
• Capturas de pantalla
• Recortes de producto
• Diagramas
• PNG subidos al CMS
• Imágenes de previsualización social
• Gráficos hero grandes

Luego compara tres cosas:

1. El PNG original tal como se subió
2. Un PNG optimizado
3. Una versión WebP lossless

Para flujos de línea de comandos, los equipos suelen usar herramientas como oxipng, pngcrush, zopflipng o cwebp -lossless. La herramienta exacta importa menos que la disciplina de comparar elementos equivalentes.

Registra:

• Tamaño del archivo
• Igualdad de píxeles tras la decodificación
• Renderizado visual en navegadores objetivo
• Corrección de la transparencia
• Apariencia del color
• Tiempo de build
• Fricción en el CMS o en el flujo de diseño

Una hoja de cálculo sencilla es suficiente. Añade el tamaño del archivo original, el tamaño del PNG optimizado, el tamaño de WebP lossless, el porcentaje ahorrado y la página donde aparece la imagen.

Luego ordena por bytes totales ahorrados. Ese orden normalmente te dirá qué hacer.

Entrega: no rompas clientes antiguos sin cuidado

El soporte de WebP ya es amplio en navegadores modernos. Para la mayoría de los sitios web públicos, es seguro usarlo. Aun así, si tienes webviews incrustadas, clientes de correo, navegadores empresariales heredados, apps nativas o crawlers inusuales en la mezcla, prueba antes de reemplazar PNG directamente.

El patrón conservador es mantener PNG como fallback y servir WebP donde haya soporte:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Este enfoque es aburrido, y aburrido es bueno. Los usuarios con soporte para WebP reciben el archivo más pequeño. Todos los demás reciben el PNG.

Si tu sistema de build aplica fingerprints a los recursos y tu CDN los cachea correctamente, esto no es difícil de mantener. Si tu CMS dificulta los formatos alternativos, empieza por las imágenes más grandes y repetidas en lugar de intentar convertir toda la biblioteca de medios en un solo sprint.

Privacidad y procesamiento local

La conversión de imágenes suele ocurrir en pipelines de build o servicios de medios del lado del servidor. Eso está bien para muchos equipos. Pero si manejas capturas sensibles, cargas de clientes o documentos internos, sé consciente de dónde se procesan los archivos.

Las herramientas de imagen en el navegador se han vuelto lo bastante buenas para muchas conversiones simples, previsualizaciones y comprobaciones de metadatos. Hay límites, pero el procesamiento local puede reducir la subida innecesaria de imágenes privadas. Cubrimos estos equilibrios en por qué procesar imágenes en el navegador es una ventaja para la privacidad.

Para recursos internos, el punto principal es la claridad de la política. Debes saber si las imágenes salen del dispositivo, dónde se almacenan las versiones transformadas y si se preservan los metadatos.

Una regla práctica

Usa WebP lossless cuando se cumplan las tres condiciones:

• El origen es actualmente PNG.
• Importan los píxeles exactos o la transparencia limpia.
• WebP lossless ahorra una cantidad significativa tras compararlo con un PNG optimizado.

Mantén PNG cuando:

• El archivo sea diminuto.
• El PNG ya esté optimizado con paleta y sea competitivo.
• Las restricciones de compatibilidad sean inusuales.
• La complejidad operativa no compense los bytes ahorrados.

Usa WebP o AVIF con pérdida cuando:

• La imagen sea fotográfica.
• Los píxeles exactos no importen.
• Un ajuste de calidad pueda reducir el tamaño drásticamente sin daño visible.

La mejor estrategia de imágenes rara vez es un solo formato en todas partes. Es un pequeño conjunto de reglas aplicado de forma consistente.

<!-- tool-cta:start -->

💡 Prueba esto: Pasa el mismo PNG por el Image Converter para generar una versión WebP sin pérdida y compara directamente los tamaños de archivo.

<!-- tool-cta:end -->

Entonces, ¿qué ahorra realmente WebP lossless?

Ahorra bytes donde PNG ya no tiene más trucos de compresión. A veces eso significa un modesto 10%. A veces significa reducir casi a la mitad una imagen transparente grande. En un sitio real, los ahorros suelen concentrarse en una minoría de recursos.

Esa es la parte importante. WebP lossless no es una mejora moral frente a PNG. Es una opción práctica para un trabajo específico: imágenes web lossless más pequeñas, con transparencia y amplio soporte en navegadores modernos.

Úsalo donde los números lo justifiquen. Deja PNG en paz donde no lo hagan.