How to Convert Your Images to WebP in 5 Minutes

How to Convert Your Images to WebP in 5 Minutes

Stop shipping bloated JPEGs. Here’s a bite-sized workflow to switch…

30 June 2025 • 4 min read

Shipping 400 KB JPEGs is so 2015. Let’s teleport your hero images to WebP in minutes—boosting performance while keeping quality crisp and your Lighthouse scores glowing green.

WebP helps your site load faster without sacrificing quality, saving bandwidth while improving SEO and user experience. Here’s your step-by-step workflow to modernise your image pipeline.

⚡ TL;DR: Install sharp-cli, run a single command to convert images to WebP, swap in <picture> tags, and enjoy lighter, faster pages.

What Is WebP?

WebP is a modern image format developed by Google, providing lossy and lossless compression, alpha transparency, and animation support in smaller file sizes than JPEG or PNG. It’s your front-end’s best friend for reducing page weight without losing visual quality.

Explanation of WebP image format benefits
WebP helps reduce image sizes while keeping visuals crisp and clear.

Step 1: Install Sharp CLI

Use sharp for efficient batch conversion using the libvips engine:

npm i -g sharp-cli

Step 2: Batch Convert Images

Run this one-liner to convert all images in your folder to WebP:

sharp images/*.jpg,png --webp -o webp/
🪄 Aliasing it to npm run images:build streamlines your workflow for future builds.

Step 3: Use <picture> Tags

To serve WebP while maintaining compatibility fallback:

<picture>
  <source srcSet="/webp/hero.webp" type="image/webp" />
  <img src="/images/hero.jpg" alt="Hero Image" width="1200" height="600" />
</picture>
Before and after image size reduction with WebP
Converting to WebP can dramatically reduce file size while maintaining quality.

Step 4: Automate with CI/CD

Add WebP conversion to your CI/CD pipeline to ensure no heavy images slip into production:

# .github/workflows/build.yml
- name: Convert images to WebP
  run: npm run images:build

Step 5: Test with Lighthouse

Validate your improvements:

npx lighthouse http://localhost:3000 --view

Watch your performance metrics improve instantly.

Bonus: Consider AVIF

AVIF offers even better compression than WebP, though with slightly slower decoding on some devices. Try:

sharp images/*.png --avif -o avif/
🚨 Test AVIF on lower-power devices before shipping it to production to ensure performance remains smooth.

Troubleshooting

  • Washed-out colors? Strip metadata using --remove-metadata.
  • File sizes not reducing? Adjust --quality levels (try 70).
  • Install issues on Apple Silicon? Ensure Xcode CLI tools or Homebrew’s libvips are installed.

FAQ

Q: Is WebP free to use?
A: Yes, it’s royalty-free.

Q: Does WebP support animation?
A: Yes, and it’s more efficient than GIF.

Q: When should I not use WebP?
A: If targeting legacy browsers or requiring pixel-perfect archival, fallback to PNG or JPEG.

Further Reading

🎉 Congratulations! You’re ready to optimise your site images and boost your performance metrics with WebP. Happy shipping!

Need help implementing these performance upgrades on your business site? Contact QuantumPixel for scalable, clean, and optimised website builds.

XLinkedIn

Explore More from Our Blog