NanoBanano Pro outputs PNG at 6-8 MB. The site needs WebP under 200 KB. I used to resize by hand every time. Built a Claude Code skill - now it’s one command.
I generate blog images through NanoBanano Pro. The results look great, but the files are brutal: PNG 1024x1024, anywhere from 6 to 8 megabytes. On prodfeat.ai that means slower page loads and sagging Core Web Vitals. LinkedIn is overkill too.
What a Claude Code skill is
A skill is a Markdown file inside .claude/skills/ that teaches Claude a new capability. It contains instructions and optionally scripts. Mention “process images” in a conversation - Claude picks it up.
SKILL.md has a YAML frontmatter with name and description (Claude uses these to decide when to activate the skill), plus a step-by-step workflow.
What I did
Started with the built-in skill-creator meta-skill - a helper in Claude Code for designing new skills. Told it: “I need a skill to process images from NanoBanano, convert to web-ready format.”
Skill-creator asked three questions: what comes in, what goes out, what’s the workflow. Generated the structure and a base SKILL.md.
Processing pipeline:
- Drop PNG into
content/posts/images/new/ - Tell Claude “process images”
- Claude asks which folder to save to (linked to a specific post)
- Script resizes to max-width 1600px, converts to WebP at quality 85
- Original moves to an
in progress/subfolder, WebP lands next to it
Script is Python with Pillow. 90 lines. Handles both individual files and full folders.
Why WebP and not JPEG? According to Google, WebP lossless is 26% smaller than PNG. WebP lossy is 25-34% smaller than JPEG at comparable quality. All modern browsers support it.
I considered Sharp (Node.js, libvips). It’s the standard for JS projects and faster on large batches. But my scripting stack is Python and Pillow is already installed. Went with Pillow - for 3-5 images at a time the difference doesn’t matter.
Why 1600px and not 1200? LinkedIn recommends 1200px for posts. The blog renders at the same width. But retina screens need headroom - 1600px covers 2x on mobile without adding unnecessary weight.
Result
First test: PNG from NanoBanano, 6.5 MB, 1024x1024.
Output: WebP, 89 KB (no resize needed - source was already under 1600px). 73x compression.
For upscaled images (2048x2048) - resize to 1600px + WebP gives 120-180 KB. Was 12 MB, now 150 KB.
The whole process: 5 seconds instead of 2 minutes of manual work in Preview + ImageOptim. For 10 images in a post - saves 20 minutes. At 2-3 posts a week that’s roughly 3 hours a month.
What I learned
Claude Code skills are a way to lock in a repeating workflow so Claude reproduces it exactly. You could write the script without Claude, but wrapping it in a skill adds context: Claude suggests the folder, asks which post to link to, moves the originals.
A separate completed/ folder for processed images - not sure I need it yet. Right now everything sits in in progress/ next to the originals. I’ll check back in a month when 30-40 files have piled up. The current structure might be enough.
Skill-creator generated the structure and base SKILL.md in 5 minutes. Tweaking it to fit my workflow took another 10. Total: 15 minutes from idea to working skill.