How do I optimize a whole folder of images for a website?

To optimize a whole folder of images for a website, you want to reduce file size while keeping acceptable quality, and ideally create web-friendly dimensions and formats.

Best approach

1) Resize images to the actual display size

If your website only shows images at, say, 1200px wide, don’t upload 4000px originals.

• Large hero image: maybe 1600–2000px wide
• Content images: often 800–1400px wide
• Thumbnails: 200–400px wide

2) Convert to modern formats

• WebP: great default for web
• AVIF: smaller files, slower encoding, increasingly supported
• Keep JPEG for photos if needed
• Keep PNG only when transparency is required
• Use SVG for logos/icons when possible

3) Compress images

Use lossy compression for photos, lossless or near-lossless for graphics.

4) Strip metadata

Remove EXIF and other metadata unless you need it.

5) Batch-process the whole folder

Use a command-line tool so you can do it all at once.

---

Practical tools

Option A: ImageMagick + WebP

Good if you want a simple command-line workflow.

Install:

• macOS: brew install imagemagick webp
• Ubuntu/Debian: sudo apt install imagemagick webp

Example: convert all JPGs in a folder to WebP

mkdir -p optimized
for f in *.jpg *.jpeg; do
  [ -e "$f" ] || continue
  cwebp -q 80 "$f" -o "optimized/${f%.*}.webp"
done

Resize and convert all images:

mkdir -p optimized
for f in *.{jpg,jpeg,png}; do
  [ -e "$f" ] || continue
  magick "$f" -resize 1600x1600\> -strip -quality 85 "optimized/${f%.*}.jpg"
done

• -resize 1600x1600\> means “only shrink if larger than 1600”
• -strip removes metadata
• -quality 85 is a decent starting point for web photos

---

Option B: Use imagemin or sharp with Node.js

Great for automated pipelines and large folders.

Install:

npm install sharp

Batch optimize folder with Node.js:

const sharp = require("sharp");
const fs = require("fs");
const path = require("path");

const inputDir = "./images";
const outputDir = "./optimized";

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

for (const file of fs.readdirSync(inputDir)) {
  const ext = path.extname(file).toLowerCase();
  if (![".jpg", ".jpeg", ".png", ".webp"].includes(ext)) continue;

  const inputPath = path.join(inputDir, file);
  const outputPath = path.join(outputDir, path.parse(file).name + ".webp");

  sharp(inputPath)
    .resize({ width: 1600, withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(outputPath)
    .then(() => console.log("Processed", file))
    .catch(console.error);
}

---

Option C: GUI tools

If you don’t want command line:

• Squoosh (web-based, good quality)
• TinyPNG/TinyJPG
• Photoshop export for web
• ImageOptim (macOS)

---

Recommended web settings

A solid starting point:

• Photos/photos with lots of color: WebP, quality 75–85
• Small UI images/icons: SVG or optimized PNG/WebP
• Max width: match your layout, often 1200–1600px
• Strip metadata: yes
• Lazy-load below-the-fold images

---

Best practice for websites

If possible, generate multiple sizes and use responsive images:

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1600.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Description">

---

If you want the fastest solution

Tell me:

1. your OS (Windows/macOS/Linux),
2. what image types you have,
3. whether you want to keep originals or overwrite them,

and I can give you a one-command batch script for your folder.