Image Format Glossary — 12 Terms You Need to Know
Image formats come with their own vocabulary. Here's what the terms actually mean.
1. Lossless vs Lossy Compression
Lossless means every pixel from the original is preserved. When you re-save a lossless file, no data is thrown away. PNG is the most common lossless format.
Lossy means the compression algorithm removes data to reduce file size. JPG is lossy — it throws away information your eye won't notice. WEBP can be both.
When a photo is compressed to 80% quality in JPG, the software guesses which details you won't see and deletes them. You get a smaller file. The cost is some quality loss.
Key insight: Lossy compression is cumulative. Compress a JPG at 80%, re-save it, compress again at 80% — each time you lose more detail. Lossless formats don't do this.
2. Alpha Channel
An alpha channel stores transparency information. Each pixel has four values: red, green, blue, and alpha. The alpha value controls how transparent that pixel is.
PNG with alpha: transparent pixels are fully transparent. WEBP with alpha: same.
JPG doesn't support alpha. No transparency.
Use case: Overlaying a logo on a background. The logo's transparent areas let the background show through.
3. Metadata
Metadata is information about the image that isn't the image itself — EXIF data (camera model, date taken, GPS location), IPTC (copyright, captions), and XMP (editing history).
Metadata adds bytes. Stripping it when converting reduces file size without affecting visuals.
4. Resolution / Dimensions
"Resolution" is often used to mean two different things:
- Pixel dimensions: 1920×1080 — actual pixel count
- DPI/PPI: dots per inch — used for print
DPI matters for print (300 DPI is standard for print quality). For web, pixel dimensions are all that matter.
5. Aspect Ratio
The ratio of width to height. 16:9 is common for video and hero images. 1:1 is square. 4:5 is portrait.
When you resize an image, keeping the same aspect ratio prevents stretching or squishing.
6. Color Depth / Bit Depth
Bits per channel. 8-bit means 256 possible values per channel (256 red × 256 green × 256 blue = 16.7 million colors). 16-bit means 65,536 values per channel.
Most web images are 8-bit. 16-bit is used in professional photography and print production for more color grading flexibility.
7. Interlaced / Progressive
Interlaced (or progressive) images load in multiple passes — first a blurry version, then increasingly sharp. The page appears to load faster, but the total download is slightly larger.
Baseline images load line by line from top to bottom. May appear to load slower, but downloads slightly faster overall.
For modern web use, progressive/interlaced is mostly a relic from the dial-up era. Your bandwidth makes the difference negligible.
8. Color Space
RGB (red, green, blue) is the standard for screens. CMYK (cyan, magenta, yellow, black) is for print. Converting between them changes colors — the same image looks different on screen vs on paper.
For web: Always use sRGB. It's the standard for web browsers and displays.
9. EXIF Data
Exchangeable Image File Format data. Camera model, lens, ISO, shutter speed, date, GPS coordinates. Useful for photography, irrelevant for web.
EXIF adds file size with no visual benefit. Strip it when converting for web.
10. Chroma Subsampling
A compression technique used in JPG and some WEBP files. It reduces color information at lower resolution while keeping brightness information at full resolution.
The human eye is more sensitive to brightness than color, so this is nearly invisible — but it means a JPG stores color at half the resolution of brightness.
For screenshots with sharp text: this can create subtle color bleeding. Lossless WEBP or PNG avoids this.
11. Quality Setting
In lossy formats, quality controls how aggressively compression is applied. 100% = no compression (effectively lossless). 50% = heavy compression.
The relationship between quality and file size is non-linear:
- 100% → 95%: tiny file size reduction, no visible difference
- 95% → 85%: significant file size reduction, no visible difference
- 85% → 75%: more file size reduction, very slight visible difference
- 75% → 50%: smaller file, visible quality degradation
12. Format Optimization
Not all JPGs are equal. A "quality 85 JPG" from Photoshop is different from a "quality 85 WEBP" from another tool. The encoder matters.
For the smallest file size at a given visual quality, use modern encoders (WEBP, AVIF) and adjust quality downward until you reach the minimum acceptable quality threshold.