Image Optimization Guide

Image optimization guide — concise commands and recommendations

Goal: reduce bytes, preserve visual quality, enable responsive loading and lazy-loading.

Recommended formats

• WebP for photos/illustrations
• PNG for transparency (consider WebP fallback)
• SVG for logos and simple graphics

Basic macOS commands

 sips -Z 1200 input.jpg --out output.jpg
cwebp -q 80 input.jpg -o output.webp

Using ImageMagick

magick input.jpg -strip -interlace Plane -gaussian-blur 0.05 -quality 75 -resize 1200x output.jpg
for f in *.jpg; do magick "$f" -quality 80 "${f%.*}.webp"; done

Best practices

• Add `width` and `height` attributes to images
• Use `loading="lazy"` for non-critical images
• Provide `srcset` and multiple sizes for responsive images
• Inline small critical images

Automation suggestions

Add a build step or Git hook to convert images to WebP and generate responsive sizes.