I'm building a page speed workflow and need batch image optimization

Here’s a solid batch image optimization workflow you can use for page speed improvements.

Goal

Reduce image file size while keeping acceptable visual quality, using the right format and responsive delivery.

Recommended workflow

1. Audit your images

Check:

• file size
• dimensions
• current format
• where each image is used

Prioritize:

• hero images
• product images
• images above the fold
• large uncompressed PNG/JPEG files

2. Choose the right format

Use:

• AVIF: best compression, modern browsers
• WebP: very good compression, broad support
• JPEG: photos when compatibility matters
• PNG: only when transparency is needed and WebP/AVIF aren’t possible
• SVG: for icons and illustrations

3. Resize before compressing

Do not ship larger images than needed.

Example target widths:

• mobile: 480–768px
• tablet: 1024px
• desktop: 1280–1920px depending on layout

4. Batch compress

Use a command-line tool or automation script.

Example with imagemin in Node.js

npm install imagemin imagemin-mozjpeg imagemin-pngquant imagemin-webp imagemin-avif

import imagemin from "imagemin";
import mozjpeg from "imagemin-mozjpeg";
import pngquant from "imagemin-pngquant";
import webp from "imagemin-webp";

await imagemin(["images/*.{jpg,png}"], {
  destination: "optimized",
  plugins: [
    mozjpeg({ quality: 75 }),
    pngquant({ quality: [0.65, 0.8] })
  ]
});

5. Generate multiple sizes

Create responsive variants:

• image-480.webp
• image-768.webp
• image-1280.webp

Then serve with srcset.

<img
  src="image-768.jpg"
  srcset="image-480.webp 480w, image-768.webp 768w, image-1280.webp 1280w"
  sizes="(max-width: 768px) 100vw, 768px"
  alt="Description"
/>

6. Lazy-load below-the-fold images

<img loading="lazy" decoding="async" ... />

7. Use a CDN or image service if possible

Services like:

• Cloudinary
• imgix
• Cloudflare Images
• Fastly Image Optimizer

can automate:

• resizing
• format conversion
• quality tuning
• caching

Practical batch options

Option A: Simple local batch with CLI

Use sharp for automation.

npm install sharp

import sharp from "sharp";
import fs from "fs";
import path from "path";

const inputDir = "./images";
const outputDir = "./optimized";
const widths = [480, 768, 1280];

if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

for (const file of fs.readdirSync(inputDir)) {
  const ext = path.extname(file).toLowerCase();
  const name = path.basename(file, ext);

  if ([".jpg", ".jpeg", ".png"].includes(ext)) {
    for (const w of widths) {
      await sharp(`${inputDir}/${file}`)
        .resize({ width: w })
        .webp({ quality: 75 })
        .toFile(`${outputDir}/${name}-${w}.webp`);
    }
  }
}

Option B: Use build pipeline

If you use:

• Webpack
• Vite
• Next.js
• Astro
• Gatsby

you can integrate image optimization into the build.

Good defaults

• JPEG quality: 70–80
• WebP quality: 70–80
• AVIF quality: 45–60
• PNG: use only when needed, and compress aggressively
• strip metadata when possible

Best practices

• avoid uploading camera originals directly
• keep source files in a separate folder
• automate naming conventions
• test image quality visually
• measure impact with Lighthouse or WebPageTest

Example workflow summary

1. Collect images
2. Resize to needed dimensions
3. Convert to WebP/AVIF
4. Generate responsive variants
5. Lazy-load non-critical images
6. Serve via CDN
7. Re-test performance

If you want, I can also give you:

1. a ready-to-run Node.js batch script,
2. a shell script using ImageMagick/ffmpeg, or
3. a workflow tailored for WordPress / Shopify / Next.js.