How to convert images to WebP for a faster page

Pick one photo and one graphic with a flat background. Their best exports may use different settings. To learn whether WebP helps your site, compare each export at the same dimensions and inspect it where it will actually be displayed.

Size the image before comparing formats

Check the width the image uses on the page. A listing card and a hero banner may need different exports even when both come from the same photo. Save one reasonably sized master copy for the comparison with Image Resizer. Generate new exports from the original or lossless master when possible.

Open JPG to WebP for a photo or PNG to WebP for a PNG source. WebP supports different compression approaches and can retain transparency, but the actual export depends on the tool settings. See Google’s WebP overview for format details.

Compare pixels and bytes separately

Record the file size for each output. Open the photo at its display size and look for banding in skies, noisy edges around faces, or softness around text. For a logo, place it on both a dark and light background. If transparency matters, the checkerboard preview in an editor is only a first check.

There is no fixed percentage you should expect to save. A small, already optimized source might produce a similar result. If the WebP file is smaller and looks good on the real page, keep it. If it introduces a distracting artifact, increase quality or keep the other format.

Check the published page

Replace the image in a test page first and check a phone as well as desktop. If your layout serves multiple sizes, confirm that it requests the right one. Provide useful alternative text for content images and reserve their dimensions so the page does not jump as they load. Use the W3C image tutorial for guidance on when an image needs alternative text.

For an upload form, check whether WebP is accepted before converting. Our JPG, PNG, and WebP comparison covers cases where another format is the practical choice.