JPG, PNG, or WebP: choosing the right image format
How the three common web image formats differ, which one to export, and when converting between them helps or hurts.
Most image problems are format problems: a logo saved as JPEG looks fuzzy, a photo saved as PNG is enormous, or a transparent icon turns into a white box after conversion. Each format was designed for a particular kind of image, and matching the two makes those problems disappear. This guide compares JPEG, PNG, and WebP, and explains what conversion can and cannot do.
At a glance
| JPEG | PNG | WebP | |
|---|---|---|---|
| Compression | Lossy | Lossless | Lossy or lossless |
| Transparency | No | Yes | Yes |
| Best for | Photos | Screenshots, logos, graphics | Both, on the web |
| Support | Universal | Universal | All current browsers, most apps |
JPEG: small photos, permanently compressed
JPEG divides an image into 8 × 8 pixel blocks and discards detail the eye is least likely to notice, especially fine colour variation. For photographs this is an excellent trade: a 12-megapixel photo can be stored in 2–4 MB instead of 36 MB of raw pixels. The discarded detail is gone for good, and every re-save loses a little more, which is called generation loss.
JPEG struggles with sharp edges and flat colours. Around text, lines, and logos it produces visible halos and blocky noise. It also has no transparency: every pixel is fully opaque.
PNG: lossless, transparent, larger
PNG stores pixels exactly and supports an alpha channel for full and partial transparency. It compresses well when an image has large areas of the same colour and repeated patterns, as in screenshots, UI graphics, charts, diagrams, and logos. On photographs it compresses poorly: the same photo saved as PNG is often 5–10 times the size of a good JPEG.
WebP: efficient, flexible, widely supported
WebP offers both a lossy mode, typically 25–35% smaller than JPEG at similar visual quality, and a lossless mode that is usually smaller than PNG, and it supports transparency in both. Every current version of Chrome, Edge, Firefox, and Safari displays it, as do most image editors and content management systems. It is the pragmatic default for images on the web. Keep JPEG or PNG for email, print services, document templates, and older software that may not accept WebP.
Newer formats such as AVIF can compress even further, but support in editing tools is still patchier. They are not handled by the tools here.
Converting between formats
- JPG to PNG stores the decoded pixels losslessly, so no further quality is lost in later edits. It cannot restore detail JPEG already discarded, and the file usually grows.
- PNG to JPG needs a background colour, because JPEG cannot store transparency. It works well for photos saved as PNG and badly for screenshots of text.
- PNG to WebP and JPG to WebP usually reduce size and keep transparency where the source had it.
- WebP to JPG and WebP to PNG make images saved from websites usable in software that does not accept WebP.
- Compress image re-encodes at a quality you choose and reports the real size change, including when the result is larger.
One rule covers all of them: converting a lossy image to a lossless format preserves what is left, but never restores what was lost. Always convert from the best original you have.
Quality settings in practice
For lossy JPEG and WebP, quality 75–85 is a good default for photos on websites. Use 90 or higher for images you will edit further or print. Below about 60, artifacts appear in smooth areas such as skies, skin, and gradients. Resizing to the displayed size saves far more than lowering quality, as the image resizing guide explains.
Details that surprise people
Phones store orientation in EXIF metadata rather than rotating the pixels. The tools here apply EXIF orientation when they decode, so the preview and output match what you see in your photo app. Re-encoding also removes metadata such as GPS location, which is good for privacy, and colour profiles, which can slightly shift colours in wide-gamut photos. If privacy is the goal, remove image metadata does this deliberately and tells you what was removed. Animated images, SVG, HEIC, AVIF, and CMYK JPEG files are not supported. Convert HEIC photos from an iPhone to JPEG in the Photos app or with the camera setting “Most Compatible”.
