Source images go in webp-gallery/ (big) and webp-gallery/thumbs/ (220x220 square thumb). Convention: snake_case.webp, big ~850px wide preserving aspect, thumb 220x220 cropped square. Front matter image: in _gallery/<slug>.md points to the big webp.
sips(built-in macOS) — resize, crop with--cropOffset Y Xcwebpat/opt/local/bin/cwebp— encode webp (use-q 85)dwebp— decode webp to png/jpg when re-cropping an already-converted file- No
magick/ImageMagickconvert, noffmpeg, no Python PIL. Don't reach for them.
SRC=path/to/source.jpg # original from camera/phone
SLUG=keyboard # snake_case
TMP=$(mktemp -d)
sips -s format jpeg --resampleWidth 850 "$SRC" --out "$TMP/big.jpg" >/dev/null
sips -c 220 220 "$SRC" --out "$TMP/thumb.jpg" >/dev/null # default center crop — often bad
cwebp -q 85 "$TMP/big.jpg" -o "webp-gallery/${SLUG}.webp"
cwebp -q 85 "$TMP/thumb.jpg" -o "webp-gallery/thumbs/${SLUG}.webp"sips -c H W crops from center by default and produces bad thumbs for off-center subjects. Generate a matrix of candidates and let the user pick:
SRC=webp-gallery/keyboard.webp # or original jpg
OUT=webp-gallery/thumbs/_picks
mkdir -p "$OUT"; TMP=$(mktemp -d)
dwebp "$SRC" -o "$TMP/src.png" >/dev/null 2>&1 # skip if already png/jpg
# read W H from `sips -g pixelWidth -g pixelHeight`
# pick 3 square sizes (full short-edge, medium, tight) × 3 horizontal positions (left/center/right)
# vary vertical position too if image is tall
for s in 637 500 380; do # square sizes in px
for xp in left center right; do
xmax=$((W - s)); ymax=$((H - s)); y=$((ymax/2))
case $xp in left) x=0;; center) x=$((xmax/2));; right) x=$xmax;; esac
sips -c $s $s --cropOffset $y $x "$TMP/src.png" --out "$TMP/c.png" >/dev/null
sips -z 220 220 "$TMP/c.png" --out "$TMP/r.png" >/dev/null
cwebp -quiet -q 85 "$TMP/r.png" -o "$OUT/${SLUG}_${s}_${xp}.webp"
done
done
open "$OUT" # let user pick in FinderAfter user picks, copy chosen file to webp-gallery/thumbs/${SLUG}.webp and delete _picks/.
Note sips --cropOffset argument order is Y X, not X Y.
Existing convention from _gallery/*.md:
---
layout: gallery
title: "..."
order: <int>
category: "..."
image: "/webp-gallery/<slug>.webp"
alt: "..."
---