Why Format Choice Matters
The format you save an image in affects three things: file size, visual quality, and whether the image can have transparency. Pick the wrong format and you either ship an image that is far larger than it needs to be, or one that looks visibly worse than the source. There is no single "best" format — the right choice depends on the content of the image and where it will be displayed.
The four formats most people deal with are PNG, JPG (JPEG), WEBP, and GIF. Each was designed for a different purpose, and once you understand the trade-offs, choosing between them takes seconds.
PNG: Lossless and Transparent
PNG (Portable Network Graphics) uses lossless compression, which means no pixel data is discarded — a PNG always looks identical to its source. It supports full alpha-channel transparency, making it the standard format for logos, icons, UI graphics, and any image that needs to sit on a variable background.
The trade-off is file size. Because PNG preserves every pixel, photographic images saved as PNG are much larger than the same image as JPG or WEBP. PNG is best for graphics with sharp edges, flat colours, and text — screenshots, diagrams, and anything where crispness matters.
JPG: The Photo Standard
JPG (JPEG) uses lossy compression designed specifically for photographs. It discards visual information that the human eye is bad at noticing, which lets it shrink photos to a fraction of their uncompressed size while still looking good. JPG does not support transparency.
JPG's compression introduces artefacts — blockiness and "ringing" around high-contrast edges — that become more visible at lower quality settings. For most photos, a quality of 80–85 produces a file that looks nearly identical to the source at a small fraction of the size. JPG is a poor choice for graphics with sharp edges (text, logos) because the artefacts are obvious on straight lines.
WEBP: The Modern All-Rounder
WEBP was introduced by Google to combine the best of PNG and JPG in a single modern format. It supports both lossy and lossless compression, full alpha-channel transparency, and animation. A WEBP file is typically 25–35% smaller than the equivalent JPG for photos, and smaller than PNG for graphics.
Browser support for WEBP is now universal across modern browsers, and most content management systems and CDNs serve WEBP automatically. If you are optimising a website today, WEBP is usually the right default for both photos and graphics — unless you need to support very old software.
GIF: Animation and Simple Graphics
GIF is best known for animation, but it is also a serviceable format for simple static graphics. It supports binary (on/off) transparency and uses lossless LZW compression. Its hard limit of 256 colours makes it unsuitable for photographs, but fine for flat-colour graphics and short loops.
For static graphics, PNG or WEBP almost always produce a smaller, better-looking file. Use GIF when you specifically need animation and your content is simple enough that 256 colours are adequate.
How to Choose
For photographs: use WEBP where possible, falling back to JPG. For graphics with sharp edges, text, or transparency: use WEBP or PNG. For animations: use GIF for universal support, or animated WEBP for smaller files on modern platforms. For anything that needs to work in very old software: use JPG or PNG.
When in doubt, export the same image in two formats at a comparable visual quality and compare the file sizes. The difference is often large enough that the right choice is obvious.
Converting Between Formats
Converting from a lossy format (JPG) to a lossless one (PNG) does not recover detail that was already discarded — it only produces a larger file that looks identical to the JPG. Converting PNG to JPG is lossy and drops transparency (the transparent area becomes solid white). Converting either to WEBP gives you a smaller modern file with the same visual quality.
A reliable workflow is to keep a lossless master (PNG or the original camera export) and produce WEBP or JPG copies for delivery. This way you can always re-export at a different size or quality without compounding lossy artefacts.
Quality vs. File Size Trade-offs
For lossy formats, the quality setting is the main lever on file size. Most photos look indistinguishable from the source at quality 80–85. Dropping to 70 starts to introduce visible artefacts in smooth gradients and skies. Going below 60 is rarely worth the size saving.
Resizing to the dimensions you actually need is the other big lever. A 4000px-wide photo resized down to 1280px for a website is dramatically smaller than the full-resolution original, and looks just as sharp on screen. Combine right-sizing with format conversion and sensible quality to get the smallest acceptable file.
