ShowerLoop-cc/docker/showerloop/public/convert-images.sh

76 lines
2.5 KiB
Bash
Executable File

#!/bin/bash
# Create backup directory
echo "Creating backup directory..."
mkdir -p image-backups
# Process JPG/JPEG files
echo "Converting JPG/JPEG images to WebP..."
find images -type f -name "*.jpg" -o -name "*.jpeg" | while read file; do
# Create backup
cp "$file" "image-backups/$(basename "$file")"
# Get dimensions
width=$(magick identify -format "%w" "$file")
# Convert to WebP with 80% quality
webp_file="${file%.*}.webp"
magick "$file" -quality 80 "$webp_file"
echo "Converted: $file -> $webp_file"
# Create responsive versions
if [ $width -gt 1200 ]; then
magick "$file" -resize 1200x -quality 80 "${file%.*}-1200.webp"
echo "Created responsive version: ${file%.*}-1200.webp"
fi
if [ $width -gt 800 ]; then
magick "$file" -resize 800x -quality 80 "${file%.*}-800.webp"
echo "Created responsive version: ${file%.*}-800.webp"
fi
done
# Process PNG files
echo "Converting PNG images to WebP..."
find images -type f -name "*.png" | while read file; do
# Create backup
cp "$file" "image-backups/$(basename "$file")"
# Get dimensions
width=$(magick identify -format "%w" "$file")
# Convert to WebP with lossless for graphics
webp_file="${file%.*}.webp"
# Use lossless for small UI elements, lossy for photos
filesize=$(stat -f%z "$file")
if [ $filesize -lt 100000 ]; then
# Small file, probably an icon or UI element - use lossless
magick "$file" -define webp:lossless=true "$webp_file"
else
# Larger file, probably a photo - use lossy with good quality
magick "$file" -quality 85 "$webp_file"
fi
echo "Converted: $file -> $webp_file"
# Create responsive versions for larger images
if [ $width -gt 1200 ]; then
magick "$file" -resize 1200x -quality 85 "${file%.*}-1200.webp"
echo "Created responsive version: ${file%.*}-1200.webp"
fi
if [ $width -gt 800 ]; then
magick "$file" -resize 800x -quality 85 "${file%.*}-800.webp"
echo "Created responsive version: ${file%.*}-800.webp"
fi
done
echo "All images have been converted to WebP format!"
echo "Original images have been backed up to the 'image-backups' directory."
echo ""
echo "Next steps:"
echo "1. Update your HTML templates to use the WebP images"
echo "2. Add <picture> elements for responsive images"
echo "3. Consider adding a fallback for browsers that don't support WebP"