Jason Brain's Tech Blog

Tooling Up: Rapidly Building an Image Optimization Workflow with AI

by Jason Brain

As I moved down my Project Roadmap, the next major task was Image Optimization. The goal? Improve Core Web Vitals by implementing responsive images (srcset) across the portfolio.

I looked at the task: Create resized versions of key assets (480w, 800w, 1200w).

I could have opened Photoshop and manually exported dozens of files. I could have used a command-line tool. But as a Creative Technologist, I saw an opportunity to build a workflow that I (and others) could use forever.

From Script to Suite in Hours

I had an old, basic script (v1.0.0) lying around that could convert a single image. It was functional but clunky.

Using the Human-AI collaboration workflow I've established with Gemini, we didn't just update the script; we completely overhauled it. In a matter of hours, we took a simple utility and evolved it into v2.2.0 of the Image to WebP Converter.

The Velocity of AI Development

The speed of iteration was staggering. Here is what we accomplished in a single "sprint":

  • v2.0.0: Added responsive size generation (automatically creating 480px, 800px, and 1200px versions) and a real-time quality slider.
  • v2.1.0: Refactored for offline capability, ensuring the tool works without an internet connection—perfect for secure environments.
  • v2.2.0: Added "Force Aspect Ratio" tools (essential for uniform card layouts), custom width inputs, and a ZIP manifest generator.

Why Build Your Own Tools?

Why spend time building a tool when others exist?

  1. Privacy: This tool runs 100% in the browser. No images are uploaded to a server.
  2. Workflow Specificity: It is tailored exactly to my project's needs (the specific breakpoints defined in my scratchpad.md).
  3. Learning: It serves as another case study in modern, AI-assisted web development.

Try It Out

The tool is open source and available for anyone to use.

Now that the tooling is ready, I'm equipped to tackle the site-wide image optimization task with efficiency and precision.

Check out the full changelog on GitHub.






Comments