Image Optimization Helper

Optimizes images for web performance using modern formats and compression techniques.

When to Use

• •"Optimize these images"
• •"Compress images for web"
• •"Convert images to WebP"
• •"Reduce image file sizes"
• •"Make images load faster"
• •"Generate responsive image sizes"

Instructions

1. Analyze Current Images

First, scan for images in the project:

# Find all images
find . -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" -o -iname "*.gif" \)

Present findings:

• •Total number of images
• •Current formats
• •Total size
• •Largest images
• •Optimization opportunities

2. Check for Optimization Tools

Verify available tools:

# Check for ImageMagick
which convert || echo "ImageMagick not found"

# Check for cwebp (WebP encoder)
which cwebp || echo "cwebp not found"

# Check for sharp-cli (if Node.js project)
which sharp || echo "sharp not found"

If tools missing, provide installation instructions:

# macOS
brew install imagemagick webp

# Ubuntu/Debian
apt-get install imagemagick webp

# Node.js projects (recommended)
npm install -g sharp-cli

3. Create Optimization Plan

Present optimization strategy:

For WebP Conversion:

# Convert JPG/PNG to WebP with 80% quality
cwebp -q 80 input.jpg -o input.webp

For PNG Optimization:

# Compress PNG without quality loss
convert input.png -strip -quality 85 output.png

For JPEG Optimization:

# Optimize JPEG with progressive loading
convert input.jpg -strip -interlace Plane -quality 85 output.jpg

For Responsive Sizes:

# Generate multiple sizes (sharp-cli)
sharp -i input.jpg -o output-{width}.jpg resize 320 480 768 1024 1920

4. Get User Confirmation

Present plan with:

• •Number of images to optimize
• •Target formats
• •Estimated size reduction
• •Whether to keep originals
• •Whether to generate responsive sizes

Wait for explicit confirmation before proceeding.

5. Execute Optimization

Create organized output structure:

# Backup originals
mkdir -p images/original
cp images/*.{jpg,png} images/original/

# Create optimized versions
mkdir -p images/optimized

Process each image with progress updates.

6. Generate Picture Elements (Optional)

For HTML projects, offer to generate <picture> elements:

<picture>
  <source
    srcset="image-320.webp 320w,
            image-768.webp 768w,
            image-1920.webp 1920w"
    type="image/webp"
  />
  <source
    srcset="image-320.jpg 320w,
            image-768.jpg 768w,
            image-1920.jpg 1920w"
    type="image/jpeg"
  />
  <img
    src="image-768.jpg"
    alt="Description"
    loading="lazy"
    width="768"
    height="432"
  />
</picture>

7. Update Configuration Files

For Next.js projects, suggest image configuration:

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

For Gatsby projects, suggest gatsby-plugin-image setup.

For vanilla projects, suggest lazy loading:

// Lazy load images
if ('loading' in HTMLImageElement.prototype) {
  // Browser supports native lazy loading
  document.querySelectorAll('img[loading="lazy"]').forEach(img => {
    img.src = img.dataset.src;
  });
} else {
  // Use IntersectionObserver polyfill
  const images = document.querySelectorAll('img[data-src]');
  const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        imageObserver.unobserve(img);
      }
    });
  });
  images.forEach(img => imageObserver.observe(img));
}

8. Report Results

Show final metrics:

• •Images optimized: X
• •Original size: X MB
• •Optimized size: X MB
• •Reduction: X% (X MB saved)
• •Formats generated: WebP, AVIF, etc.
• •Responsive sizes created: 320w, 768w, 1920w

9. Suggest Next Steps

Recommend:

• •Adding images to .gitignore (originals)
• •Setting up build pipeline for automatic optimization
• •Implementing lazy loading
• •Using CDN for image delivery
• •Monitoring performance impact (Lighthouse)

Optimization Guidelines

Quality Settings

JPEG:

• •Photos: 80-85 quality
• •UI elements: 90 quality
• •Background images: 75 quality

PNG:

• •Icons: Keep lossless
• •Screenshots: 85 quality
• •Logos: Keep lossless if transparency needed

WebP:

• •Photos: 80 quality (excellent compression)
• •Graphics: 85 quality
• •Transparent images: 90 quality

Format Selection

Use WebP when:

• •Browser support is adequate (95%+ as of 2024)
• •File size matters most
• •Quality/size ratio is important

Use AVIF when:

• •Cutting-edge optimization needed
• •Supporting modern browsers only
• •20-50% better than WebP

Keep JPEG/PNG when:

• •Legacy browser support required
• •As fallback in <picture> element
• •Tools don't support modern formats

Responsive Breakpoints

Common breakpoints:

• •320w: Mobile portrait
• •480w: Mobile landscape
• •768w: Tablet
• •1024w: Small desktop
• •1920w: Full HD
• •2560w: Retina displays

Size Limits

Target sizes:

• •Hero images: < 200 KB
• •Content images: < 100 KB
• •Thumbnails: < 30 KB
• •Icons: < 10 KB
• •Background images: < 150 KB

Safety Practices

Always Backup

# Create backup before optimization
mkdir -p backups/$(date +%Y%m%d)
cp -r images/ backups/$(date +%Y%m%d)/

Preserve Originals

• •Keep original files in separate directory
• •Use version control for safety
• •Test optimized images before deployment

Verify Results

• •Compare visual quality
• •Check file sizes
• •Test on different devices
• •Validate responsive behavior

Handle Errors

# Check if conversion succeeded
if [ $? -eq 0 ]; then
  echo "✅ Optimized successfully"
else
  echo "❌ Optimization failed, keeping original"
fi

Advanced Features

Batch Processing Script

Offer to create optimization script:

#!/bin/bash
# optimize-images.sh

set -e

INPUT_DIR=${1:-.}
OUTPUT_DIR="optimized"
QUALITY=80

mkdir -p "$OUTPUT_DIR"

echo "🖼️  Optimizing images in $INPUT_DIR..."

# Process JPEGs
for img in "$INPUT_DIR"/*.{jpg,jpeg,JPG,JPEG}; do
  [ -f "$img" ] || continue
  filename=$(basename "$img" | sed 's/\.[^.]*$//')

  # Original format
  convert "$img" -strip -interlace Plane -quality $QUALITY \
    "$OUTPUT_DIR/${filename}.jpg"

  # WebP format
  cwebp -q $QUALITY "$img" -o "$OUTPUT_DIR/${filename}.webp"

  echo "✅ $filename"
done

# Process PNGs
for img in "$INPUT_DIR"/*.{png,PNG}; do
  [ -f "$img" ] || continue
  filename=$(basename "$img" | sed 's/\.[^.]*$//')

  # Optimize PNG
  convert "$img" -strip -quality 85 "$OUTPUT_DIR/${filename}.png"

  # WebP with alpha
  cwebp -q $QUALITY -lossless "$img" -o "$OUTPUT_DIR/${filename}.webp"

  echo "✅ $filename"
done

echo "🎉 Optimization complete!"
echo "📊 Space saved:"
du -sh "$INPUT_DIR"
du -sh "$OUTPUT_DIR"

Git Integration

Suggest adding to .gitignore:

# Original unoptimized images
images/original/
*-original.jpg
*-original.png

# Large image files
*.jpg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text

Or suggest Git LFS for large images:

# Install Git LFS
git lfs install

# Track large images
git lfs track "*.jpg"
git lfs track "*.png"

# Add to repo
git add .gitattributes

CI/CD Integration

For automated optimization in build pipeline:

GitHub Actions:

name: Optimize Images

on:
  pull_request:
    paths:
      - 'images/**'

jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Install tools
        run: |
          sudo apt-get install -y imagemagick webp

      - name: Optimize images
        run: |
          chmod +x scripts/optimize-images.sh
          ./scripts/optimize-images.sh images

      - name: Commit optimized images
        run: |
          git config --local user.name "Image Optimizer Bot"
          git add images/optimized
          git commit -m "chore: optimize images"
          git push

Performance Impact

Lighthouse Metrics

Optimized images improve:

• •LCP (Largest Contentful Paint): 20-40% improvement
• •Total Page Size: 50-70% reduction in image weight
• •Time to Interactive: Faster due to smaller payloads
• •Performance Score: +10 to +30 points

Real-World Examples

Before optimization:

• •hero-image.jpg: 2.4 MB
• •product-1.png: 890 KB
• •background.jpg: 1.6 MB
• •Total: 4.89 MB

After optimization:

• •hero-image.webp: 380 KB (84% reduction)
• •product-1.webp: 125 KB (86% reduction)
• •background.webp: 240 KB (85% reduction)
• •Total: 745 KB (85% total reduction)

Mobile Impact

On 3G connection:

• •Before: 12-15 seconds load time
• •After: 2-3 seconds load time
• •4-5x faster page loads

Best Practices

1. •✅ Always provide WebP fallback to JPEG/PNG
2. •✅ Use lazy loading for below-fold images
3. •✅ Specify width and height to prevent layout shift
4. •✅ Use responsive images with srcset
5. •✅ Compress images during build, not runtime
6. •✅ Serve images from CDN when possible
7. •✅ Monitor image performance with RUM tools
8. •✅ Set appropriate cache headers for images

Common Pitfalls

❌ Over-optimization: Quality too low (< 70) ❌ Under-optimization: Quality too high (> 95) ❌ No fallbacks: Only serving WebP without JPEG/PNG ❌ Wrong format: Using PNG for photos ❌ Missing dimensions: Causing layout shift ❌ No lazy loading: Loading all images immediately ❌ Single size: Not using responsive images

Framework-Specific Guidance

React/Next.js

import Image from 'next/image'

<Image
  src="/images/hero.jpg"
  alt="Hero image"
  width={1920}
  height={1080}
  priority  // For LCP images
  placeholder="blur"
/>

Gatsby

import { StaticImage } from "gatsby-plugin-image"

<StaticImage
  src="../images/hero.jpg"
  alt="Hero image"
  placeholder="blurred"
  layout="fullWidth"
/>

Vue/Nuxt

<nuxt-img
  src="/images/hero.jpg"
  alt="Hero image"
  width="1920"
  height="1080"
  format="webp"
  loading="lazy"
/>

Tools Reference

• •ImageMagick: Swiss army knife for image manipulation
• •cwebp/dwebp: Google's WebP encoder/decoder
• •avifenc: AVIF encoder
• •sharp: Fast Node.js image processing
• •squoosh-cli: Google's web-based optimizer CLI
• •imagemin: Node.js image minification