The short answer, by content type
Format choice is driven by what is in the image, not by preference. These four rules cover almost every real case.
- Photographs: WebP, or AVIF if you control the delivery pipeline
- Screenshots, logos, UI assets, anything with text or hard edges: PNG, or lossless WebP
- Logos, icons, diagrams and illustrations: SVG, which stays sharp at any size
- Short looping animation: MP4 or WebM video, not GIF
Why WebP is the sensible default
WebP does something no older format does: it covers both jobs. It has a lossy mode that competes with JPG on photographs and a lossless mode that competes with PNG on flat graphics, and it supports transparency and animation in either case.
That means one format handles your photographs, your logos and your animations, which removes a whole class of pipeline decisions. It is supported by every current major browser, so the compatibility argument that held it back for years no longer really applies.
When AVIF is worth the extra cost
AVIF generally compresses better than WebP at the same perceived quality, and adds wide colour gamut and HDR support. On a large image-heavy site the bandwidth saving is real.
The cost is encode time and CPU. AVIF encoding is substantially slower, which matters if you are generating images on demand rather than ahead of time. Support outside browsers is also still patchy, so AVIF is a delivery format, not a storage or handoff format.
The mistake that actually costs you quality
The formats matter less than the number of times you re-encode. Every save of a lossy format - JPG, lossy WebP, AVIF - discards more detail, and that loss is permanent and cumulative. Converting a JPG to WebP does not recover what the JPG already threw away.
So keep a lossless master. Edit in PNG, TIFF or a native editor format, and export to a lossy web format once, at the end. If you are converting an image that has already been through several lossy saves, expect the artefacts to be baked in.
- Keep one lossless master and export from it, every time
- Never edit and re-save a lossy file repeatedly
- Converting between lossy formats compounds loss, it does not reset it
What about HEIC?
HEIC is what your iPhone produces by default, and it is not a web format. Browser support is limited and inconsistent, so an HEIC uploaded to a site will frequently fail to display for other people.
Convert HEIC to JPG for maximum compatibility, or to WebP for a smaller file, before publishing it anywhere. This is the single most common conversion people need and the reason the format trips so many people up.
Common questions
Is WebP better than JPG?
For web delivery, generally yes. WebP produces noticeably smaller files than JPG at comparable visual quality and additionally supports transparency and animation. JPG's remaining advantage is that older desktop software and print workflows accept it without question.
Should I use AVIF instead of WebP?
Use AVIF if you control the image pipeline, generate images ahead of time, and want the smallest possible files. Stay with WebP if encode speed matters, or if the images need to open in software outside the browser.
Does converting an image to WebP improve its quality?
No. Conversion cannot restore detail that a previous lossy save discarded. Converting a heavily compressed JPG to WebP gives you a smaller file containing the same existing artefacts. Always convert from the highest-quality source you have.
Why will my iPhone photos not display on my website?
They are almost certainly HEIC files, which most browsers do not display reliably. Convert them to JPG for maximum compatibility or WebP for smaller files before uploading.
Is PNG or WebP better for screenshots?
Lossless WebP is usually smaller than PNG for the same pixel-exact result, so it wins on size. PNG wins on compatibility, which matters if the screenshot will be pasted into documents or older tools rather than shown on a web page.