Somewhere in your media library there are probably several hundred JPEGs, a few PNG photos that should never have been PNGs, and nothing in WebP or AVIF at all. One plugin offers to convert the lot to WebP, another pushes AVIF, and your designer still sends JPEGs. Before you change hundreds of files, it is worth knowing the best image format for websites like yours.
Short answer for most business sites: use WebP as the everyday format for photos, consider AVIF where your tools handle it well, keep JPEG as a safe fallback, and stop using PNG for photographs. The rest of this page on WebP vs AVIF vs JPEG explains why, and where the exceptions are, because the best format depends on what is in the picture.
WebP vs AVIF vs JPEG side by side
| JPEG | WebP | AVIF | |
|---|---|---|---|
| Age | The long-standing standard | Newer, created by Google | Newest, based on the AV1 video codec |
| Compression | Lossy only | Lossy or lossless | Lossy or lossless |
| Transparency | No | Yes | Yes |
| Animation | No | Yes | Yes |
| Typical file size for a photo | Largest of the three | Usually smaller than JPEG | Often smaller again |
| Encoding speed | Fast | Fast | Noticeably slower |
| Browser support | Everywhere | All current major browsers | All current major browsers |
“Usually” and “often” are doing honest work in that table. How much smaller a WebP or AVIF file comes out depends on the image, the quality setting and the encoder. A busy photo of a market stall behaves differently from a plain studio shot on a white background. Test with your own images rather than trusting anyone’s average.
JPEG: still fine, just not the lightest
JPEG has been the web’s photo format for decades, and every device, email client, editing app and social network handles it. That universality is its strength. If you send an image to a printer, a marketplace or a client, JPEG is the format nobody will struggle with.
Its weakness on a website is weight. For the same visible quality, modern formats can usually produce a smaller file. JPEG also cannot do transparency, so it is no good for a logo that sits on a coloured header.
If you stay with JPEG for any reason, two details help. A good encoder, such as MozJPEG, which tools like Squoosh offer, produces smaller files than many default camera or phone exports. And saving as progressive JPEG lets the picture appear as a rough version first and sharpen as it downloads, which feels quicker on slow connections.
WebP: the sensible default
WebP does nearly everything the older formats do. It can be lossy like JPEG, lossless like PNG, transparent, and even animated. All current major browsers support it, WordPress accepts WebP uploads, and every mainstream optimisation plugin can create it.
For photos on a typical business site, WebP is the safe step up from JPEG. It encodes quickly, so converting a whole media library is practical, and the quality at moderate settings is good for faces, products and interiors.
Where it can disappoint: very fine detail at low quality settings can look slightly smeared, and colour in strong reds sometimes looks less crisp than in a carefully made JPEG. Neither is a reason to avoid it. It is a reason to look at a few converted images at full size before converting thousands.
AVIF: smaller, slower, worth testing
AVIF tends to give the smallest files for photographs, especially at lower quality settings where it holds up better than JPEG and WebP. It supports transparency and wider colour ranges too. All current major browsers now support it, and recent WordPress versions accept AVIF uploads where the server’s image library can process them.
The trade-offs are practical rather than visual:
- Encoding is slow. Creating AVIF files takes much more processing than WebP. On cheap shared hosting, converting a big library on your own server can be slow or hit resource limits.
- Server support varies. Whether WordPress can make AVIF copies depends on the version of the image library your host has installed. Many plugins sidestep this by converting on their own servers.
- Detail can look smoothed. At aggressive settings, AVIF tends to soften texture, such as fabric, hair or grass, rather than showing blocky artefacts. That looks cleaner but can make products look less real.
A reasonable approach is to serve AVIF where your plugin or CDN produces it reliably, with WebP or JPEG as the fallback. If your setup can only do one modern format, WebP is the easier one to live with.
Which format for which kind of image
Photographs
WebP or AVIF, lossy. Keep a JPEG version available as a fallback or for sharing outside the website. Never PNG: a photograph saved as PNG can be many times heavier than it needs to be with no visible benefit.
Product photos on white or plain backgrounds
WebP or AVIF, lossy, at a slightly higher quality than you would use for a background photo. Customers zoom in on products, so check the edges and textures at full size.
Screenshots and images with text
These are the awkward middle. Lossy compression blurs small text, so either use WebP lossless, a lossy WebP at high quality, or PNG if the screenshot has few colours. Compare file sizes; for some screenshots PNG genuinely wins.
Logos and icons
SVG wherever you have a vector version. An SVG logo is sharp at any size and often tiny. If you only have a bitmap, use PNG or lossless WebP with transparency. For icons used across the site, our post on SVG icons versus icon fonts covers the wider choice.
Illustrations and flat graphics
SVG if it was drawn as vectors. Otherwise lossless WebP or PNG. Flat areas of colour show JPEG artefacts badly.
Animations
Avoid large animated GIFs. GIF is limited to a small colour palette and makes very heavy files. A short muted MP4 or WebM video, or an animated WebP, is usually far lighter for the same clip.
Quality settings: the number means less than you think
Every tool offers a quality slider, often from 0 to 100. The trap is assuming the numbers match between formats or tools. A WebP at 75 is not the same as a JPEG at 75, and two different JPEG encoders at the same number can produce different results.
Practical rules that hold up:
- Choose two or three representative images: a face, a product and something with fine texture.
- Export each at a few quality levels in the format you plan to use.
- View them at actual size on a normal screen and on a phone. Pick the lowest setting where you cannot see a difference without searching for one.
- Use that setting for the whole site, and write it down so the next person uses it too.
WordPress applies its own default quality when it creates the resized copies of each upload, and developers can change it with a filter. Optimisation plugins usually offer named levels instead of numbers. Either way, decide once by looking, rather than by picking the most aggressive option.
If you want to see the effect quickly without installing anything, our free image compressor lets you move a quality slider and switch the output between JPEG and WebP in your browser, and shows how much smaller each file became. Open the result next to the original to judge the quality by eye.
When switching format makes things worse
Converting is not automatically a saving. Watch for these cases:
- Re-compressing an already compressed JPEG. Each lossy pass throws away more detail. Convert from the best original you have, not from a small copy downloaded off the website.
- Lossless conversion of a photo. Turning a JPEG photo into lossless WebP can produce a bigger file. Photos should be converted to lossy.
- Keeping the wrong dimensions. A 5000-pixel-wide photo in AVIF is still a 5000-pixel-wide photo. Format helps, but getting the pixel size right usually saves more; see image dimensions and file size.
- No fallback for odd clients. Browsers are fine, but some email newsletters, older apps and third-party tools that pull images from your site may expect JPEG or PNG.
This is why the format question is only one part of fixing heavy images. Our guide to finding which images slow a site down helps you decide whether format is even your main problem, and the complete guide to website speed puts images alongside caching, scripts and hosting.
Putting it into practice
Once you have chosen, the conversion itself is a separate job: which plugin or service does it, whether originals are kept, and how the right file reaches each browser. That is covered step by step in converting images to WebP in WordPress. For the decision itself, this is the summary most sites can follow:
- Photos: lossy WebP as standard, AVIF where your tools make it easy, JPEG kept as fallback.
- Logos and icons: SVG first, then PNG or lossless WebP.
- Screenshots: test PNG against high-quality WebP and keep the smaller one that stays readable.
- Animations: short video, not GIF.
Frequently asked questions
Should I convert my existing JPEG library to AVIF or just new uploads?
Converting the existing library usually gives the bigger benefit, because older uploads are often the heaviest. Do it with a plugin or service that keeps the original files, run it at a quiet time, and check a sample of pages afterwards. If your host struggles with AVIF encoding, convert the library to WebP and use AVIF only for new uploads.
Do WebP and AVIF images lose quality compared with JPEG?
All three lose some data when used in lossy mode, and the visible result depends on the quality setting. At sensible settings most people cannot tell the difference on screen. Problems appear when the setting is very low, or when a file is converted from an already heavily compressed copy instead of a good original.
Can I upload WebP or AVIF images straight from my phone?
Many phones save photos in HEIC or JPEG, not WebP or AVIF. You can convert them before uploading with an editing app or a browser tool, or upload JPEG and let an optimisation plugin create the modern versions. The second route is easier for staff and keeps a JPEG original on the server.
Is PNG ever the right choice for a website photo?
Almost never. PNG is lossless, so it keeps every pixel of a photograph and produces very large files. It is useful for simple graphics, screenshots with few colours and images that need transparency when SVG is not available. For photos, a lossy modern format is lighter with no visible downside.
Choosing settings and converting a library safely is part of our speed optimisation work, along with the rest of what makes a page slow, for anyone who would rather not run the format tests themselves.
Next in this series: Convert Images to WebP in WordPress and Check It Works
