Resize a WebP Image

WebP is usually a better size than PNG for the same image

A WebP at balanced quality is usually a fraction of the size of the equivalent PNG and looks the same on screen, which means that when an image is too large and it is a photograph or a complex graphic, converting rather than merely resizing is the effective answer. Resizing alone reduces the pixel count and the file size, but it leaves the format inefficient. Doing both at once, which this tool allows, gives the best result for a web image and is the reason to prefer WebP over PNG for anything that is going to be delivered in a browser.

NoteWhen an image is too large, converting matters as much as resizing.

Resize first, compress second

The order matters and it is not a detail. An image that is far larger than where it displays is spending most of its bytes on pixels nobody will see, and no amount of compression removes that waste without visibly softening the result. Reducing the dimensions to roughly the display width first, then compressing to a balanced quality, gives a sharper image at the same file size than compressing a huge image down. A large image compressed hard looks worse than a correctly sized one compressed gently, every time.

• Resize to roughly twice the display width first.
• Then compress at balanced quality.
• A sharp small file beats a soft large one at the same byte count.
• Check the result at 100 percent before using it.

NoteResizing before compressing produces a sharper file at the same size.

Lossless and lossy, and which one to use

WebP offers both, and the choice depends on the content. Lossless WebP keeps every pixel and is usually smaller than PNG, which makes it right for a logo, a diagram, or a screenshot where edges and text must stay exact. Lossy WebP discards detail to reach a much smaller file, which is right for a photograph where the discarded detail is invisible at display size. Using the wrong one is the common mistake: a screenshot in lossy WebP fringes its text, and a photograph in lossless WebP is larger than it needs to be.

• Lossless WebP for logos, diagrams, and screenshots. Smaller than PNG, still exact.
• Lossy WebP for photographs. Far smaller, and the loss is invisible at display size.
• A screenshot in lossy WebP will fringe its text.
• A photograph in lossless WebP is larger than it needs to be.

Compatibility, and what to do about it

WebP is supported across all current browsers and has been for years, so it is a safe default for a general audience. The remaining exceptions are older browsers, some in-app webviews, and a handful of design and publishing tools that reject it on upload. Where you control the page, a WebP with a JPG or PNG fallback costs one extra file and removes the question. Where a single file is all you can upload, WebP is still a reasonable choice for the web and JPG is the safer one for email or print.

• WebP is a safe default for a general web audience.
• Older browsers and some in-app webviews do not support it.
• Some design and publishing tools reject WebP on upload.
• Provide a JPG or PNG fallback where you control the markup.
• For email or print, JPG remains the safer single format.

MDN: image file type and format guide