PNG vs WebP

WebP casi siempre pesa menos; PNG es el archivo que envías sin pensarlo.

¿Cuándo PNG?

PNG cuando el archivo acaba en manos de otra persona cuyos programas no conoces. Se abre en todas partes desde hace décadas.

¿Cuándo WebP?

WebP para tu propia web. Hace lo mismo que PNG, transparencia incluida, y ocupa bastante menos.

Lo que casi siempre se pasa por alto

WebP lo entiende cualquier navegador actual, pero no todos los visores de imágenes ni el software antiguo. Quien envía un archivo por correo no sabe con qué lo van a abrir.

Qué hace realmente pasar de PNG a WebP

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as PNG.

PNG139 KB

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as WebP.

WebP14 KB9.7× smaller

Una escena fotográfica: degradados suaves, bordes blandos, algo de grano. Es el caso para el que WebP está hecho, o justamente no lo está, y las cifras enseñan cuál de los dos. Las dos imágenes se dibujan por código y las codifica el mismo conversor que funciona en esta página, así que las cifras de tamaño son nuestra propia salida.
A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as PNG.

PNG7 KB

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as WebP.

WebP4 KB38% smaller

Un fondo transparente y un degradado sobre la forma. WebP conserva las dos cosas, solo una, o rellena la transparencia con un color fijo, y esa es la diferencia con la que tropieza casi todo el mundo. Las dos imágenes se dibujan por código y las codifica el mismo conversor que funciona en esta página, así que las cifras de tamaño son nuestra propia salida.
A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as PNG.

PNG3 KB

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as WebP.

WebP11 KB4.2× larger

Colores planos y bordes duros, como en una interfaz, un diagrama o un logotipo. Se comporta de manera completamente distinta a la foto de arriba, y por eso la respuesta es: depende de lo que haya dentro del archivo. Las dos imágenes se dibujan por código y las codifica el mismo conversor que funciona en esta página, así que las cifras de tamaño son nuestra propia salida.

Lado a lado

PNG y WebP comparados fila a fila: qué guarda cada formato y qué cuesta.
PNGWebP
Full namePortable Network GraphicsWebP Image
Extensión.png.webp
Tipo de medioimage/pngimage/webp
CompresiónSin pérdida — no se descarta nadaAmbas, según el ajuste
Esta página puede escribirloSíSí

¿Ya lo tienes claro? Convierte aquí

De dónde salen estas cifras

Lo que esta página afirma sobre PNG and WebP se puede comprobar: aquí están los documentos que lo fijan.