WebP Explained: Smaller Images for Your Website
WebP is an image format made by Google for the web. Its main job is to make picture files smaller than JPEG or PNG while looking about the same, so pages load faster. Google's own figures say lossy WebP images are 25 to 34% smaller than comparable JPEGs, and lossless WebP images are about 26% smaller than PNGs.
Every major current browser can show WebP, so for images on your own website it's usually a good default. The cases where you should still keep a JPEG are mostly about where else the file has to go: email, upload forms and older software. Details below.
What WebP is, in plain terms
An image format is just a way of storing a picture as data. JPEG has been the standard for photos since the early 1990s, and PNG is the usual choice for screenshots and graphics. WebP is newer and tries to cover both jobs in one format.
It can do that because it supports two kinds of compression:
- Lossy, like JPEG. The file gets smaller by throwing away detail your eye is unlikely to notice. Good for photos.
- Lossless, like PNG. The file gets smaller without changing a single pixel. Good for logos, screenshots and graphics with sharp edges.
WebP also supports transparency (see-through areas, like the background around a cut-out product) and animation, which makes it a possible replacement for GIFs too.
Can people actually see WebP images?
In a web browser, almost certainly yes. According to Can I Use, WebP works in Chrome, Edge, Firefox, Opera and Samsung Internet, and in Safari on iPhone from iOS 14. Desktop Safari has full support from version 16. Can I Use puts global support at around 97% of browser usage.
The few gaps are very old browsers, such as Internet Explorer, and old Safari versions on Macs that haven't been updated. If your site has to support those, use the HTML <picture> element with a JPEG or PNG fallback; many website builders and CMS plugins do this for you.
Outside the browser, support is less even. Some older image editors, office programs and upload forms still reject WebP files, or show them with a generic icon instead of a preview.
WebP vs JPEG vs PNG at a glance
| JPEG | PNG | WebP |
|---|
| Compression | Lossy | Lossless | Lossy or lossless |
| Transparency | No | Yes | Yes |
| Animation | No | No (APNG is a separate variant) | Yes |
| Accepted everywhere | Yes | Almost everywhere | Browsers yes, some apps and forms no |
| Best for | Photos you email or upload | Screenshots, logos, exact graphics | Images on your own website |
When to use WebP
- Photos on your own website or blog. Smaller files mean faster pages, especially on phones with a weak signal.
- Online shop product images, if your shop platform accepts WebP uploads. Lots of product photos on one page add up quickly.
- Cut-out images with a transparent background. A PNG cut-out of a person or product can be a large file. WebP keeps the transparency and is usually much smaller. Google says lossy WebP with transparency is typically around three times smaller than PNG.
- Short looping animations that would otherwise be a heavy GIF.
When to keep JPEG (or PNG)
- Anything you email. The person receiving it may open it in an app that doesn't handle WebP well. JPEG opens everywhere.
- Upload forms for job applications, government portals, visa and exam applications. These often list accepted formats, typically JPG or PNG. If WebP isn't listed, don't use it.
- Files for print shops or for someone who'll edit them in older software.
- Your master copy. Keep the original photo from your camera or phone. Make WebP versions from it for the web, rather than converting back and forth.
- When the site does it for you. Some platforms and image CDNs automatically serve WebP to browsers that support it. In that case upload a good-quality JPEG or PNG and let the platform convert it.
How to convert an image to WebP
You can do it in the browser with Image Compress, which converts between JPEG, WebP and PNG. WebP is already selected when the tool opens.
- Open Image Compress and click the upload area to choose one image. PNG, JPG and WebP files work, plus other types your browser can open.
- Leave the output format on WebP.
- Set the Quality slider. It starts at 80%, which is a good place to begin for photos. Lower it in steps of 5 if you need a smaller file, checking the preview each time.
- If the picture is bigger than your page needs, type a number in Max width. For most blog posts and shop pages, 1200 to 1600 pixels is plenty. The height scales to match, so nothing gets stretched.
- Look at the boxes under the controls: original size, compressed size, percentage saved and final dimensions.
- Click Download. The file is saved with
-compressed added to its name.
If the Saved box turns red, the new file is bigger than the original. That can happen when the original was already well compressed. Try a lower quality, or keep the original.
The conversion happens on your own device using your browser's built-in image encoder, so the photo isn't uploaded to our server. The tool handles one image at a time.
A few practical notes
- Resizing usually saves more than switching format. A 4000-pixel phone photo shrunk to 1400 pixels wide will drop in size far more than a JPEG-to-WebP change alone. Do both for the best result.
- Don't convert the same file repeatedly. Each lossy save throws away a little more detail. Always start from your original.
- WebP isn't the newest option. AVIF often compresses even better, but browser and app support is less complete. For most small sites, WebP is the safer modern choice.
If you're uploading to a form that says "JPG or PNG only", pick JPEG in Image Compress instead. If it's going on your own site, WebP at 75 to 80% quality and a sensible max width is a strong starting point.
KhanTools — Free Online Web Tools
Free browser-based tools for images and PDFs. No uploads. 100% private.
Blog ·
About ·
Privacy Policy ·
Terms of Service ·
Contact
JavaScript is required to use KhanTools. Please enable JavaScript in your browser.