Optimise images for faster loading

// Sharp (Node.js) — recommended for server-side processing
import sharp from 'sharp'
 
await sharp('input.jpg')
  .jpeg({
    quality: 80,           // 80 is the sweet spot: minimal visible loss, 40-60% size reduction
    progressive: true,     // Progressive JPEG shows low-res preview while loading
    mozjpeg: true,         // Use mozjpeg encoder for better compression at same quality
  })
  .toFile('output.jpg')
  // Note: sharp strips metadata by default

# pngquant: lossy compression, 40-80% size reduction with minimal visible change
pngquant --quality=65-80 --output output.png input.png
 
# oxipng: lossless compression, 10-20% reduction with zero quality loss
oxipng -o 6 input.png

// Sharp PNG compression
await sharp('input.png')
  .png({
    compressionLevel: 9,  // 0-9, higher = smaller but slower
    effort: 10,           // 1-10, higher = slower but better compression
    palette: true,        // Enable palette quantisation for PNGs with few colours
    quality: 80,          // Quality when palette is true
  })
  .toFile('output.png')

# SVGO: removes editor metadata, comments, redundant attributes
npx svgo input.svg -o output.svg
 
# Or process all SVGs in a directory
npx svgo --folder public/icons

// SVGO configuration (svgo.config.js)
module.exports = {
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergeStyles',
    'inlineStyles',
    'minifyStyles',
    'cleanupIds',
    'removeUselessDefs',
    'cleanupNumericValues',
    'convertColors',
    'removeUnknownsAndDefaults',
    'removeNonInheritableGroupAttrs',
    'removeUselessStrokeAndFill',
    'removeViewBox',         // Set to false if you need responsive SVGs
    'cleanupEnableBackground',
    'convertShapeToPath',
    'convertEllipseToCircle',
    'moveElemsAttrsToGroup',
    'moveGroupAttrsToElems',
    'collapseGroups',
    'convertPathData',
    'convertTransform',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'mergePaths',
    'removeUnusedNS',
    'sortDefsChildren',
    'removeTitle',
    'removeDesc',
  ],
}

// vite.config.js — automatic optimisation at build time
import { defineConfig } from 'vite'
import { viteImageOptimizer } from 'vite-plugin-image-optimizer'
 
export default defineConfig({
  plugins: [
    viteImageOptimizer({
      jpg: { quality: 80, progressive: true },
      jpeg: { quality: 80, progressive: true },
      png: { quality: 80, compressionLevel: 9 },
      webp: { quality: 80, effort: 6 },
      avif: { quality: 60, effort: 6 },
      svg: {
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'removeDimensions', active: true },
        ],
      },
    })
  ]
})

// scripts/check-image-optimisation.mjs
// Fail CI if any image could be reduced by more than 10KB
import { execSync } from 'child_process'
import { globSync } from 'glob'
 
const images = globSync('public/**/*.{jpg,jpeg,png,gif}')
let failed = false
 
for (const imgPath of images) {
  try {
    // Use identify (ImageMagick) to check for metadata
    const result = execSync(`identify -verbose "${imgPath}" 2>&1 | grep -i "exif\\|iptc\\|comment"`, {
      encoding: 'utf8',
      stdio: ['pipe', 'pipe', 'pipe'],
    })
    if (result.trim()) {
      console.warn(`⚠️  Metadata found in: ${imgPath}`)
      failed = true
    }
  } catch {
    // No metadata found — this is good
  }
}
 
if (failed) process.exit(1)