#!/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