# Loop through all .png images in the specified directory (bg*.png)
for img in /path/to/your/directory/bg*.png; do

    # Extract the image filename without the extension (.png)
    img_name=$(basename "$img" .png)

    # Convert the .png image to .webp format with quality 75 and save it in the same directory
    convert "$img" -quality 75 "/path/to/your/directory/$img_name.webp"
done

# Set the folder path variable to the directory containing the images and other files
folder_path="/path/to/your/directory"

# Loop through all .page files in the specified folder
for file in "$folder_path"/*.page; do
  # Check if the file is a regular file (not a directory)
  if [[ -f "$file" ]]; then
    # Extract the src URL of the image in the .page file and replace the .png extension with .webp
    x=$(grep -oP 'src="\K[^"]+' $file | sed 's/\.png$//') && x="$x.webp"
    
    # Encode the .webp image file to base64 and save it to encode.txt
    base64 /path/to/your/directory/$x > /path/to/your/directory/encode.txt
    
    # Remove any newlines from the base64-encoded content and save to a temporary file
    cat /path/to/your/directory/encode.txt | tr -d '\n' > /path/to/your/directory/temp_base64.txt
    
    # Update the .page file to use the .webp extension instead of .png
    sed -i 's/\(src="[^"]*\)\.png"/\1.webp"/g' "$file"
    
    # Replace the image src in the .page file with the base64-encoded data URI for the .webp image
    awk -v x="$x" 'NR==FNR{base64=$0; next} {gsub(x, "data:image/webp;base64," base64)}1' \
        /path/to/your/directory/temp_base64.txt $file \
        > /path/to/your/directory/temp.page \
        && mv /path/to/your/directory/temp.page $file 
  fi
done