The Two Types of Compression
**Lossless compression** reduces file size without discarding any data. The original image can be perfectly reconstructed from the compressed file. Used for screenshots, logos, and images with text.
**Lossy compression** permanently discards data — usually fine detail in colour transitions — to achieve smaller file sizes. Once lossy compression is applied, the discarded data is gone. Used for photographs and complex images.
JPEG / JPG
**Type:** Lossy **Best for:** Photographs, complex scenes with gradual colour transitions
JPEG has been the web's standard photograph format since the 1990s. The compression algorithm works by dividing the image into 8×8 pixel blocks, converting colours from RGB to a different colour space (YCbCr) that separates brightness from colour, then discarding colour detail that human vision is less sensitive to.
Quality settings typically range from 1–100. 60–80 is a good balance for web use. Below 60, block artefacts become visible — the telltale "JPEG compression" look. The same image at quality 80 (typically 100–200 KB) vs quality 95 (typically 500–800 KB) looks nearly identical to most people.
**Limitations:** No transparency support. Each re-save re-compresses and loses more data — never re-save a JPEG if you're going to edit it again.
PNG
**Type:** Lossless **Best for:** Screenshots, UI elements, logos, images with sharp edges and text, images requiring transparency
PNG uses DEFLATE compression (similar to ZIP) which is lossless. It's ideal for images with large areas of flat colour, sharp contrasts, or transparency (alpha channel).
PNG is a poor choice for photographs — a high-quality JPEG of the same photograph is typically 5–10× smaller. But for a screenshot with text and interface elements, PNG will be smaller than JPEG while looking better (no compression artefacts on sharp edges).
**PNG-8 vs PNG-24:** PNG-8 uses a palette of up to 256 colours (like GIF), dramatically smaller but limited. PNG-24 supports millions of colours and is the standard.
WebP
**Type:** Both lossless and lossy variants **Best for:** Replacing JPEG for photographs (lossy) or PNG for graphics (lossless) on the web
Developed by Google, WebP typically produces files 25–34% smaller than JPEG at equivalent visual quality, and 26% smaller than PNG for lossless compression. It supports transparency in both modes.
Browser support is now universal (all modern browsers since 2020). The main consideration is whether you need to support IE11 (it doesn't support WebP) or serve images to native apps that may not handle WebP.
AVIF
**Type:** Both lossless and lossy variants **Best for:** Highest compression efficiency where broad compatibility isn't required
AVIF (AV1 Image File Format) is the newest major image format, derived from the AV1 video codec. It typically produces 50% smaller files than JPEG at equivalent quality. It supports HDR, wide colour gamut, and transparency.
The trade-off: encoding AVIF is computationally expensive (slow to generate), and browser support is good but not universal. It's the best format for file size but may not be worth the engineering complexity for all use cases.
GIF
**Type:** Lossless but limited to 256 colours **Best for:** Simple animations only
For static images, GIF is always the wrong choice in 2026. A PNG or WebP will be smaller and better quality. The only legitimate use is simple animations — and even there, short looping video (WebM or MP4) is usually smaller and higher quality.
SVG
**Type:** Vector (not raster) **Best for:** Logos, icons, illustrations that need to scale at any size
SVG files are XML text files describing shapes mathematically. They scale perfectly to any size without quality loss. For a logo that appears at 32px on mobile and 500px on a desktop hero image, a single SVG works perfectly. Unsuitable for photographs.
Quick Decision Guide
- **Photograph for web?** → WebP (with JPEG fallback for old browsers)
- **Transparent background?** → WebP or PNG
- **Logo or icon?** → SVG if possible, PNG otherwise
- **Screenshot or UI?** → PNG
- **Simple animation?** → WebP animated or MP4
- **Maximum compression, modern audience?** → AVIF
NoxaKit's Image Compressor reduces JPEG and PNG file sizes in the browser without uploading your images to a server. The Image Format Converter handles WebP, PNG, JPEG, and other format conversions locally.