How I Let Claude Code Optimize All My Images

I had 30 images in my src/assets folder. PNG, JPG, JPEG — mixed formats, uncompressed, some over 1MB. They were slowing down every page load and adding unnecessary weight to every Netlify deploy.

I asked Claude Code to fix it. One prompt. It converted everything, updated every import reference across 12 component files, and pushed to Git.

I didn't open a single image editor.

The tool: sharp-cli

🤓 Dev Mode

sharp is a high-performance Node.js image processing library built on libvips. It handles WebP encoding, resizing, format conversion, and metadata stripping — all in native code, significantly faster than ImageMagick or Jimp.

sharp-cli exposes sharp as a command-line tool. Once installed globally, converting an entire directory looks like this:

npm install -g sharp-cli

# Convert a single file
sharp input.png -o output.webp

# Convert an entire folder
for f in src/assets/*.png; do
  sharp "$f" -o "${f%.png}.webp"
done

WebP achieves 25–35% smaller file sizes compared to PNG at equivalent visual quality, and 25–50% compared to JPEG. The difference is measurable in Lighthouse scores and real user load times.

After converting the files, every import statement referencing the old extensions needs to be updated. Claude Code handled both steps — conversion and find-and-replace across all components — as a single atomic task.

😶 Just Follow Along

Your images are probably too heavy. Every PNG you exported from Figma or Photoshop is carrying data your browser doesn't need.

WebP is the format the web actually uses now. Chrome, Safari, Firefox — they all support it. There's no reason to ship PNG in 2026.

The manual version of this is: open each image in Squoosh or Photoshop, export as WebP, rename, update the import. For 30 images that's a full afternoon of tedious work.

The Claude Code version is: "convert all images in src/assets to WebP and update all the imports." Done in three minutes, including the Git push.

Videos: ffmpeg + Vimeo

🤓 Dev Mode

Video is a different problem. A 4.5MB MP4 in your /public folder ships with every deploy and loads on every page visit. For a hero background video, that's a significant performance hit — especially on mobile connections.

The right approach has two parts:

• Compression with ffmpeg — re-encode to H.264 with a lower CRF value (higher = smaller file, lower quality). CRF 28 is a good starting point for background video where quality is secondary to performance.
• Offload to Vimeo — instead of serving the file yourself, upload to Vimeo as "unlisted" and embed via iframe. Vimeo handles adaptive streaming, CDN delivery, and bandwidth — you get a lighter repo and better performance for free.

# Install ffmpeg (Windows)
winget install ffmpeg

# Compress video — CRF 28, fast preset, strip audio
ffmpeg -i input.mp4 -vcodec libx264 -crf 28 -preset fast -an output.mp4

For a hero background video, also consider: no audio (-an), autoplay, muted, loop, and playsinline on the video element. These are not optional on mobile — iOS Safari won't autoplay anything that isn't muted and inline.

😶 Just Follow Along

A 4.5MB video in your repo is 4.5MB that Netlify deploys and your visitor downloads every time they land on your homepage.

Upload it to Vimeo instead. Set it to unlisted — it won't appear in search, won't show up on your profile, but anyone with the embed link can play it. Then replace the <video> tag in your code with a Vimeo iframe.

Your repo gets lighter. Your deploys get faster. Your visitor gets the video streamed from Vimeo's CDN instead of downloaded from your hosting. Everyone wins.

The full pipeline in one table

None of this is new. Developers have been converting images to WebP and compressing video for years.

What changed is who does it. The tedious part — finding every file, running the command, updating every import, pushing to Git — is now a prompt, not an afternoon.

The optimization didn't change. The time it costs me did.