WebP: when it saves you a third of the bytes, and when a form will reject it

WebP is a format from 2010 that does the jobs of JPG and PNG in one file: lossy compression for photos, lossless for graphics, transparency either way, and animation. For a website it is usually the right choice. For an application form it is usually the wrong one, because the form was written before WebP was common.

How much smaller

At matched visible quality, lossy WebP is around 25 to 35 percent smaller than JPG on photographs, and lossless WebP is around 25 percent smaller than PNG on graphics. The gain is largest on medium-quality photos and smallest on already heavily compressed files, which have little left to save.

Where it works

Every current browser displays WebP: Chrome and Edge since 2014, Firefox since 2019, Safari since 2020 (macOS Big Sur and iOS 14). WordPress, Shopify, Squarespace and most modern CMSs accept WebP uploads. Email clients are mixed; Outlook desktop does not render it.

Where it fails

• Government and exam portals that list JPG or PNG. The validator checks the file signature, not just the extension, so renaming does not help.
• Older photo viewers and some print services.
• Microsoft Office before 2021 and many PDF tools.
• Any form that says 'JPEG only'. Convert to JPG first.

Converting without stacking losses

A JPG is already lossy. Encoding it to lossy WebP adds a second loss. Keep the WebP quality at 80 or above and the second step is invisible; below 70 the two sets of artefacts start to compound. Going the other way, WebP to JPG, use quality 90 for the same reason.

For graphics with transparency, PNG to WebP at quality 100 is close to lossless and keeps the alpha channel exactly.

Practical defaults