How Do I Use Claude Code Hooks to Automate My Webflow Image Optimization in 2026?

What happens when image optimization stops eating thirty minutes of every Webflow build?

I shipped four Webflow sites in May 2026. Across those four projects, I uploaded 312 images. I used to compress, rename, and add alt text to each one by hand. That work alone took roughly thirty five minutes per site, which means I spent more than two hours that month doing the same three steps in a slightly different order. So in early June, I sat down with Claude Code and wrote a hook that does it for me.

The hook fires every time I run my image prep command. It uses Sharp under the hood for compression, the Claude Code SDK to generate alt text from the image content, and a small naming rule that turns my messy filenames into Webflow friendly slugs. According to Web Almanac's 2025 report, 73% of total page weight on a median site is still images. Anything I can do to make this step painless on every project is worth the one afternoon of setup.

Here is the full workflow I built, why I chose Claude Code hooks over a stand alone script, and how you can adapt the same approach for your own Webflow practice without touching React or Node directly.

What Is a Claude Code Hook and Why Does It Fit Webflow Image Work in 2026?

A Claude Code hook is a small shell command that runs in response to a specific event inside the Claude Code CLI. The events I care about are PostToolUse and Stop, which fire after a tool call or at the end of a session. Hooks live in settings.json, take seconds to configure, and never need a separate process.

This fits image work because the trigger is natural. Every time Claude writes a new file inside my "images-raw" folder during a project, a PostToolUse hook can compress and rename it. According to the official Claude Code documentation updated in May 2026, hooks ship with every install and now support per project scoping, which means I can have one hook config that only fires on Webflow client folders.

Before hooks, I was running a Python script manually after each session. That worked, but I forgot it about one time in three. With the hook, forgetting is not an option. The image step happens whether I remember it or not.

How Does the Hook Actually Compress and Rename Webflow Images?

The hook calls a small Bash script. The script does three things in sequence. It runs Sharp through a single Node command to convert PNGs to WebP at 82% quality, which is the threshold I have found preserves perceived quality while cutting file size by 64% on average across my Webflow projects. It then renames each file using a simple pattern that strips spaces, lowercases letters, and adds a brand prefix from a project config.

The third step is the one that took me longest to get right. I pipe each new image through Claude Opus 4.7 with a prompt asking for a concise, accessibility focused alt text under fifteen words. I store the output in a sidecar JSON file that I later paste into Webflow during the upload step. The whole pipeline runs in roughly six seconds per image on a 2024 MacBook Pro.

Why Not Just Use Webflow's Built In Image Optimization?

Webflow does compress images automatically at upload time. The platform serves AVIF and WebP variants through its CDN, which covers 92% of modern browsers per Can I Use data from April 2026. That part is genuinely solid. What Webflow does not do is rename files for SEO, generate alt text from the image itself, or normalize dimensions across a sprawling marketing site.

Those are the three places I was losing time. The Webflow CDN optimization is excellent for delivery. My hook fixes the upstream mess before anything reaches Webflow. For the broader performance context, my guide on image optimization for Webflow SEO covers what the platform handles natively and what you still need to do yourself.

What Did the Setup Actually Look Like Inside Claude Code?

I added a PostToolUse hook to my project level settings.json. The matcher targets the Write tool, so it only fires when Claude creates a new file. The command runs my prep script, passing the file path through. The whole config block is roughly twelve lines. Claude Code reloads settings when I restart the session, so iteration time is short.

I keep a second hook on the Stop event that runs a Sharp summary report at the end of every session. It tells me how many images were processed, average compression ratio, and any files that failed. This catches issues I would otherwise discover only when looking at a slow page after launch.

How Does This Hook Compare to Using Cloudinary or ImageKit?

Cloudinary and ImageKit are great if you need on the fly transformations after upload. ImageKit's free tier offers 20GB per month, which covers most small Webflow sites. The catch is integration. You need to swap your image URLs to the ImageKit domain, manage two CDNs, and update your front end every time an image is added.

My Claude Code hook does the work before Webflow ever sees the file. There is no second service, no extra DNS, no bill. For solo Webflow partners running ten or fewer client sites, the local pipeline wins on simplicity. For agencies running fifty plus sites with complex transformation needs, a service like ImageKit still earns its keep.

What Has the Setup Saved Me Across Real 2026 Projects?

I tracked the saved minutes for the first four Webflow projects after the hook went live. Across 312 images, the manual workflow had been costing me roughly 142 minutes. The hook version took 14 minutes of my time, mostly spent reviewing the generated alt text. That is a 90% time saving, which over a quarter of work works out to roughly twenty saved hours.

The quality is also more consistent. My old alt text was often "person at desk" or worse. Claude Opus 4.7 produces alt text that names objects, actions, and context, which both improves accessibility and feeds AI search engines like Perplexity and Google AI Mode the metadata they actually use. I dug into this metadata side of AI search in my piece on how agentic browsers audit Webflow sites.

What Are the Failure Modes I Hit Along the Way?

Three things broke during setup. The first was permissions. Claude Code asks for permission before running a hook command on a new path, which caught me by surprise the first time. The fix was to add the prep script path to the permissions block in settings.json. The second was a silent failure when the Sharp version on the system was older than 0.33, which I solved by adding a version check at the top of the script.

The third was alt text drift. Claude sometimes returned alt text that was technically accurate but did not match my brand voice. I added a five line voice guide to the system prompt. After that, the alt text reads like I wrote it. The guide lives in a markdown file the prep script reads on every run.

How Do You Build This for Your Own Webflow Practice This Week?

Start with the Claude Code documentation page on hooks and copy the basic PostToolUse template. Replace the command with a Bash script that does compression, renaming, and alt text generation. Test on one folder of five images before applying it to a live client project. Run the Stop hook for a summary so you can spot issues before they ship.

For the broader workflow context, my piece on Claude Code skills replacing my Webflow workflow scripts covers how hooks fit alongside skills and slash commands. For the underlying image performance reasoning, my earlier guide on fixing LCP with lazy loading on Webflow explains why the file size targets matter for Core Web Vitals.

If you want help wiring this up for your specific Webflow stack, I am happy to walk through it on a call. Let's chat.