Guides / Finipix / Putting it online
Should You Convert Your Images to WebP?
Finipix guide · Resize and compress images for the web. Open Finipix
PageSpeed Insights flags your images, a friend says everything should be WebP now, and you have a folder of JPEGs and PNGs that work fine. Converting is easy. The real question is where the converted files will be used, because WebP is excellent on web pages and still awkward in a few places outside them. This guide is about that decision; the general comparison of formats and pixel sizes is in web image formats and sizes.
What you gain
WebP is an image format from Google that can be saved lossy, like JPEG, or lossless, like PNG. Google's WebP documentation reports that lossy WebP typically comes out around 30 percent smaller than JPEG at similar quality, and that lossless WebP is about 26 percent smaller than PNG. Your own results will vary with the picture; photos with large smooth areas gain more, already heavily compressed JPEGs gain less.
On a page with a few large photos, 30 percent is real time saved on a phone connection. On a page with one small logo, it is not worth any effort.
Browser support today
For web pages, support is no longer a concern. MDN's image format guide lists WebP as supported in Chrome, Edge, Firefox, Opera and Safari. The one caveat MDN notes is Safari on the Mac: it needs Safari 14 or later running on macOS Big Sur (11) or newer. A visitor on an older Mac with an older Safari would see a broken image.
For most sites that group is small. If you need to cover it, or you simply want a safety net, the <picture> element lets you offer WebP with a JPEG fallback, and the browser picks the first format it supports:
<picture> <source srcset="images/team.webp" type="image/webp"> <img src="images/team.jpg" width="1200" height="800" alt="Our team at the spring workshop"> </picture>
That costs you two files per image. For a small site, a single WebP is a reasonable choice too.
Where WebP still causes trouble
The problems are mostly outside the browser, in places that receive the file itself rather than a web page:
- Email. Support for WebP images in email clients is uneven, and you cannot control which client a recipient uses. For images inside newsletters or email signatures, JPEG and PNG are the safe choice.
- Older desktop software. Some older image viewers, office suites and print tools do not open WebP, or open it only after an update. If you send a WebP to a client or a print shop, they may not be able to use it.
- Upload forms. Some websites, government and company portals, marketplaces and job sites accept only JPG and PNG in their upload fields. A WebP gets rejected or is silently ignored.
- Messengers and social apps. Behavior varies: some show WebP normally, some convert it, some treat it as a file attachment rather than a photo. Test the specific app before relying on it.
- Link preview images. The
og:imagepicture is fetched by every app your link is shared in. JPEG is the low-risk choice there; see designing a link preview image.
The rule that follows: WebP for images on your own web pages, JPEG or PNG for files that people download, attach, print or upload elsewhere.
Transparency and animation
WebP supports transparency (an alpha channel), so a logo or cut-out product on a transparent background can be WebP instead of PNG, usually at a smaller size. JPEG has no transparency at all.
WebP also supports animation and is usually much smaller than the same animation as a GIF. Animated WebP is supported in the same current browsers. If you need animation, though, a short muted video is often smaller still. Be aware that some converters keep only the first frame of an animated GIF; check the result before replacing the original.
When to keep JPEG or PNG
- The file leaves the web page: downloads, attachments, print, email, other people's upload forms.
- The page has few, small images. Converting a 40 KB logo saves a few kilobytes and adds a format to manage.
- Your platform does not accept WebP. Some site builders and content systems restrict uploads to JPG, PNG and GIF; check the upload settings.
- Screenshots with sharp text that must stay pixel-exact. PNG is the dependable choice; lossless WebP also works if the destination is a web page, so compare the two sizes.
- Your master files. Always keep the originals in their original format. Converting from one lossy format to another loses a little quality each time, so convert from the original, never from a previous conversion.
When AVIF is worth it
AVIF is newer and usually compresses photos even better than WebP. MDN lists support from Chrome 85, Edge 121, Firefox 93 and Safari 16.1, and still recommends providing a WebP, JPEG or PNG fallback because its support has less history. Two more trade-offs: encoding AVIF is slower, and MDN notes it does not render progressively, so the whole file must arrive before it appears.
AVIF pays off on large photographic images, such as a full-width hero or a gallery, where the extra saving is measured in hundreds of kilobytes, and when you are willing to use <picture> with a fallback. For a handful of medium images, WebP alone is simpler and close enough.
Converting with Finipix
Finipix is a free browser tool from Qorlize. Images are processed on your device without being uploaded, and no account is needed.
- Put copies of the images you want to convert in a working folder. Leave the originals where they are.
- Open Finipix and drop the images onto the window.
- Pick a size preset if you also want to resize: Original size, Body image (1200px wide), Hero / banner (1920px wide), Thumbnail (600px wide), or Custom. Finipix never enlarges images and keeps the aspect ratio.
- Choose WebP as the output format. AVIF appears in the list only if your browser can encode it. Set the quality slider (40 to 95, default 80).
- Check the before and after comparison, then download the files one by one or as a ZIP.
EXIF and GPS metadata are removed from every result, which is good for web images but means the converted files are not a replacement for your originals if you care about the date and location a photo was taken. Finipix does not output animation, so convert animated images with another tool or as video.
.jpg or .png to .webp. Update every src in your HTML, upload the new files, and only then remove the old ones from the server.To see what the change did, run the page through PageSpeed Insights before and after; checking your page speed explains what to look at.
Want to try it on your own images? Open Finipix. It runs in your browser and your images stay on your device.