Technology Education

Image Compression Algorithms Explained: A Beginner’s Guide to Lossy & Lossless Methods

Updated on
13 min read

Image compression is a crucial process that reduces the file size of images while maintaining visual quality. This technique is vital for web developers, designers, and anyone working with digital images, as it leads to faster loading times, reduced storage costs, and improved user experiences. In this beginner’s guide, we will explore the fundamentals of image compression, discuss lossy and lossless methods, and provide practical advice on selecting the right techniques for your needs.

Why Image Compression Matters

Image compression significantly impacts user experience, SEO, and overall costs:

  • Faster page loads: Smaller images lead to quicker downloads and a more responsive site.
  • Lower bandwidth & CDN costs: You can often achieve a 50–80% size reduction when switching from unoptimized JPEGs to modern codecs.
  • Enhanced mobile user experience: Users on slow or metered connections access content faster.

For instance, a 3 MB photo compressed to 600 KB achieves an 80% reduction, loading dramatically faster on mobile networks and reducing CDN transfer expenses. Across thousands of images, these savings add up.

However, smaller file sizes usually come with lower fidelity. It’s essential to choose the right format and quality settings for your specific use case while automating tests to ensure quality remains acceptable.

Core Concepts You Need to Know

Before diving into specific formats, familiarize yourself with these essential concepts:

Pixels, Color Depth, and Color Spaces

  • Pixel: The smallest unit of an image containing color information.
  • Color depth: Indicates the number of bits per channel. Typically, 8 bits per channel (0–255) is standard; 16 bits is better for high-dynamic-range workflows.
  • Color spaces: RGB is common for display; many lossy codecs convert to YCbCr (luma and chroma channels) since our eyes are more sensitive to brightness than color.

Understanding these concepts is crucial as higher bit-depths and wider color gamuts add data that some codecs handle better than others.

For details on how raw sensor data affects compression choices, see this primer on camera sensor basics.

Sampling and Chroma Subsampling

Chroma subsampling reduces color (chroma) resolution relative to brightness (luma).

  • 4:4:4: Full color resolution.
  • 4:2:2: Horizontal color halved.
  • 4:2:0: Both horizontal and vertical color halved (common for JPEG/WebP/AVIF).

By reducing chroma resolution, significant size savings can be achieved with minimal perceived impact on image quality.

Entropy and Redundancy

Entropy measures unpredictability in an image. High entropy indicates lots of detail and noise, making compression harder, while low entropy suggests large smooth areas or repeated patterns, making it easier to compress. Compression algorithms exploit spatial (similar neighboring pixels) and statistical (predictable patterns) redundancies.

Perceptual Considerations

Compression techniques leverage human perception, discarding information that most people are likely to overlook (e.g., minor color variations). This strategy enables aggressive size reductions while maintaining visually acceptable quality.

Lossless Compression: What and How

Lossless algorithms preserve the original pixel data, enabling perfect reconstruction of the original image.

Common Lossless Formats

  • PNG: Ideal for screenshots, icons, and images with solid colors or text.
  • GIF: Limited palette (256 colors), primarily used for simple animations.
  • TIFF: Supports various options, including lossless compression for archival purposes.
  • Lossless WebP: A modern alternative that offers alpha and animation support.

Typical Techniques

  • Run-Length Encoding (RLE): Compresses sequences of repeated values, specifically useful for simple graphics.
  • Dictionary-based techniques (LZ77, LZ78, LZW): Replace repeated sequences with references.
  • Huffman coding: An entropy coding method that replaces common symbols with shorter codes.
  • DEFLATE: A widely used compression method (combining LZ77 and Huffman), utilized in PNG compression.

For more details, read the W3C PNG specification.

When to Use Lossless

Opt for lossless compression when fidelity is essential:

  • For screenshots and UI graphics where text clarity is critical.
  • For line art and diagrams that require precision.
  • For scientific, medical, or legal imagery necessitating exact pixel representation.

Tools for Lossless Optimization

  • pngcrush, optipng: Optimize PNG files internally.
  • jpegtran: Perform lossless JPEG transformations (such as rotation and cropping without re-encoding).
  • Image libraries like libpng, Pillow (Python), and sharp (Node.js) offer programmatic access.

Example command for PNG optimization using optipng:

optipng -o7 input.png

Note: pngquant performs lossy color quantization for PNGs, which can yield visually acceptable results and is suitable for photo storage as PNG.

Lossy Compression: Main Approaches and Formats

Lossy codecs sacrifice some information for significantly smaller file sizes, primarily through the process of quantization—removing or approximating least important information concerning perceived image quality.

  • JPEG (baseline): Widely used, fast decoding, DCT-based.
  • JPEG 2000: Wavelet-based, offers better quality at similar sizes but slower and less commonly adopted.
  • WebP (lossy mode): Developed by Google, generally provides superior compression than JPEG with added support for alpha channels and animations.
  • AVIF: An extension of AV1, delivering superior compression for photographs though with heavier CPU requirements for encoding. Refer to the AVIF spec for details.

For a concise comparison of image formats and browser support, check MDN: Image formats - MDN Web Docs.

Core Techniques

  1. Transform coding: Converts image blocks into the frequency domain (such as DCT) to concentrate important information into fewer coefficients.
  2. Quantization: Reduces the precision of transform coefficients, which is a primary source of irreversible data loss.
  3. Entropy coding: Further compresses the quantized coefficients using Huffman or arithmetic coding.

JPEG (Baseline) — Intuition

The JPEG pipeline includes:

  1. Converting RGB to YCbCr for separable brightness and color.
  2. Chroma subsampling (typically 4:2:0) to lower color detail.
  3. Dividing the image into 8×8 blocks.
  4. Applying the 8×8 Discrete Cosine Transform (DCT) to concentrate energy in low-frequency coefficients.
  5. Quantizing coefficients by dividing them by a quantization matrix and rounding the results.
  6. Zig-zag ordering and run-length encoding zeros.
  7. Performing entropy encoding (Huffman).

The quantization strength determines the balance between quality and file size—higher quantization removes more detail and reduces size.

Block Artifacts and Ringing

Block-based transforms may cause visible artifacts (like an 8×8 grid) and ringing effects near sharp edges when quantization is overly aggressive. Wavelet-based codecs, like JPEG 2000, mitigate blocking artifacts but introduce other trade-offs.

WebP and AVIF

  • WebP (lossy) employs a transform akin to VP8, often outperforming JPEG for photographs, while supporting alpha and animations.
  • AVIF usually delivers the best size-to-quality ratio for photos today, albeit with increased encoding time. Browser support is expanding—check MDN and Can I Use data for strategy.

A Quick Comparison Table

Feature / FormatJPEG (Baseline)WebP (lossy)AVIF (AV1)
Typical photo efficiencyGoodBetter than JPEGBest (often)
Alpha supportNo (requires hacks)YesYes
AnimationNo (some MJPEG variants)YesYes
Encoding CPU costLowModerateHigh
Browser supportUniversalWideGrowing
Use caseLegacy fallback, performanceIdeal for modern web imagesHigh-efficiency scenarios

How Compression Algorithms Work — A Practical Walkthrough

In this section, we will present simplified, hands-on examples to enhance your understanding of compression algorithms.

Small Lossless Example: RLE + Huffman (Conceptual)

Consider a one-dimensional image row with pixels: A A A A B B A A.

  • Using RLE, we encode repeated runs as: (A,4), (B,2), (A,2).
  • Huffman coding assigns shorter codes to more frequently occurring symbols. If ‘A’ is the most common, its code will be short.

Here’s a conceptual Python pseudocode for RLE:

# Simple RLE Implementation
def rle_encode(pixels):
    out = []
    run_char = pixels[0]
    run_len = 1
    for p in pixels[1:]:
        if p == run_char:
            run_len += 1
        else:
            out.append((run_char, run_len))
            run_char = p
            run_len = 1
    out.append((run_char, run_len))
    return out

Combine the RLE output with Huffman coding for compressed data. Actual compressors utilize sophisticated dictionary methods (like LZ77) and adaptive entropy coding.

JPEG Baseline Walkthrough (Intuition)

  1. Convert RGB to YCbCr to separate brightness and color.
  2. Subsample Cb/Cr (common 4:2:0) to reduce color detail.
  3. Slide 8×8 windows, compute DCT: capture smooth areas via low-frequency coefficients and detail/noise via high-frequency ones.
  4. Quantize coefficients using a matrix; large values zero out high-frequency coefficients.
  5. Efficiently encode runs of zeros and then apply entropy coding.

Interactive demos can help visualize how increasing quantization impacts detail clarity.

Try It Locally: Commands to Experiment

Here are commands to compare outputs across formats:

  • Convert PNG to JPEG (ImageMagick):
convert input.png -quality 85 output.jpg
  • Produce WebP (cwebp):
cwebp -q 75 input.jpg -o output.webp
  • Optimize JPEG (jpegoptim / mozjpeg):
jpegoptim --strip-all --max=85 image.jpg
# or use mozjpeg's cjpeg
cjpeg -quality 85 -optimize -outfile out.jpg in.ppm
  • Quantize PNG (pngquant):
pngquant --quality=65-80 input.png -o output.png
  • Encode AVIF (avifenc from libavif):
avifenc -q 50 input.png output.avif

You can also utilize libraries like:

  • libjpeg / libjpeg-turbo, mozjpeg
  • libpng
  • libwebp
  • libavif
  • Pillow (Python)
  • sharp (Node.js)

For batch exports, refer to this guide on exporting images from PSD via command line.

Evaluating Compression: Metrics & Trade-offs

Compression can be quantified objectively, but human perception remains the ultimate judge:

  • MSE (Mean Squared Error) and PSNR (Peak Signal-to-Noise Ratio) are simple metrics; however, they’re often poorly correlated with perceived quality.
  • SSIM / MS-SSIM: Structural similarity metrics tracking perceptual changes more effectively than PSNR.
  • Emerging ML-based perceptual metrics are under constant research and can facilitate automated tuning.

Utilize rate-distortion curves (file size vs. quality metrics) to find a balance between acceptable visual quality and file size. Always validate your results through human inspection on representative images.

Practical Tools, Workflows & Recommendations

Command-line Tools & Libraries

  • ImageMagick / GraphicsMagick: Versatile for conversions.
  • jpegoptim, mozjpeg: Enhanced JPEG optimization and perceptual improvements.
  • pngquant: For lossy color reduction on PNGs.
  • optipng, pngcrush: For lossless PNG optimization.
  • cwebp (libwebp): For encoding WebP images.
  • avifenc (libavif): For encoding AVIF images.
  • Pillow (Python) and sharp (Node.js): To integrate compression into build processes.

Server & Build-time Optimization

  • Pre-generate optimized image variants during your build pipeline using the aforementioned tools.
  • Maintain original masters (high-quality PNG/TIFF/PSD) in your asset archive.
  • Allow CDNs to convert images to modern formats at the edge when compatible (some CDNs can auto-convert to WebP/AVIF based on Accept headers).
  • Utilize the HTML <picture> element and srcset to serve various formats and sizes for progressive enhancement.

Here’s a checklist for automation:

  1. Retain original files (uncompressed archives).
  2. Generate multiple sizes (mobile/tablet/desktop) and modern formats (WebP/AVIF) with fallbacks.
  3. Establish quality ranges (JPEG 75–85; WebP 70–80; AVIF 40–60)—typical settings often achieve significant savings but require testing.
  4. Conduct visual examinations and metric evaluations; maintain a sample set of images for quality assurance.

Encoding speed is crucial; if working with limited hardware (check PC hardware basics), prioritize faster encoders or shift heavy encoding tasks to CI/CD agents.

Use Cases & Best Practices

Here are format recommendations based on specific use cases:

  • Photographs for modern web: Use AVIF or WebP when supported; fallback to JPEG for legacy clients.
  • Screenshots, icons, and text-heavy images: Opt for PNG or lossless WebP to maintain sharpness.
  • Animations: Prefer WebP or AVIF, and reserve GIF for simple cases.
  • Archival Images: Use TIFF/PNG lossless formats and keep original RAW or PSD files.

Quality Guidelines

Start with these quality ranges and modify based on visual tests:

  • JPEG 75–85
  • WebP 70–80
  • AVIF 40–60 Be cautious with images that will undergo further editing; utilize lossless formats for editing.

Responsive & Accessibility Tips

  • Implement responsive variants (srcset) to ensure clients download appropriately sized images, preventing oversized downloads.
  • Utilize <picture> elements to ensure fallback formats for AVIF/WebP.
  • Be considerate of users on slow networks and provide progressive JPEGs or low-quality previews (LQIP) where suitable.

If handling assets for gaming and textures, note that this pertains to runtime performance and APIs—refer to this overview of graphics APIs and asset pipelines.

Future Trends & Resources

  • Learned / Neural compression: Research indicates that autoencoders and generative models may outperform traditional codecs in certain situations, with productization evolving; expect hybrid solutions.
  • AVIF adoption is on the rise due to compelling compression efficiency; encoding times and tooling are improving.
  • Stay updated on new image standards like JPEG XL (which enhances quality and features) and advancements in browser support.

For further learning resources and specifications, visit:

Also, discover useful tools when preparing visuals for presentations with this guide on creating presentations.

Conclusion & Next Steps

In summary:

  • Choose lossless compression when exact fidelity is crucial; opt for lossy when file size takes precedence.
  • Grasp core concepts such as color spaces, chroma subsampling, and entropy to navigate trade-offs effectively.
  • Automate compression in your build pipeline, retain original masters, and conduct both metric and visual quality checks.

Next Steps

  1. Begin compressing a representative set of images using the provided commands.
  2. Measure PSNR/SSIM, comparing the images visually.
  3. Automate recommended settings within your CI or CDN.

Explore further reading and authoritative references listed below.

References & Further Reading

Internal resources referenced above:

FAQ

  • Should I always use AVIF for the best compression?

    • AVIF frequently offers the best size-to-quality ratio for photos, but consider browser support and encoding costs. Provide fallbacks (WebP/JPEG) as necessary.

  • When is lossless compression necessary?

    • Lossless compression is vital for screenshots, text-heavy graphics, legal/medical imagery, or when precise pixel retention is needed.

  • How do I choose a good quality setting?

    • Initiate with set ranges (JPEG 75–85, WebP 70–80, AVIF 40–60), assess using actual images, and refine based on SSIM/visual evaluations.

Happy optimizing—small file sizes lead to significant improvements in performance, cost efficiency, and user satisfaction.

TBO Editorial

About the Author

TBO Editorial writes about the latest updates about products and services related to Technology, Business, Finance & Lifestyle. Do get in touch if you want to share any useful article with our community.