sage
ee6f61d51c
- New custom favicon: blue gradient water drop with spray burst (favicon.png 32/64/256px, favicon.webp, apple-touch-icon 180px) - Mobile nav (768px): tighter padding (12px), smaller logo (1rem), smaller icon (1.2rem) - Narrow phones (480px): logo text 0.85rem, logo max-width 60% - Tiny phones (360px): logo text 0.75rem, logo max-width 55% - CSS cache buster bumped to v3
52 lines
1.6 KiB
Bash
52 lines
1.6 KiB
Bash
#!/bin/bash
|
|
# Convert all JPG/PNG images to WebP and update HTML with srcset fallbacks
|
|
set -e
|
|
|
|
IMG_DIR="img"
|
|
INDEX_FILE="index.html"
|
|
|
|
echo "Converting images to WebP..."
|
|
|
|
# Convert all JPG and PNG files to WebP
|
|
for f in "$IMG_DIR"/*.jpg "$IMG_DIR"/*.png; do
|
|
[ -f "$f" ] || continue
|
|
base="${f%.*}"
|
|
webp="${base}.webp"
|
|
if [ ! -f "$webp" ]; then
|
|
convert "$f" -quality 82 "$webp"
|
|
echo " Converted: $(basename "$f") -> $(basename "$webp")"
|
|
fi
|
|
done
|
|
|
|
echo ""
|
|
echo "Updating index.html with srcset attributes..."
|
|
|
|
# Update each img tag in index.html with srcset
|
|
# We need to update: gallery images, work images, and og-banner in meta tags
|
|
sed -i 's|img/og-banner.jpg|img/og-banner.jpg, img/og-banner.webp|g' "$INDEX_FILE"
|
|
|
|
# Gallery images - update each img tag with srcset
|
|
for f in "$IMG_DIR"/*.jpg "$IMG_DIR"/*.png; do
|
|
[ -f "$f" ] || continue
|
|
basename="${f#$IMG_DIR/}"
|
|
basename="${basename%.*}"
|
|
# Update JPG references
|
|
if [[ "$basename" == *".jpg" ]]; then
|
|
webp="${basename%.jpg}.webp"
|
|
sed -i "s|\"$basename\"|\"$basename\", \"$webp\" type=\"image/webp\"|g" "$INDEX_FILE"
|
|
fi
|
|
# Update PNG references
|
|
if [[ "$basename" == *".png" ]]; then
|
|
webp="${basename%.png}.webp"
|
|
sed -i "s|\"$basename\"|\"$basename\", \"$webp\" type=\"image/webp\"|g" "$INDEX_FILE"
|
|
fi
|
|
done
|
|
|
|
echo ""
|
|
echo "Done! Generated WebP files and updated index.html with srcset fallbacks."
|
|
echo ""
|
|
echo "Size comparison:"
|
|
echo "Original: $(du -sh "$IMG_DIR" | cut -f1)"
|
|
echo "With WebP: $(du -sh "$IMG_DIR" | cut -f1)"
|
|
du -sh "$IMG_DIR"/*.webp 2>/dev/null | awk '{printf " %-35s %s\n", $2, $1}' | sort
|