PNG to WebP: check icon edges, not just transparency

An icon can keep its transparent background yet lose clarity in a small word. Transparency and color fidelity are separate concerns. Preserving the first does not automatically make the new web copy acceptable.

Transparent does not mean pixel-identical

WebP can combine transparency with lossy color compression. A lossless mode also exists, but a WebP extension or transparent background does not tell you which mode was used.

This ToolRoof path creates lossy WebP. Inspect colored edges and small lettering carefully, and keep the PNG when matching the original drawing matters more than a possible file-size saving.

References: Google WebP — Quality and lossless encoding are separate controls

Check the backgrounds the icon will meet

Place the output on both a light and a dark background. Inspect soft shadows and partly transparent edges; one background may reveal a problem that the other hides.

Do not confuse transparent margins with useless space. Padding may intentionally align icons in equal-size buttons. Cropping it merely to shrink a file can change the interface composition.

Few-color artwork needs its own comparison

Lossy WebP can be larger than a PNG with few colors. Do not replace every icon based on one successful conversion of an unrelated photograph.

Set your acceptance order: is the shape legible at its final size, does the background work, and is the file actually smaller? Keeping PNG is a valid decision when conversion fails the condition that motivated it.

References: Google WebP — File size, format features and limitations

Example: icon area is not file size

A 256 × 256-pixel icon has a transparent margin of 32 pixels on every side. The central content is 192 × 192 = 36864 pixels, or 56.25% of the canvas area. That is a geometric area percentage, not a predicted compression ratio.

When the whole canvas is displayed 64 pixels wide, the central content is 48 pixels wide. Check it at that size on both backgrounds, not only enlarged. Lost padding or a missing thin stroke should not become the hidden price of a small byte saving.

References