Baoyu Compress Image

Baoyu Compress Image is a community skill for optimizing and compressing images for web and mobile delivery, covering lossy and lossless compression, format conversion, responsive image generation, quality optimization, and batch processing pipelines for image asset management.

What Is This?

Overview

Baoyu Compress Image provides patterns for reducing image file sizes while maintaining visual quality. It covers lossy compression that reduces file size by selectively discarding visual data below perceptible thresholds, lossless compression that reduces file size through encoding optimization without any quality loss, format conversion that transcodes images to modern formats like WebP and AVIF for better compression ratios, responsive image generation that creates multiple size variants for different screen resolutions, and batch processing that compresses entire directories of images with consistent settings. The skill enables faster page loads through optimized image delivery.

Who Should Use This

This skill serves web developers optimizing page load performance through image compression, content teams processing large volumes of images for publishing, and mobile app developers reducing bundle size through optimized image assets.

Why Use It?

Problems It Solves

Uncompressed images are the largest contributor to slow page load times. Modern image formats offer significantly better compression but require conversion tooling. Manual image optimization is impractical for sites with hundreds of assets. Responsive images need multiple size variants generated from source files.

Core Highlights

Smart compression selects optimal quality settings per image based on content type. Format converter produces WebP and AVIF variants with JPEG fallbacks. Responsive generator creates srcset-ready image variants at multiple widths. Batch processor handles directory-level optimization with progress reporting.

How to Use It?

Basic Usage

from PIL import Image
from pathlib import Path

class ImageCompressor:
  QUALITY_MAP = {
    'high': 85,
    'medium': 70,
    'low': 50,
  }

  def compress(
    self,
    input_path: str,
    output_path: str,
    quality: str = 'medium',
    format: str = 'webp'
  ) -> dict:
    img = Image.open(
      input_path)
    original_size = Path(
      input_path).stat()\
      .st_size

    q = self.QUALITY_MAP.get(
      quality, 70)

    if format == 'webp':
      img.save(
        output_path,
        'WEBP',
        quality=q,
        method=6)
    elif format == 'jpeg':
      if img.mode == 'RGBA':
        img = img.convert(
          'RGB')
      img.save(
        output_path,
        'JPEG',
        quality=q,
        optimize=True)
    else:
      img.save(
        output_path,
        quality=q)

    new_size = Path(
      output_path).stat()\
      .st_size
    return {
      'original': original_size,
      'compressed': new_size,
      'reduction': round(
        (1 - new_size
         / original_size)
        * 100, 1),
    }

Real-World Examples

from PIL import Image
from pathlib import Path

WIDTHS = [320, 640, 960,
  1280, 1920]

def generate_responsive(
  input_path: str,
  output_dir: str,
  quality: int = 75
) -> list[dict]:
  img = Image.open(
    input_path)
  stem = Path(
    input_path).stem
  out = Path(output_dir)
  out.mkdir(exist_ok=True)
  results = []

  for w in WIDTHS:
    if w >= img.width:
      continue
    ratio = w / img.width
    h = int(
      img.height * ratio)
    resized = img.resize(
      (w, h),
      Image.LANCZOS)

    # WebP variant
    webp_path = out\
      / f'{stem}-{w}w.webp'
    resized.save(
      str(webp_path),
      'WEBP',
      quality=quality)

    # JPEG fallback
    jpg_path = out\
      / f'{stem}-{w}w.jpg'
    rgb = resized.convert(
      'RGB')
    rgb.save(
      str(jpg_path),
      'JPEG',
      quality=quality)

    results.append({
      'width': w,
      'webp': str(webp_path),
      'jpeg': str(jpg_path)})
  return results

Advanced Tips

Use SSIM (Structural Similarity Index) comparison to automatically find the lowest quality setting that maintains acceptable visual similarity to the original. Generate AVIF format for browsers that support it as it typically achieves 20 percent better compression than WebP. Strip EXIF metadata from output images to reduce file size and avoid exposing location data.

When to Use It?

Use Cases

Compress a directory of product photos for an e-commerce site generating WebP with JPEG fallbacks. Create responsive image variants for a static site generator with srcset attributes. Optimize user-uploaded images on an application server before storage.

Related Topics

Image optimization, WebP conversion, responsive images, web performance, and asset compression.

Important Notes

Requirements

Pillow library for image processing and format conversion. Source images in common formats like JPEG, PNG, or TIFF. Output directory with sufficient disk space for generated variants.

Usage Recommendations

Do: generate both modern format and JPEG fallback for broad browser compatibility. Use lossless compression for images with text or sharp edges like screenshots. Test compressed images visually before deploying to production.

Don't: over-compress images below perceptible quality thresholds creating visible artifacts. Convert transparent PNG images to JPEG which does not support alpha channels. Skip responsive variants on high-traffic pages where mobile users need smaller images.

Limitations

AVIF encoding is significantly slower than WebP or JPEG compression. Some older browsers do not support WebP requiring JPEG fallbacks. Lossless compression achieves smaller reductions than lossy compression typically saving only 10 to 30 percent.