Which image format to choose by use
Published · Updated 2 min read
JPG, PNG, WebP and AVIF are not meant for the same images. The right choice depends on what the image shows: a photograph, a screenshot with text, or a logo on a transparent background. Choosing badly breaks nothing, but can make the file heavier or damage the outlines.
What the reference says
According to the MDN documentation, JPEG suits photographs but not drawings with sharp outlines. PNG keeps every pixel exact and suits screenshots, diagrams and logos. WebP compresses better than both and accepts transparency. AVIF compresses even more and also accepts transparency.
The same images in several formats
The weight obtained for three starting images in PNG, a scene close to a photograph of 2,400 by 1,600 pixels, a screenshot of 1,400 by 900 and a transparent logo of 900 by 900, is as follows.
| Image | Original PNG | JPG | WebP |
|---|---|---|---|
| Photograph | 2,36 MB | 1,08 MB | 1,02 MB |
| Screenshot | 67 KB | 115 KB | 49 KB |
| Transparent logo | 9 KB | 35 KB (on a white background) | 14 KB (transparency kept) |
What we take from it
For a photograph, JPG and WebP divide the weight by more than two. For a screenshot or a logo, JPG weighs more than the original PNG, and the reference advises against it for sharp outlines: PNG or WebP are better. A useful detail: converting a PNG to PNG again does not lighten it, and can even make it heavier, like the photograph that goes from 2.4 to 3.3 MB.
AVIF
AVIF export depends on your browser. When it is not available, the tool says so and produces no file: choose WebP, which gives a close result.
For which cases
Choosing between quality and weight: a website, a printed document, a message or a social network do not call for the same format. The right choice lightens the file without damaging the outlines.
Check the result
- Compare the resulting weight with the original weight.
- Look at the edges of the text and the gradients by zooming in.
- Keep the original image.
To know which format is read everywhere, see Which image format is accepted everywhere.
Frequently asked questions
- Which format for a photograph?
- JPG or WebP: on a photograph, they divide the weight by more than two compared with PNG.
- Which format for a screenshot or a logo?
- PNG or WebP. JPG weighs more than PNG on these images and damages sharp outlines.
- Does converting a PNG to PNG again lighten it?
- No, it can even make it heavier.
- Why does AVIF export not work?
- It depends on your browser. When it is not available, the tool says so and produces no file: choose WebP.