feat: convert all images to WebP with pre-commit optimization hook (#90)

* feat: convert all images to WebP with pre-commit optimization hook

- Convert all 63 images from JPG/JPEG/PNG to WebP (63 MB → 23 MB, 63% reduction)
- Update every image reference in posts, pages, and _config.yml to .webp
- Add .githooks/pre-commit that auto-converts staged images on commit
- Add scripts/optimize-images.sh for bulk conversion and scripts/install-hooks.sh for setup
- Add CLAUDE.md documenting the image workflow and local setup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* rotate image

* spelling and formatting

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: tomarra

.githooks/pre-commit

@@ -0,0 +1,45 @@
+#!/bin/bash
+# Pre-commit hook: converts staged JPG/JPEG/PNG images to WebP automatically.
+# Install once with: ./scripts/install-hooks.sh
+
+QUALITY_PHOTO=82
+QUALITY_SCREENSHOT=88
+
+if ! command -v cwebp &>/dev/null; then
+    echo "Warning: cwebp not found — skipping image optimization. Install with: brew install webp"
+    exit 0
+fi
+
+STAGED_IMAGES=$(git diff --cached --name-only --diff-filter=A | grep -iE '\.(jpg|jpeg|png)$' || true)
+
+if [ -z "$STAGED_IMAGES" ]; then
+    exit 0
+fi
+
+CONVERTED=0
+
+while IFS= read -r img; do
+    [ -z "$img" ] && continue
+    [ -f "$img" ] || continue
+
+    webp_path="${img%.*}.webp"
+
+    if echo "$img" | tr '[:upper:]' '[:lower:]' | grep -q '\.png$'; then
+        quality=$QUALITY_SCREENSHOT
+    else
+        quality=$QUALITY_PHOTO
+    fi
+
+    cwebp -q "$quality" -quiet "$img" -o "$webp_path"
+    rm "$img"
+    git rm --cached "$img" >/dev/null 2>&1
+    git add "$webp_path"
+
+    echo "  Optimized: $img → $webp_path"
+    CONVERTED=$((CONVERTED + 1))
+done <<< "$STAGED_IMAGES"
+
+if [ "$CONVERTED" -gt 0 ]; then
+    echo ""
+    echo "  $CONVERTED image(s) converted to WebP. Reference them with the .webp extension in your posts."
+fi

.vscode/cspell.json

@@ -30,6 +30,7 @@
     "codeyear",
     "curlingscoreboard",
     "currentdate",
+    "cwebp",
     "dasow",
     "dennisleary",
     "difftool",

CLAUDE.md

@@ -0,0 +1,39 @@
+# tomarra.github.io
+
+Personal blog built with Jekyll, hosted on GitHub Pages.
+
+## Setup
+
+After cloning, install the git hooks so images are automatically optimized on commit:
+
+```bash
+./scripts/install-hooks.sh
+```
+
+Requires `cwebp` for image optimization: `brew install webp`
+
+## Images
+
+All images live in `images/` (root-level) or `images/posts/` (post images).
+
+**Format:** WebP only. All images must be `.webp` before committing.
+
+**The pre-commit hook handles this automatically:** drop any `.jpg`, `.jpeg`, or `.png` into `images/`, stage it with `git add`, and the hook converts it to `.webp` and swaps the staged file before the commit lands. You never commit non-WebP images.
+
+**Reference images in posts using the `.webp` extension:**
+
+```markdown
+![Alt text]({{site.baseurl}}/images/posts/my_photo.webp)
+```
+
+**To bulk-convert images manually** (e.g. if hooks aren't installed):
+
+```bash
+./scripts/optimize-images.sh
+```
+
+## Running locally
+
+```bash
+bundle exec jekyll serve
+```

_config.yml

@@ -2,7 +2,7 @@
 #-------------------------------
 # General Site Settings
 title: Tom Arra
-logo: # You can add own logo. For example '/images/logo.png'.
+logo: # You can add own logo. For example '/images/logo.webp'.
 description: Thoughts, stories and ideas. Mostly.
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://tomarra.com" # the base hostname & protocol for your site, e.g. http://example.com
@@ -11,7 +11,7 @@ url: "https://tomarra.com" # the base hostname & protocol for your site, e.g. ht
 # Author Settings
 author:
   name: Tom Arra
-  avatar: "/images/headshot.jpg"
+  avatar: "/images/headshot.webp"
 
 social:
   - { icon: "fa-twitter", label: Twitter, link: "https://twitter.com/tom_arra" }
@@ -53,7 +53,7 @@ social:
 hero:
   hero__title: Hey, I’m Tom! Product Leader & Engineer.
   hero__description: I'm a product leader & engineer who loves to work with global teams and products. I help organize the corporate chaos to make the best solutions for customers. Here I post about not just tech but a few hobbies as well.
-  hero__image: "/images/headshot.jpg"
+  hero__image: "/images/headshot.webp"
 
 #-------------------------------
 # Build Settings

_pages/about.md

@@ -2,7 +2,7 @@
 layout: page
 title: About
 permalink: /about/
-image: "/images/curling_slide.jpeg"
+image: "/images/curling_slide.webp"
 ---
 
 **Tom Arra** has over ten years of experience in the software engineering world but has been interested in technology a few years before that. While attending school he started as an intern focused on product testing and hasn’t looked back since. Tom has experience as a software engineer, team lead, and product owner across many different types of products and frameworks.

_posts/2011-06-28-Just-What-We-Need-Another-Social-Network.md

@@ -7,7 +7,7 @@ tags: web google
 
 Looks like Google is going to try it’s hand again at some kind of social network. The landing page for [Google+](http://plus.google.com/) has just surfaced and with that it seems as though Google is rolling out some possible rebranding.
 
-![Black Google Top Bar]({{ site.baseurl }}/images/posts/Google_Top_Black_Bar.png)
+![Black Google Top Bar]({{ site.baseurl }}/images/posts/Google_Top_Black_Bar.webp)
 
 Really Google? A black top bar? Doesn’t that go against your entire web UI?
 

_posts/2011-07-06-Inverted-Scrolling.md

@@ -9,6 +9,6 @@ I upgraded my MacBook Pro to the Golden Master release of Lion this morning and
 
 To get scrolling back to the trusty way it has been since…forever just plug in a USB mouse or connect a Bluetooth mouse. Then in System Preferences go to Mouse and uncheck the checkbox at the top.
 
-![Scrolling Setting]({{ site.baseurl }}/images/posts/Scrolling_Setting.png)
+![Scrolling Setting]({{ site.baseurl }}/images/posts/Scrolling_Setting.webp)
 
 The setting will apply to the external mouse but it will also carry over to the trackpad.

_posts/2011-07-07-The-Icons-Shape-the-Platform.md

@@ -7,6 +7,6 @@ tags: mobile software
 
 Mobile platforms. Just saying the phrase makes some people cringe due to the number of ecosystems out there. But with each ecosystem/platform comes a new UI. [WPCentral](http://www.wpcentral.com/smartphone-os-shapes) has an interesting article how how close each platform’s icon size/shape really is.
 
-![Icon Shapes]({{ site.baseurl }}/images/posts/Icon_Shapes.jpg)
+![Icon Shapes]({{ site.baseurl }}/images/posts/Icon_Shapes.webp)
 
 It’s something you don’t really see until you line them all up. Also notice the absence of BlackBerry OS and Android. Both platforms have no standard/bounding shape for developers to use. While some people might hate the restrictions on icon shape and size I think it’s good to have when you want to really give the consumer the best UI possible.

_posts/2011-07-11-The-Last-Shuttle.md

@@ -5,6 +5,6 @@ date: 2011-07-11
 tags: space nasa
 ---
 
-![The Last Shuttle]({{ site.baseurl }}/images/posts/The_Last_Shuttle.jpg)
+![The Last Shuttle]({{ site.baseurl }}/images/posts/The_Last_Shuttle.webp)
 
 The last shuttle mission launched last Friday and what a shot this was. Photo taken from [Robert Scobel’s Flickr Stream](http://www.flickr.com/photos/scobleizer/5915301679/in/photostream)

_posts/2011-08-09-We-Stopped-Dreaming.md

@@ -7,4 +7,4 @@ tags: politics space
 
 Not much else to add to this video except the fact that Neil deGrasse Tyson is the man. We need to get other people to think the same way so we can rejuvenate not only this country but the whole world.
 
-[![We Stopped Dreaming](http://img.youtube.com/vi/3_F3pw5F_Pc/0.jpg)](http://www.youtube.com/watch?v=3_F3pw5F_Pc "We Stopped Dreaming")
+[![We Stopped Dreaming](http://img.youtube.com/vi/3_F3pw5F_Pc/0.webp)](http://www.youtube.com/watch?v=3_F3pw5F_Pc "We Stopped Dreaming")