The short answer: photographs go to AVIF or WebP for the web and JPG when you need something anything can open; flat graphics, screenshots, and anything with transparency go to PNG or WebP; logos and icons go to SVG. That covers almost every real decision. The rest of this page explains why, and shows you the three conversion mistakes that damage files without any obvious warning.
The reason the choice matters is that image formats are not interchangeable containers. Each one makes a different bargain about what to throw away, and once something is discarded, converting to a "better" format does not bring it back.
Lossy or lossless: the one distinction that explains everything
Every format sits on one side of this line, and it decides what happens when you convert.
Lossless formats — PNG, and the lossless mode of WebP — reconstruct the original pixels exactly. Compression works by finding patterns and describing them more compactly, the same way a zip file does. Save, reopen, and re-save a PNG a hundred times and the pixels are identical.
Lossy formats — JPG, and the default modes of WebP and AVIF — permanently discard detail your eye is unlikely to miss, then compress what remains. This is why a photo can be a tenth the size of its PNG equivalent. The catch is that the discarding happens every time you save.
That leads to generation loss: open a JPG, crop it, save it, open it again, adjust it, save again — each round of re-encoding throws away a little more, and the artefacts accumulate around edges and in flat areas. The rule that follows is simple and worth internalising. Keep an untouched original in a lossless format, edit from that, and export a lossy copy each time. Never edit and re-save the same lossy file repeatedly.
What each format is actually for
| Format | Compression | Transparency | Animation | Best for |
|---|---|---|---|---|
| JPG / JPEG | Lossy | No | No | Photographs; maximum compatibility |
| PNG | Lossless | Yes, full alpha | Only as APNG | Screenshots, flat graphics, transparency, text in images |
| WebP | Both modes | Yes, in both modes | Yes | A general-purpose web replacement for JPG, PNG, and GIF |
| AVIF | Both modes | Yes | Yes | Photos on the web where you want the smallest file |
| GIF | Lossless, 256 colours | 1-bit only | Yes | Legacy short animations |
| SVG | Vector, not pixels | Yes | Yes, via CSS/SMIL | Logos, icons, diagrams, anything that must scale |
A few points that decide most real cases:
JPG has no transparency at all. Convert a PNG logo with a transparent background to JPG and the transparency becomes a solid colour — usually white, sometimes black. There is no setting that avoids this; the format has no alpha channel. This is the single most common conversion accident.
PNG is the wrong choice for photographs. It will store them perfectly and produce a file several times larger than it needs to be, because photographic noise gives lossless compression very little to work with.
PNG is the right choice for screenshots and anything with text. Lossy compression puts visible fringing around sharp, high-contrast edges, which is exactly what letterforms and UI chrome are made of.
SVG is not a raster format at all. It stores shapes and coordinates rather than pixels, so it redraws crisply at any size and stays tiny. It is ideal for logos and icons and useless for photographs.
Where WebP and AVIF fit now
Both are modern formats designed to do the same job as JPG and PNG in fewer bytes, and browser support is no longer the obstacle it once was.
WebP handles both lossy and lossless compression, supports alpha transparency in both modes, and does animation. It is supported across the current major browsers — Chrome, Firefox, Edge, Opera, and Safari from version 14 onwards. As a single replacement for JPG, PNG, and GIF, it is the safe modern default.
AVIF is derived from the AV1 video codec and generally produces smaller files than WebP at comparable visual quality, particularly for photographic images. It supports alpha, higher bit depths, and wide colour gamut. Support arrived in Chrome and Opera in 2020, Firefox in 2021, Safari in 16.4, and Edge in 121 — so it is broadly available, but it is the format most likely to meet an old browser or an application that cannot open it.
JPEG XL appears in these discussions too. It is technically strong, but browser support remains uneven, so it is not yet a practical default for the web.
The pragmatic approach for a website is not to choose one. Serve AVIF with a WebP or JPG fallback using the <picture> element, and the browser takes the first format it understands:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description of the photo">
</picture>
For files you are emailing, printing, or handing to someone else, ignore all of this and send JPG or PNG. Compatibility beats efficiency the moment the file leaves your control.
Quality settings, in plain terms
Lossy encoders expose a quality number, usually 0–100. It is not a percentage of anything and the scales are not comparable between formats — quality 75 in JPG and quality 75 in AVIF are different amounts of compression.
Useful starting points: photographs at JPG quality 75–85 look fine to most eyes, and going above about 90 mostly adds bytes rather than visible detail. WebP and AVIF reach similar perceived quality at lower numbers. Always judge by looking at the result at full size, not by trusting the slider.
One more thing to watch: compression is not resizing. A 6000-pixel-wide photo displayed in an 800-pixel column should be resized first, then compressed. Resizing to the size you actually need almost always saves more than any quality-slider tuning.
The three gotchas that quietly ruin files
Transparency vanishing. Any conversion to JPG flattens alpha onto a background colour. If a converter asks which background to use, that is the moment to notice; if it does not ask, assume white. Convert to PNG or WebP instead when transparency matters.
Metadata disappearing — or not. Photos carry EXIF data: camera settings, timestamps, and frequently GPS coordinates. Many converters strip all of it, which is good for privacy and bad if you needed the capture date. Others preserve everything, including a home address embedded in a holiday photo you are about to publish. Check which behaviour your tool has before it matters — one of the things worth testing when picking a free online tool — and note that colour profile information often travels with that metadata — losing an embedded ICC profile is why a converted image sometimes looks slightly washed out. If you work with colour codes across formats, the hex, RGB, and HSL explainer covers the notations involved.
Upconverting a lossy file. Converting an already-compressed JPG to PNG does not restore detail. It faithfully preserves the compression artefacts in a lossless wrapper and hands you a much larger file. Always convert from the highest-quality original you have.
A quick decision path
- Is it a logo, icon, or diagram made of shapes? Use SVG.
- Does it need a transparent background? PNG, or WebP if it is for the web.
- Is it a screenshot, chart, or image containing text? PNG, or lossless WebP.
- Is it a photograph for a website? AVIF or WebP, with a JPG fallback.
- Is it a photograph going to someone else, or to print? JPG at high quality, or the original raw or TIFF for print.
- Is it a short animation? WebP or AVIF; a video file is usually better still.
Working through those six questions takes seconds and settles the format for almost anything. When a task recurs — resizing, converting a batch, checking a file's real dimensions — an in-browser tool is faster than opening an editor, which is the idea behind the everyday conversion toolkit.
FAQ
Is WebP better than PNG?
For the web, usually — lossless WebP typically produces smaller files than PNG for the same pixels, and it also supports a lossy mode PNG does not have. For sharing files outside a browser, PNG is still the safer choice because virtually every application can open it. Both preserve full alpha transparency, so neither costs you a transparent background.
Will converting PNG to JPG reduce quality?
Yes, twice over. JPG applies lossy compression, so fine detail is discarded, and it has no transparency, so any transparent areas become a solid colour. For a photograph currently stored as PNG the trade is often worth it. For a screenshot, a logo, or anything with text, it is not.
Does converting an image change its dimensions?
No. Format conversion changes how pixels are encoded, not how many there are, so a 1920×1080 image stays 1920×1080. Resizing is a separate operation — and if your goal is a smaller file, resizing to the dimensions you actually display is usually the bigger win.
Can I get quality back by converting to a lossless format?
No. Detail removed by lossy compression is gone from the file, and converting to PNG or lossless WebP simply stores the damaged version without further loss. This is why the original matters: keep a lossless master, and export lossy copies from it rather than from another copy.
Which format is best for uploading to a website?
Upload the highest-quality version your platform accepts, sized to roughly the largest dimensions it will display, and let the platform generate its own optimised variants — most modern site software produces WebP or AVIF automatically. Uploading a pre-compressed file only means the platform compresses an already-compressed image, which is exactly the generation-loss trap.
Convert once, from the original
Choosing an image format is really two decisions: what the picture contains, and where it is going. Photographs to a lossy format, flat graphics and transparency to a lossless one, shapes to SVG, and the web gets the modern formats with a fallback behind them. Keep a lossless master, resize before you compress, and check whether your converter is stripping metadata. Medley Web is building a set of free in-browser converters and micro-tools for exactly these jobs — see what's coming at medley-web.com.
