Use JPG for photographs, PNG for screenshots, logos and anything that needs a transparent background or perfectly sharp edges, and WebP when you control the web page and want the smallest file. Converting from one to another is easy, but it cannot repair what the first format already lost. This article gives the rules for choosing, the traps that catch people when they convert, and a way to test all three on your own picture in under a minute.
The three formats in one table
| Format | How it stores the picture | Transparent background | Best for | Watch out for |
|---|---|---|---|---|
| JPG | Lossy: discards detail the eye is unlikely to miss | No | Photographs that must open everywhere | Every re-save loses a little more; text and sharp lines blur |
| PNG | Lossless: every pixel kept exactly | Yes | Screenshots, logos, diagrams, text on flat colour | Photos become very large; there is no quality setting |
| WebP | Lossy or lossless, depending on how it is saved | Yes | Photos and graphics on web pages | A few older programs and upload forms still refuse it |
Two older formats show up too. GIF stores at most 256 colours per frame, which is why photos look speckled in it, and it is the format of simple animations. BMP is uncompressed and rarely worth keeping.
Why a photo and a screenshot want different formats
A photograph is full of smooth gradients and noise. Lossy compression exploits that: it can throw away small differences between neighbouring pixels and the picture still looks the same at normal size. That is why a JPG of a landscape is a fraction of the size of a PNG of the same landscape.
A screenshot or a logo is the opposite. It has large areas of one flat colour and hard edges around letters. Lossy compression leaves faint smudges around those edges, the familiar fuzz around text in a badly saved screenshot, and it saves little because flat areas were already cheap to store. PNG handles them perfectly and stays small.
Decide in four questions
- Does it need a transparent background? Then not JPG. Use PNG, or WebP.
- Is it a photograph? Use JPG, or WebP if the destination accepts it.
- Is it mostly text, lines or flat colour? Use PNG, or WebP at a high quality.
- Will someone with an old program, a government upload form or a print shop open it? Use JPG or PNG. They are accepted almost everywhere.
If the answer to the last question is not known, choose JPG for photos and PNG for graphics.
Converting with the image toolkit
The image toolkit converts between the three formats in your browser, so the pictures are not uploaded. To test which one suits a picture:
- Drop the file on the box.
- Under Output format, choose JPG, PNG or WebP. "Keep original format" leaves the format as it is.
- For JPG and WebP, set the Quality. About 75 to 85 is a good starting range for photos. PNG shows a note instead, because it has no quality setting.
- Look at the row. It shows the new size and either "smaller" or "larger" next to a percentage. Change the format and the list recalculates, so you can try all three on the same picture and compare the numbers.
- Download the file, or take several as a ZIP. The new file is named like the original with
-optimizedadded before the extension.
Do this on one representative picture before you convert a hundred.
The traps
Renaming is not converting. Changing photo.png to photo.jpg in a file manager changes the name and nothing else. The data inside is still PNG. Some programs cope, others refuse the file or show it broken. Convert it properly.
Converting up does not restore anything. Turning a JPG into a PNG makes the file much bigger, because PNG now stores all the pixels, including the blocky ones, exactly. The picture does not get any better. The reverse is also true: a PNG saved as JPG is permanently softened.
Transparency becomes white in JPG. JPG cannot store transparency, so when a transparent PNG is converted to JPG the empty areas are filled with white. If the picture was going onto a dark page, keep PNG or WebP.
Stacking lossy conversions. JPG to WebP to JPG loses detail at every step. Always convert from the best copy you have, which is usually the original.
The result can be larger. Re-encoding a picture that was already compressed hard, or saving a photo as PNG, can increase the size. The row says so. Choose JPG or WebP, lower the quality a little, or reduce the dimensions.
GIF and BMP. Browsers can read them but cannot write them, so with "Keep original format" they come out as PNG. A GIF is read from its first frame only, so an animation becomes a still picture.
HEIC. Photos from an iPhone in HEIC format are not supported. On the phone, set Settings, Camera, Formats to Most Compatible, or share the picture as JPG, then convert that.
What else happens during a conversion
The toolkit draws the picture again and writes a new file. Two side effects are worth knowing. The colour profile is converted to standard sRGB, which keeps colours right on ordinary screens. And the hidden metadata, including the camera model, the date and any GPS location, is not carried across. That is useful when you are about to share a photo, and the article on removing GPS location from photos explains why. If you want the metadata to survive, convert with a desktop editor instead.
Which should you use on a website?
For photographs, WebP usually produces a smaller file than JPG at similar quality and every current browser displays it. The catch is everything outside the browser: email clients, older office programs, some content management systems and some upload forms. If you only control the page, WebP is a good choice. If the file will travel, JPG is safer. For the size and quality side of the question, see the guide to compressing images without losing quality.
A short checklist
Photo for everyone: JPG at about 80. Photo for your own web page: WebP at about 80. Screenshot, logo or anything with transparency: PNG. Always convert from the original, never rename to convert, and test one picture before you do a batch.