Tooling Up: Rapidly Building an Image Optimization Workflow with AI
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?
- Privacy: This tool runs 100% in the browser. No images are uploaded to a server.
- Workflow Specificity: It is tailored exactly to my project's needs (the specific breakpoints defined in my
scratchpad.md). - 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.
- Live Demo: jasonbra1n.github.io/image-to-webp-converter
- Source Code: github.com/jasonbra1n/image-to-webp-converter
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