Understand image compression (lossless, lossy)
19 Graphics Creation – Image Compression
What is Image Compression?
📷 Image compression is the process of reducing the file size of a digital image so it takes up less storage space and loads faster on the web. Think of it like packing a suitcase: you want to fit everything in while keeping the most important items.
Lossless vs Lossy Compression
🎨 Lossless compression keeps every single pixel exactly the same as the original. If you decompress it, you get back the exact same image. Lossy compression removes some data that is considered less important, so the decompressed image is only an approximation of the original. The trade‑off is smaller file size but slightly lower quality.
- 🔒 Lossless: ✔️ Exact recovery, ❌ larger files.
- 🗑️ Lossy: ❌ Some data lost, ✔️ smaller files.
Common Image Formats
| Format | Compression Type | Typical Use |
|---|---|---|
| PNG | Lossless | Graphics, logos, screenshots |
| JPEG | Lossy | Photographs, web images |
| GIF | Lossless (palette limited) | Simple animations, icons |
| WebP | Lossless & Lossy | Web graphics, high quality |
| HEIF / HEIC | Lossy (HEVC) | High‑quality photos on iOS |
| AVIF | Lossless & Lossy | Future web images, high efficiency |
How Compression Works – A Simple Analogy
Imagine you have a big box of LEGO bricks (the original image). Lossless compression is like packing the bricks into a smaller box but keeping every single brick exactly where it was – you can unpack them and get the exact same set again. Lossy compression is like deciding that some bricks are similar enough that you can replace them with a single, generic brick. When you unpack, you get a very similar set but not the exact same bricks. The difference is the “extra” bricks you threw away.
Compression Ratio & Quality Trade‑off
Compression ratio is calculated as:
$CR = \frac{\text{Original Size}}{\text{Compressed Size}}$
For example, a 5 MB photo compressed to 1 MB has a ratio of 5:1. The higher the ratio, the smaller the file, but usually the lower the visual quality.
Practical Steps for Web Images
- Choose the right format: JPEG for photos, PNG for graphics with transparency, GIF for simple animations.
- Adjust quality settings: For JPEG, set quality to 70–80 % for a good balance.
- Resize the image to the exact dimensions needed on the web.
- Use an online tool or software (TinyPNG, Squoosh, ImageOptim) to apply compression.
- Check the visual result: open the image in a browser and compare to the original.
Quick Reference Cheat Sheet
| Format | Compression | Best Use | Typical Size Reduction |
|---|---|---|---|
| PNG | Lossless | Icons, logos | 10–30 % |
| JPEG | Lossy | Photographs | 70–90 % |
| GIF | Lossless (palette) | Animations, simple graphics | 20–50 % |
| WebP | Lossless/Lossy | Web images, high quality | 30–50 % better than JPEG |
Remember!
??
Keep a copy of the original uncompressed image for future edits.
??
Test on multiple browsers to ensure compatibility.
??
Use responsive images (srcset) to serve the right size for each device.
Revision
Log in to practice.