Beyond PSNR: Using SSIM & Butteraugli for Image Compression

The Limitations of PSNR in Modern Image Optimization

For decades, Peak Signal-to-Noise Ratio (PSNR) has been the default metric for measuring image quality during compression. It's simple to calculate and provides a single number that supposedly indicates quality. However, PSNR has a fundamental flaw: it measures pixel-level differences without considering how humans actually perceive images. Two images with identical PSNR scores can look dramatically different to the human eye, while images with different PSNR values might appear visually identical.

Understanding SSIM: Structural Similarity Index

The Structural Similarity Index (SSIM) was developed to address PSNR's shortcomings by modeling human perception more accurately. Instead of measuring pixel differences, SSIM evaluates how well the structure of an image is preserved. It compares luminance, contrast, and structure between the original and compressed images, producing a score between -1 and 1 (where 1 indicates perfect similarity).

Butteraugli: Google's Advanced Perceptual Metric

Butteraugli takes perceptual quality measurement to the next level by modeling the human visual system more comprehensively. Developed by Google, it's designed to detect the minimum noticeable difference between images. Butteraugli analyzes how the human eye perceives color, contrast, and spatial frequencies, making it exceptionally good at identifying subtle artifacts that other metrics might miss.

Choosing Between SSIM and Butteraugli

The choice between SSIM and Butteraugli depends on your specific needs. SSIM provides a good balance between accuracy and computational efficiency, making it suitable for most web optimization scenarios. Butteraugli offers superior artifact detection but requires significantly more processing power, making it ideal for applications where visual perfection is critical.

Implementing Perceptual Metrics in Optimization Workflows

Integrating SSIM or Butteraugli into your image optimization pipeline ensures consistent perceptual quality across all your assets. You can use these metrics as quality thresholds, stopping compression when the perceptual quality drops below acceptable levels. This approach prevents over-compression that creates visible artifacts while maximizing file size reduction.

1. 1Choose your target metricSelect SSIM for general use or Butteraugli for critical quality requirements
2. 2Set quality thresholdsEstablish minimum acceptable scores (e.g., SSIM > 0.92) based on your quality requirements
3. 3Integrate with compression toolsUse libraries like libvips or ImageMagick that support perceptual metrics
4. 4Automate quality validationInclude perceptual quality checks in your CI/CD pipeline or batch processing workflows

Practical Implementation Examples

Here's how you can implement these metrics in practice. For SSIM, most modern image processing libraries include support. For Butteraugli, you'll typically use Google's reference implementation or integrate it with tools that support it.

// Example using libvips for SSIM calculation
const sharp = require('sharp');

async function calculateSSIM(originalPath, compressedPath) {
  const original = sharp(originalPath);
  const compressed = sharp(compressedPath);
  
  // libvips can calculate SSIM through its statistics functionality
  const stats = await original
    .composite([{ input: await compressed.toBuffer(), blend: 'difference' }])
    .stats();
  
  // Calculate SSIM from statistics (simplified example)
  return calculateSSIMFromStats(stats);
}

Automate image optimization with Optimagio

Doing this by hand for every image does not scale. Optimagio optimizes and converts your images (WebP and AVIF) automatically across your API, web app, and CMS — so every page ships the smallest possible files without manual work. See plans and pricing →