Farid Zaripov
Picking an image format comes down to four questions: is it a photograph or a graphic, does it need transparency, does it need to survive repeated editing, and where will it be opened. Answer those and the choice is nearly automatic.
The Formats
| Format | Compression | Transparency | Animation | Support |
|---|---|---|---|---|
| JPEG | Lossy | No | No | Universal |
| PNG | Lossless | Yes (alpha) | No | Universal |
| WebP | Both | Yes | Yes | All modern browsers |
| AVIF | Both | Yes | Yes | Modern browsers |
| HEIC | Lossy | Yes | Yes (Live Photos) | Apple ecosystem |
| GIF | Lossless, 256 colors | 1-bit only | Yes | Universal |
| SVG | Vector | Yes | Yes | Universal |
JPEG — photographs, everywhere
Thirty years old and still the correct answer for photographs going somewhere unpredictable. Its compression discards detail the eye is least sensitive to, which works beautifully on continuous-tone images and badly on sharp edges — text and line art acquire visible halos.
The critical property is that JPEG is generation lossy: every save re-compresses and degrades. Open, crop, save, reopen, adjust, save again, and the artifacts accumulate permanently. Edit from an original, export to JPEG once.
Quality settings in practice: 90–95 is visually indistinguishable from the original for most photos; 80–85 is the sensible web default; below 70 the blocking is visible in flat areas like skies.
PNG — graphics and transparency
Lossless, so it survives any number of edit-and-save cycles unchanged, and it supports a full alpha channel for smooth transparency. Both properties make it right for screenshots, logos, icons, diagrams and anything with sharp edges or flat color.
It is the wrong choice for photographs. A photo saved as PNG is typically five to ten times larger than the same image as a good-quality JPEG, with no visible benefit — lossless compression cannot find much redundancy in the noise of a real photograph.
WebP — the current web default
Offers both lossy and lossless modes, transparency in both, and animation. Lossy WebP runs roughly 25–35 % smaller than JPEG at comparable quality; lossless WebP is about 20–25 % smaller than PNG. Support is universal across current browsers.
The remaining friction is outside the browser: some desktop software, older phones and various upload forms still reject it, which is why photos shared by email or handed to a client are safer as JPEG.
AVIF — smaller still
Based on the AV1 video codec, AVIF typically beats WebP by a further 20–30 % and handles gradients and flat color with less banding. It also encodes noticeably more slowly and support, while good in modern browsers, is thinner in desktop tools. Worth using for large hero images on a site you control, with a fallback.
HEIC — the iPhone format
Apple’s default camera format since iOS 11. It roughly halves the file size of an equivalent JPEG and stores extras such as depth maps and Live Photo frames. Outside the Apple ecosystem, support is patchy — Windows needs a codec extension, many web forms reject it outright, and plenty of desktop editors cannot open it.
That gap is why photos taken on an iPhone so often "don’t work" when sent to a Windows PC or uploaded somewhere. Converting to JPEG solves it, at the cost of the extra metadata: HEIC conversion produces a file everything can open. On the phone itself, Settings → Camera → Formats → Most Compatible switches the camera to JPEG permanently if the compatibility matters more than the storage saving.
GIF — largely obsolete
Limited to 256 colors and 1-bit transparency, so photographs look posterised and edges look jagged. Animated GIFs are also enormous: a short clip that would be 500 KB as a video routinely runs to 5 MB as a GIF. For animation, a short muted MP4 or WebM is smaller and looks better. GIF survives on cultural momentum and on platforms that accept nothing else.
SVG — vector, not pixels
Stores shapes and paths rather than a pixel grid, so it scales to any size without loss, is usually tiny, and can be styled or animated with CSS. Correct for logos, icons, charts and illustrations; impossible for photographs. One caution: an SVG is code, so files from untrusted sources should be sanitised before being served.
Choosing
- Photo for the web, you control the site → WebP, with a JPEG fallback
- Photo going to a client, an email or an unknown system → JPEG at quality 85–90
- Screenshot, diagram or anything containing text → PNG
- Logo or icon → SVG; PNG when a raster is required
- Needs transparency and small size → WebP
- iPhone photo that must open anywhere → convert to JPEG
- Master copy you will keep editing → the original raw or PNG, never a JPEG round-trip
Four Things That Waste Space
- Uploading at camera resolution. A 4000-pixel-wide photo displayed in a 800-pixel column wastes about 96 % of its data. Resize to the largest size actually shown, allowing for high-density screens. Resizing to platform dimensions handles the common targets.
- PNG for photographs. The single most common format mistake, and worth five to ten times the necessary size.
- Metadata. Camera EXIF, GPS coordinates, editing history and embedded color profiles can add hundreds of kilobytes. Most exporters can strip them — and stripping GPS before publishing is worth doing regardless of size.
- Quality 100. JPEG at 100 is substantially larger than 90 and visually identical. The curve flattens hard above 90.
Resolution, Density and DPI
A pixel count is not a physical size. The DPI value stored in a file only matters when printing — for screens, what counts is the pixel dimensions.
High-density displays complicate this: a 400-pixel-wide slot on a 2× screen shows 800 physical pixels, so an image exported at 400 looks soft. Export at twice the display size for those, and let the page scale it down.
For print, the rule is 300 DPI at final size: a 10 × 15 cm print needs roughly 1200 × 1800 pixels. Large-format work viewed from a distance survives 150 DPI comfortably.
What Compression Cannot Undo
Recompressing an already-compressed image adds damage without recovering anything. Converting a JPEG to PNG does not restore lost detail — it locks in the artifacts losslessly and makes the file bigger. Converting between lossy formats compounds two sets of artifacts.
The practical discipline: keep the original, edit from it, and export to the delivery format once. If the only copy left is already compressed, enhancement tools can reduce the visible symptoms, but the information itself is gone.
