Keep image file sizes within recommended limits

# Using Sharp (Node.js) — recommended settings
 
# WebP (photos)
sharp('input.jpg').webp({ quality: 80 }).toFile('output.webp')
 
# AVIF (photos, highest compression)
sharp('input.jpg').avif({ quality: 60, effort: 6 }).toFile('output.avif')
 
# JPEG (legacy fallback)
sharp('input.jpg').jpeg({ quality: 80, progressive: true, mozjpeg: true }).toFile('output.jpg')
 
# PNG (lossless with metadata stripping)
sharp('input.png').png({ compressionLevel: 9, effort: 10 }).toFile('output.png')

<!-- Use <picture> to serve the smallest supported format -->
<picture>
  <source
    type="image/avif"
    srcset="photo-400.avif 400w, photo-800.avif 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Photo description"
    width="800"
    height="600"
    loading="lazy"
  >
</picture>

// scripts/optimise-images.mjs
import sharp from 'sharp'
import { globSync } from 'glob'
import { statSync } from 'fs'
import path from 'path'
 
const THRESHOLDS = {
  '.jpg': 200 * 1024,   // 200KB
  '.jpeg': 200 * 1024,
  '.png': 100 * 1024,
  '.webp': 200 * 1024,
}
 
const images = globSync('public/images/**/*.{jpg,jpeg,png,webp}')
 
for (const imgPath of images) {
  const ext = path.extname(imgPath).toLowerCase()
  const threshold = THRESHOLDS[ext]
  const size = statSync(imgPath).size
 
  if (size > threshold) {
    console.warn(`Oversized: ${imgPath} (${Math.round(size / 1024)}KB, threshold ${Math.round(threshold / 1024)}KB)`)
 
    // Generate WebP version
    const webpPath = imgPath.replace(ext, '.webp')
    await sharp(imgPath)
      .webp({ quality: 80 })
      .toFile(webpPath)
 
    const webpSize = statSync(webpPath).size
    const saving = Math.round((1 - webpSize / size) * 100)
    console.log(`  → WebP: ${Math.round(webpSize / 1024)}KB (${saving}% smaller)`)
  }
}

// lighthouserc.js
module.exports = {
  ci: {
    assert: {
      assertions: {
        // Fail if any image could be reduced by more than 4KB
        'uses-optimized-images': ['error', { minScore: 0.9 }],
        // Fail if any image is significantly larger than its display size
        'uses-responsive-images': ['error', { minScore: 0.9 }],
      }
    }
  }
}

// Sharp strips metadata by default when converting format
// For JPEG-to-JPEG, use withMetadata(false)
await sharp('input.jpg')
  .jpeg({ quality: 80 })
  // metadata is stripped by default; use .withMetadata() to preserve it
  .toFile('output.jpg')