Compress images without quality loss

# ImageMagick - JPEG compression
convert input.jpg -quality 80 output.jpg
 
# Sharp CLI - WebP conversion with quality
npx sharp-cli input.jpg -o output.webp --quality 80
 
# pngquant - lossy PNG compression
pngquant --quality=65-80 input.png
 
# svgo - SVG optimization
npx svgo input.svg -o output.svg

const sharp = require('sharp')
 
async function compressImage(inputPath, outputPath, options = {}) {
  const { quality = 80, format = 'webp' } = options
 
  await sharp(inputPath)
    [format]({ quality })
    .toFile(outputPath)
}
 
// Batch processing
async function compressDirectory(inputDir, outputDir) {
  const files = fs.readdirSync(inputDir)
 
  for (const file of files) {
    if (/\.(jpg|jpeg|png)$/i.test(file)) {
      await compressImage(
        path.join(inputDir, file),
        path.join(outputDir, file.replace(/\.[^.]+$/, '.webp'))
      )
    }
  }
}

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 
module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
              png: { quality: 80 },
              avif: { quality: 60 }
            }
          }
        }
      })
    ]
  }
}

// vite.config.js
import viteImagemin from 'vite-plugin-imagemin'
 
export default {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      optipng: { optimizationLevel: 5 },
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      svgo: {
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'removeEmptyAttrs', active: false }
        ]
      }
    })
  ]
}

// scripts/optimize-images.js
const sharp = require('sharp')
const glob = require('glob')
const path = require('path')
 
const INPUT_DIR = 'public/images'
const OUTPUT_DIR = 'public/images/optimized'
 
async function optimizeImages() {
  const files = glob.sync(`${INPUT_DIR}/**/*.{jpg,jpeg,png}`)
 
  for (const file of files) {
    const relativePath = path.relative(INPUT_DIR, file)
    const outputPath = path.join(OUTPUT_DIR, relativePath)
 
    // Create WebP version
    await sharp(file)
      .webp({ quality: 80 })
      .toFile(outputPath.replace(/\.[^.]+$/, '.webp'))
 
    // Create optimized original format
    await sharp(file)
      .jpeg({ quality: 80, progressive: true })
      .toFile(outputPath)
 
    console.log(`Optimized: ${relativePath}`)
  }
}
 
optimizeImages()

// Compare file sizes
const fs = require('fs')
 
function getCompressionStats(originalPath, compressedPath) {
  const originalSize = fs.statSync(originalPath).size
  const compressedSize = fs.statSync(compressedPath).size
  const savings = ((originalSize - compressedSize) / originalSize * 100).toFixed(1)
 
  return {
    original: `${(originalSize / 1024).toFixed(1)} KB`,
    compressed: `${(compressedSize / 1024).toFixed(1)} KB`,
    savings: `${savings}%`
  }
}

# .github/workflows/optimize-images.yml
name: Optimize Images
 
on:
  push:
    paths:
      - 'public/images/**'
 
jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: calibreapp/image-actions@main
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          jpegQuality: '80'
          pngQuality: '80'
          webpQuality: '80'