JPG vs PNG vs WebP: which image format should you use?
Picking the wrong image format can make files several times bigger than they need to be, or make a logo look fuzzy. Here is what each common format is good at, and when to use it.
The short answer
- Photos: JPG, or WebP on a website.
- Screenshots, text, logos and diagrams: PNG.
- Anything that needs a transparent background: PNG or WebP.
- The smallest files for a website: WebP or AVIF.
JPG
JPG is lossy: it throws away detail you are unlikely to notice to keep files small. That makes it excellent for photos and it opens absolutely everywhere. It cannot store transparency, and sharp edges such as text can pick up faint smudges.
PNG
PNG is lossless, so nothing is thrown away. Text and lines stay perfectly crisp and it supports transparency, which makes it the right choice for screenshots and logos. The trade-off is size: a photo saved as PNG is usually several times larger than the same photo as JPG.
WebP
WebP was created by Google for the web. It can work either lossy like JPG or lossless like PNG, supports transparency, and is typically about a quarter to a third smaller than JPG at similar quality. Every modern browser supports it, but some older desktop programs still cannot open it.
AVIF and HEIC
AVIF is newer still and often smaller than WebP, which makes it great for fast websites; current versions of Chrome, Edge, Firefox and Safari all support it. HEIC is the format iPhones use for photos. Both are efficient, but for sharing with anyone else, JPG remains the safest choice.
How to convert between formats
- Photo saved as PNG and too big: PNG to JPG.
- Need a lossless copy or a format that supports transparency: JPG to PNG.
- A WebP image that will not open: WebP to JPG.
- Making images for a website: JPG to AVIF.
- An AVIF file that will not open: AVIF to JPG.
- Just need a smaller file in the same format: the Image Compressor.
Pick by the job
- A photo to email or share: JPG. It opens everywhere and stays small.
- A photo for your own website: WebP, with JPG as the fallback if you need maximum compatibility.
- A screenshot for a document or a help article: PNG, so text stays sharp.
- A logo or icon with a see-through background: PNG, or WebP if it is only for the web.
- A diagram with flat colours and thin lines: PNG, which keeps edges crisp.
- An image for printing: the highest quality original, ideally JPG at high quality or a lossless file. Do not use a heavily compressed web copy.
- A product photo in an online shop: WebP or JPG at a sensible size, since smaller files load faster.
Size matters more than format
A photo that is 6000 pixels wide is heavy in any format. Before you worry about JPG versus WebP, check the dimensions. Reducing a huge image to the size it is actually shown at, with Resize Image, usually saves far more than changing the format does. Then compress it with the Image Compressor.
Mistakes that make images worse
- Saving a JPG again and again. Each save loses a little more detail, so edit from the original and save once.
- Saving a screenshot with text as JPG. Faint smudges appear around letters; use PNG.
- Saving a photo as PNG for a website. It works, but the file is several times larger than it needs to be.
- Converting a small image to a larger one. Enlarging cannot add detail that was never there.
Transparency, at a glance
JPG cannot hold a transparent background. PNG, WebP and AVIF can. If you save a logo with a see-through background as JPG, the transparent areas turn solid, usually white or black. When you need to keep transparency, stay with PNG or WebP.
Compatibility today
Current versions of Chrome, Edge, Firefox and Safari all open WebP and AVIF. Trouble usually comes from older desktop programs, some email clients and some upload forms, which may accept only JPG or PNG. When in doubt, convert to JPG for sharing.
Frequently asked questions
Does converting PNG to JPG lose quality?
A little, because JPG is lossy, but for photos it is usually invisible. For screenshots or text, keep PNG.
Which format is best for website speed?
WebP or AVIF. Both are much smaller than JPG or PNG at similar quality.
Can I convert a JPG back to the original quality?
No. Converting a JPG to PNG keeps it from losing more detail, but it cannot restore detail that was already removed.
Is PNG higher quality than JPG?
PNG keeps every detail exactly, so it is better for text and graphics. For photos a good JPG looks the same to the eye at a much smaller size.
Should I use WebP for everything on my website?
It is a good default for photos and graphics because the files are small, and every modern browser supports it.
Why is my PNG so much bigger than the JPG of the same picture?
PNG stores every pixel without loss, which is costly for photos. JPG discards detail you are unlikely to notice.
Does converting to JPG remove the transparent background?
Yes. JPG has no transparency, so see-through areas become a solid colour.