Skip to content
imgsqz logo imgsqz logo imgsqz

Recipes

A cookbook of ready-to-run commands. Copy, tweak the paths, ship.

Web & front-end

Section titled “Web & front-end”

Optimize a hero image for the web

Section titled “Optimize a hero image for the web”
Terminal window
imgsqz hero.png -f webp -q 75 --width 1600 --no-timestamp -o public/hero.webp

Generate AVIF + WebP + JPG with a <picture> fallback

Section titled “Generate AVIF + WebP + JPG with a <picture> fallback”
Terminal window
imgsqz hero.png -f avif -q 50 --width 1600 --no-timestamp -o dist/hero.avif
imgsqz hero.png -f webp -q 75 --width 1600 --no-timestamp -o dist/hero.webp
imgsqz hero.png -f jpg  -q 82 --width 1600 --no-timestamp -o dist/hero.jpg
<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="" width="1600" loading="lazy" />
</picture>

Build a responsive srcset (multiple widths)

Section titled “Build a responsive srcset (multiple widths)”
Terminal window
for w in 480 768 1200 1600; do
  imgsqz hero.png -f webp -q 75 --width $w -o "dist/hero-$w.webp"
done
 
<img
  src="/hero-1200.webp"
  srcset="/hero-480.webp 480w, /hero-768.webp 768w, /hero-1200.webp 1200w, /hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 1200px"
  alt=""
/>

Convert a whole image folder to WebP

Section titled “Convert a whole image folder to WebP”
Terminal window
imgsqz public/img/*.png -f webp -q 75 --quiet

Thumbnails & avatars

Section titled “Thumbnails & avatars”

Square avatar, cropped to fill

Section titled “Square avatar, cropped to fill”
Terminal window
imgsqz profile.jpg --width 256 --height 256 --fit cover -f webp -q 80 -o avatars/me.webp

Contact-sheet thumbnails for a folder

Section titled “Contact-sheet thumbnails for a folder”
Terminal window
for f in photos/*.jpg; do
  imgsqz "$f" --width 320 --height 320 --fit cover -f webp -q 70 \
    -o "thumbs/$(basename "${f%.jpg}").webp"
done

Photography

Section titled “Photography”

Shrink camera JPGs for sharing (in place)

Section titled “Shrink camera JPGs for sharing (in place)”
Terminal window
imgsqz *.JPG --replace -q 82 --width 2048 --quiet

Archive scans as lossless TIFF

Section titled “Archive scans as lossless TIFF”
Terminal window
imgsqz scan-*.png -f tiff --no-strip-metadata

Keep the color profile for print

Section titled “Keep the color profile for print”
Terminal window
imgsqz print-ready.tiff -f jpg -q 95 --no-strip-metadata

Documents & screenshots

Section titled “Documents & screenshots”

Compress PNG screenshots to small JPGs for docs/issues

Section titled “Compress PNG screenshots to small JPGs for docs/issues”
Terminal window
imgsqz Screenshot*.png -f jpg -q 80 --quiet

Pixel-perfect lossless WebP for UI screenshots

Section titled “Pixel-perfect lossless WebP for UI screenshots”
Terminal window
imgsqz ui-screenshot.png -f webp --lossless -o docs/ui.webp

Grayscale a document scan

Section titled “Grayscale a document scan”
Terminal window
imgsqz contract-scan.jpg --grayscale -q 85 -f png

Automation & CI

Section titled “Automation & CI”

npm script in package.json

Section titled “npm script in package.json”
{
  "scripts": {
    "img:optimize": "imgsqz public/img/*.png -f webp -q 75 --quiet"
  }
}

Fail a CI step if any image errors

Section titled “Fail a CI step if any image errors”
Terminal window
imgsqz assets/**/*.png -f webp -q 75 --quiet
# non-zero exit on failure stops the pipeline

GitHub Actions step

Section titled “GitHub Actions step”
- name: Optimize images
  run: |
    npm install -g @wdalhaj/imgsqz
    imgsqz public/img/*.png -f webp -q 75 --quiet

Parallelize a large batch

Section titled “Parallelize a large batch”
Terminal window
ls raw/*.jpg | xargs -P 8 -I{} imgsqz {} -f avif -q 50 --width 1600 --quiet

One-offs (no install)

Section titled “One-offs (no install)”
Terminal window
npx @wdalhaj/imgsqz photo.png -f webp -q 70