Image compression glossary

Every term used across this site, defined in a sentence or two. Grouped by what they describe rather than alphabetically, because that is how they make sense.

The terms people look up most

Lossy: Compression that discards detail permanently. JPEG, WebP, AVIF.
Lossless: Compression that preserves every pixel exactly. PNG, lossless WebP.
Quality factor: The 0–100 encoder setting. An index into quantization, not a percentage.
Artifact: Visible damage introduced by compression: blocking, ringing or banding.
Alpha channel: Per-pixel transparency. PNG and WebP have it; JPEG does not.
Chroma subsampling: Storing colour at lower resolution than brightness. Usually 4:2:0.
Generation loss: Cumulative damage from repeatedly re-saving a lossy image.
Bits per pixel: File bytes × 8 ÷ pixel count. How to compare efficiency across sizes.

The full glossary

Compression mechanics

Codec: Coder-decoder: the pair of algorithms that compress and decompress a format.
Compression ratio: Original size ÷ compressed size. 10:1 means a tenth of the original, or 90% saved.
DCT (discrete cosine transform): The maths that turns an 8 × 8 block of pixels into 64 wave-pattern coefficients. Reversible, and lossless by itself.
DEFLATE: The lossless algorithm behind PNG and ZIP. Finds and shortens repeated sequences.
Entropy coding: Lossless packing that gives short codes to common values. Huffman and arithmetic coding are the usual kinds.
Generation loss: The compounding damage from repeatedly decoding and re-encoding a lossy image.
Huffman coding: The entropy-coding scheme classic JPEG uses.
Lossless: Compression from which the original can be reconstructed exactly.
Lossy: Compression that discards information permanently in exchange for a much smaller file.
Quality factor: The 0–100 setting exposed by lossy encoders. It scales the quantization table.
Quantization: Dividing frequency coefficients and rounding them. The step where lossy compression actually loses data.
Quantization table: The 8 × 8 grid of divisors used in that step. Not standardised between encoders.

Artefacts and visual faults

Artifact: Any visible defect introduced by compression rather than present in the original.
Banding: Visible stripes across what should be a smooth gradient. Common in skies.
Blocking: Visible 8 × 8 squares in flat areas. The signature JPEG failure at low quality.
Dithering: Deliberate noise added to disguise banding when reducing colours.
Halo: A pale or dark fringe around a transparent image's edge, caused by a mismatched matte colour.
Posterisation: Smooth tones collapsing into flat bands, from too few available colour levels.
Ringing: Ghost echoes beside a hard edge. Also called mosquito noise. Why text should not be a JPEG.

Formats

AVIF: A still image format derived from the AV1 video codec. Roughly half the size of JPEG; browsers display it but generally cannot write it.
BMP: An essentially uncompressed bitmap format. Very large, rarely appropriate.
GIF: 256 colours, binary transparency, animation. Obsolete for stills; superseded by animated WebP.
HEIC / HEIF: Apple's default photo container. About half the size of JPEG, but only Safari decodes it in a browser.
JPEG: The lossy photographic standard since 1992. No transparency, universal support.
JPEG XL: A newer format that can losslessly repack existing JPEGs about 20% smaller. Browser support unsettled.
PNG: Lossless with a full alpha channel. Excellent for graphics, very large for photographs.
PNG-8: Indexed PNG: at most 256 colours from a palette. Much smaller, and a lossy step to produce.
SVG: Vector graphics described as shapes rather than pixels. Tiny and sharp at every size.
TIFF: A flexible container used for print and archiving. Usually uncompressed or LZW.
WebP: Lossy and lossless in one format, with alpha and animation. 25–35% below JPEG at matched quality.

Colour and depth

Alpha channel: A fourth channel storing per-pixel opacity, giving genuine soft edges.
Bit depth: How many bits store each channel of each pixel. 8 per channel is the web standard.
Chroma subsampling: Storing the colour channels at lower resolution than brightness. 4:2:0 is the web default.
CMYK: The subtractive colour model used in printing. Not used by browsers.
Colour gamut: The range of colours a colour space can express.
ICC profile: Metadata describing which colour space a file's numbers refer to.
Indexed colour: Storing a palette of colours and referring to it by index rather than storing values per pixel.
Luma and chroma: Brightness and colour, separated so they can be compressed differently.
sRGB: The standard colour space of the web. Assumed when no profile is present.

Dimensions and display

Aspect ratio: The proportion of width to height, such as 16:9 or 4:5.
Bits per pixel (bpp): File size in bits divided by pixel count. The way to compare efficiency across different dimensions.
DPI: Dots per inch — a printer's ink dots. In an image file it is a print instruction with no effect on screen.
PPI: Pixels per inch. Describes display density, or how densely pixels are placed when printed.
Resampling: Recalculating pixels when resizing. Downsampling averages them; upsampling invents them.
Resolution: Properly, the pixel dimensions of an image. Often misused to mean DPI.
Upscaling: Enlarging an image. Adds no detail — modern AI versions invent plausible detail rather than recovering it.

Files, metadata and delivery

Baseline JPEG: Stored as a single top-to-bottom pass. Paints in from the top on a slow connection.
CLS (Cumulative Layout Shift): A Core Web Vitals metric measuring how much content moves while loading. Images without dimensions are the classic cause.
EXIF: Metadata recording camera, lens, exposure, timestamps and often GPS coordinates.
Interlacing: PNG's equivalent of progressive rendering. Usually makes the file larger.
LCP (Largest Contentful Paint): A Core Web Vitals metric timing when the largest element renders. Usually an image.
Lazy loading: Deferring an image's download until it approaches the viewport. Never apply it to the LCP image.
Metadata: Everything in the file that is not pixels: EXIF, colour profiles, thumbnails, editing history.
Progressive JPEG: Stored as several passes of increasing detail, so the whole image appears immediately and sharpens.
srcset and sizes: HTML attributes listing available image widths and describing the layout, so the browser picks the right file.

Try it yourself

Everything below runs in your browser, so you can test any of this on your own files without uploading them.

Compress JPEG
Shrink JPG and JPEG photographs with a quality slider or an exact target size.
Open the tool
Compress PNG
Lossless by default, with transparency carried through untouched.
Open the tool
JPG to WebP
Typically 25–35% smaller at matched quality. The standard web win.
Open the tool

Questions

Frequently asked questions

Every answer below is present in the page source, expanded, so it can be read without opening anything.

What is the difference between lossy and lossless?

Lossless compression preserves every pixel value exactly and can be reversed. Lossy compression discards detail permanently in exchange for a much smaller file. Photographs suit lossy; screenshots, logos and line art suit lossless.

What does the quality number actually mean?

It scales the quantization table — the grid of divisors that decides how much detail is rounded away. It is not a percentage of anything, and the same number produces different results in different encoders.

What is an artifact?

Visible damage introduced by compression rather than present in the original. The three classic kinds are blocking (visible squares), ringing (ghost echoes beside hard edges) and banding (stripes across gradients).

What is an alpha channel?

A fourth channel storing how opaque each pixel is, with 256 levels rather than just on or off. PNG and WebP have one; JPEG has none, which is why converting a transparent image to JPEG fills the transparent areas with a solid colour.

What does bits per pixel tell me?

How efficiently an image is compressed, independent of its dimensions. Divide the file size in bits by the pixel count: 0.5–1.5 is the normal range for a web photograph, and above 8 usually means something is wrong.

Is DPI the same as resolution?

No, though they are constantly confused. Resolution properly means the pixel dimensions. DPI is a print instruction stored in metadata, and changing it has no effect on how an image appears on a screen or on its file size.

From the blog