Bhinish Dhiman
Cuánto ahorra pasar de PNG a WebP, medido en once imágenes
Traducido del original en inglés. Leer el original
Convertir PNG a WebP con calidad 0.82 en Chromium 153 redujo cuatro fotografías de 1600 × 900 entre un 92.5% y un 96.5%, un logo plano de 800 px un 68.7% y un recorte fotográfico con transparencia un 94.2%. Los íconos fueron en sentido contrario: el de 64 px creció un 32.7%, el de 32 px un 68.5% y el de 16 px un 116%. En gráficos planos, WebP queda a la par de un PNG con paleta.
La cifra que todo el mundo cita para WebP frente a PNG viene del estudio de Google sobre WebP sin pérdida. Nuestro conversor no escribe WebP sin pérdida (ningún navegador lo hace por defecto desde un canvas), así que esa cifra no describe lo que produce. Esto es lo que produce.
La medición
Preparamos once PNG: cuatro fotografías de 1600 × 900, una fotografía con una máscara de transparencia radial suave, un logo plano de 800 × 800 sobre un fondo y el mismo logo sobre transparencia, y un ícono de marca de verificación de 32 unidades rasterizado a 16, 32, 64 y 128 px. Cada uno se convirtió en Chromium 153.0.8010 sin interfaz con las mismas llamadas que convertOne() en src/lib/convert/image.ts: createImageBitmap, dibujar en un canvas, canvas.toBlob('image/webp', 0.82), ya que 0.82 es el valor predeterminado del conversor. También volvimos a guardar cada PNG con libpng al máximo esfuerzo, y como PNG con paleta, para tener una base justa en los gráficos planos. Ejecutado el 1 de octubre de 2026.
| Imagen | PNG tal como llegó | PNG optimizado | WebP 0.82 | Cambio frente al original |
|---|---|---|---|---|
| Fotografía A, 1600 × 900 | 1 568 028 B | 698 559 B | 55 498 B | −96.5% |
| Fotografía B | 2 327 903 B | 903 228 B | 142 062 B | −93.9% |
| Fotografía C | 3 140 320 B | 834 110 B | 148 002 B | −95.3% |
| Fotografía D | 2 959 239 B | 932 712 B | 221 848 B | −92.5% |
| Fotografía, máscara alfa suave | 3 314 685 B | 521 151 B | 192 402 B | −94.2% |
| Logo plano, opaco | 35 475 B | 11 849 B (paleta) | 11 108 B | −68.7% |
| Logo plano, transparente | 27 876 B | 11 352 B (paleta) | 13 992 B | −49.8% |
| Ícono 128 px | 2 097 B | 1 635 B (paleta) | 2 042 B | −2.6% |
| Ícono 64 px | 1 020 B | 917 B (paleta) | 1 354 B | +32.7% |
| Ícono 32 px | 559 B | 518 B (paleta) | 942 B | +68.5% |
| Ícono 16 px | 332 B | 330 B (paleta) | 718 B | +116.3% |
Fotografías
Una fotografía guardada como PNG es el caso para el que el formato nunca se pensó, y el ahorro es enorme porque el punto de partida es absurdo: un archivo de 1.5 MB a 3.1 MB que un codificador con pérdida puede representar en 55 KB a 222 KB. Incluso frente a un PNG bien optimizado, el ahorro es de 76% a 92%. Frente a JPEG con el mismo ajuste de 0.82, WebP fue más liviano en las cuatro (55 KB frente a 105 KB en la fotografía A), aunque un número de calidad es un control privado de cada codificador, y esto compara dos resultados, no dos ajustes.
Gráficos planos, con una base honesta
El 68.7% del logo es real, pero favorece a WebP, porque el PNG original era una exportación sin optimizar. Frente a un PNG con paleta, que es lo que escribe un optimizador de PNG para un gráfico de cuatro colores y lo que nuestro compresor de imágenes produce sin pérdida, WebP es un 6% más liviano en el logo opaco y un 23% más pesado en el transparente. En gráficos planos los dos formatos quedan a la par, y PNG mantiene exactos los bordes nítidos.
Los íconos
Por debajo de unos 128 px WebP pierde, y la pérdida crece a medida que la imagen se achica: el formato carga con un costo fijo de contenedor y encabezados que un PNG de 332 bytes no tiene margen para amortizar. A 16 px, el WebP pesa más del doble que el PNG. Un conjunto de favicons debería quedarse en PNG, y nuestro generador de favicons escribe PNG por esa razón.
La transparencia pierde píxeles sea cual sea el formato
También le pedimos a Chromium un WebP con calidad 1.0, que escribe sin pérdida: las cuatro fotografías opacas y el logo opaco se decodificaron idénticos bit a bit al original. Ninguna imagen con transparencia parcial lo logró. En la fotografía con máscara suave, el 39.77% de los píxeles cambió tras el viaje de ida y vuelta; en el ícono de 16 px, el 8.59%. No es culpa del codificador WebP. Un canvas guarda el alfa premultiplicado, así que un píxel semitransparente se redondea al entrar y no se puede recuperar al salir. Cualquier conversor que pase por un canvas, el nuestro incluido, le hace esto a los bordes suaves, con cualquier ajuste de calidad y en cualquier formato de salida. Si la transparencia de un gráfico tiene que sobrevivir exacta, no lo vuelvas a codificar a través de un canvas.
Qué hacer con la tabla
Fotografías: conviértelas y espera más de un 90%. Gráficos planos: optimiza primero el PNG y convierte solo si el resultado sigue siendo demasiado grande. Íconos de menos de 128 px: déjalos como están. Cualquier cosa con transparencia suave que tenga que quedar exacta: déjala también.