Page load improvements, plus bash scripts for future image changes

compress.sh

@@ -0,0 +1,49 @@
+#!/bin/bash
+
+# Directory containing the images
+input_dir="./public"
+output_dir="./public/tmp"
+
+rm -rf ${output_dir}
+mkdir -p ${output_dir}
+
+for input_file in "$input_dir"/*; do
+    if [ -f "$input_file" ]; then
+        filename=$(basename "$input_file")
+        extension="${filename##*.}"
+        output_file="${output_dir}/${filename}"
+
+        case "$extension" in
+            jpg)
+                # local max=65536
+                if [ $(stat -f%z "${input_file}") -gt 65536 ]; then
+                    magick "${input_file}" -resize 30% "${output_file}"
+                    while [ $(stat -f%z "$output_file") -gt 65536 ]; do
+                        echo "Processing JPEG file: $output_file"
+                        magick "${output_file}" -resize 30% "${output_file}"
+                    done
+                fi
+                mv "${output_file}" "${input_file}"
+                ;;
+            gif)
+                if [ $(stat -f%z "$input_file") -gt 1048576 ]; then
+                    ffmpeg -y -i "$input_file" -vf "scale=iw*0.75:ih*0.75" "${output_file}"
+                    while [ $(stat -f%z "$output_file") -gt 1048576 ]; do
+                        echo "Processing GIF file: $output_file"
+                        # Compress GIF files using ffmpeg
+                        ffmpeg -y -i "$output_file" -vf "scale=iw*0.75:ih*0.75:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=32[p];[s1][p]paletteuse=dither=bayer" "${output_dir}/tmp-${filename}"
+                        mv "${output_dir}/tmp-${filename}" "${output_file}"
+                    done
+                    mv "${output_file}" "${input_file}"
+                fi
+                ;;
+            *)
+                echo "Skipping file: $input_file"
+                ;;
+        esac
+    fi
+done
+
+rm -rf ${output_dir}
+
+echo "Compression complete!"

filenames.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+input_dir="./public"
+output_dir="./public"
+
+mkdir -p "$output_dir"
+
+for input_file in "$input_dir"/*.png; do
+    if [ -f "$input_file" ]; then
+        filename=$(basename "$input_file" .png)
+        output_file="$output_dir/$filename.jpg"
+        
+        imagemagick "$input_file" "$output_file"
+
+        rm "${input_file}"
+        
+        echo "Converted $input_file to $output_file"
+    fi
+done
+
+for input_file in "$input_dir"/*.jpeg; do
+    if [ -f "$input_file" ]; then
+        filename=$(basename "$input_file" .jpeg)
+        output_file="$output_dir/$filename.jpg"
+        
+        mv "$input_file" "$output_file"
+        
+        echo "Converted $input_file to $output_file"
+    fi
+done
+
+echo "Conversion complete!"

src/main.ts

@@ -1,22 +1,22 @@
 import backwalkgeorge from "/backwalkgeorge.jpg";
-import georgetoilet from "/georgetoilet.png";
-import klinefloor from "/klinefloor.jpeg";
+import georgetoilet from "/georgetoilet.jpg";
+import klinefloor from "/klinefloor.jpg";
 import klinemirror from "/klinemirror.jpg";
-import klineoutside from "/klineoutside.jpeg";
-import klinetrain from "/klinetrain.jpeg";
-import sashaklineburrito from "/sashaklineburrito.jpeg";
-import sashaklinecar from "/sashaklinecar.jpeg";
-import sunsetkline from "/sunsetkline.png";
+import klineoutside from "/klineoutside.jpg";
+import klinetrain from "/klinetrain.jpg";
+import sashaklineburrito from "/sashaklineburrito.jpg";
+import sashaklinecar from "/sashaklinecar.jpg";
+import sunsetkline from "/sunsetkline.jpg";
 import georgerasp from "/georgerasp.gif";
 import sunsetfourteenth from "/14thstsunrise.gif";
-import solderkitty from "/solderkitty.jpeg";
+import solderkitty from "/solderkitty.jpg";
 import ducklings from "/ducklings.gif";
 import fieldnotes from "/fieldnotes.gif";
 import lamp from "/lamp.gif";
-import ohio from "/ohio.jpeg";
-import heron from "/heron.jpeg";
-import flowers from "/flowers.jpeg";
-import mirror from "/mirror.jpeg";
+import ohio from "/ohio.jpg";
+import heron from "/heron.jpg";
+import flowers from "/flowers.jpg";
+import mirror from "/mirror.jpg";
 
 let background = document.getElementById("background")!;