WebP vs PNG
Ambos guardan fotografías, pero con compromisos distintos. Estas son las diferencias reales y cómo decidir.
Short answer
Si la imagen es una foto o una captura de una, WebP será drásticamente más pequeño. Si es dibujo lineal, un logotipo o texto que quiere mantener exacto al píxel, quédese en PNG.
Why this comes up
La mayoría de quienes llegan a esta comparación no están sopesando dos formatos por sus méritos. Tienen un PNG que inexplicablemente pesa 4 MB y quieren reducirlo. Ese encuadre importa, porque el motivo de esos 4 MB determina si WebP ayuda siquiera, y a veces la respuesta correcta es que PNG nunca fue el problema.
Comparación directa
| Propiedad | WebP | PNG |
|---|---|---|
| Compresión | Con pérdida | Sin pérdida |
| Transparencia | Sí | Sí |
| Tamaño habitual | 65-75% de un JPEG equivalente | 300-500% de un JPEG equivalente |
| Compatibilidad | Compatible con todos los navegadores actuales y casi todas las aplicaciones | Se abre en cualquier parte, incluso en software de hace décadas |
| Suele venir de | Sitios web que optimizan su peso de carga | Capturas de pantalla, logotipos y gráficos |
What actually differs
PNG es sin pérdida por definición; WebP normalmente no
PNG guarda cada píxel exactamente como se le entregó; por eso nunca se degrada y por eso es grande. WebP tiene un modo con pérdida y otro sin ella, y las cifras de tamaño que se citan casi siempre vienen del primero. Comparar «WebP» con PNG sin decir qué modo es comparar dos cosas distintas. El WebP sin pérdida suele ahorrar en torno al 25 % frente a PNG; el WebP con pérdida puede ahorrar un 80 % o más.
PNG es enorme con fotos por una razón estructural
PNG comprime buscando repeticiones en filas de píxeles. Una captura de un panel de ajustes es sobre todo color plano repetido, así que comprime de maravilla. Una fotografía casi no tiene repetición exacta —cada píxel difiere un poco de su vecino—, así que PNG guarda casi todo tal cual y el archivo se infla a entre tres y cinco veces un JPEG. No es un defecto: es lo que significa «sin pérdida» sobre datos ruidosos.
Ambos conservan la transparencia, así que eso no decide nada
Vale la pena decirlo porque es la suposición que lleva a la gente a PNG por reflejo. WebP admite un canal alfa completo de 8 bits tanto en modo con pérdida como sin ella. Un logotipo sobre fondo transparente no necesita ser PNG para seguir siendo transparente: necesita ser PNG si lo quiere exacto al píxel.
Which to use
Use WebP for
Fotografías, capturas con mucha foto y cualquier entrega web donde el archivo se vaya a mirar y no a seguir editando.
Use PNG for
Capturas de texto e interfaz, logotipos y dibujo lineal, todo lo que vaya a otra pasada de edición y cualquier archivo que deba sobrevivir sin cambios a guardados repetidos.
One thing that catches people out
El WebP con pérdida es mala idea para capturas de texto
La compresión con pérdida está afinada para el detalle fotográfico y lleva mal los bordes duros de negro sobre blanco: las letras adquieren un halo gris y los trazos finos se emborronan. Una captura de una terminal o un editor de código es el peor caso. Si el archivo es grande y está lleno de texto, use WebP sin pérdida o déjelo en PNG; el ahorro es menor pero el texto sigue legible.