Cool Easy

← All articles

How to batch convert PNG to WebP for Core Web Vitals (without uploading your images)

Switching a site's images from PNG to WebP is one of the fastest wins for Core Web Vitals and page load speed. The conversion itself takes minutes — if you have the right tool and don't need to upload everything to a stranger's server.

2 May 2026 · 5 min read

Why image format still matters for page speed

Lighthouse and PageSpeed Insights have flagged "serve images in modern formats" as a recommendation for years. The reason it keeps appearing is that it keeps being accurate — most sites still serve PNG or JPEG for images that would be meaningfully smaller in WebP or AVIF.

The numbers are consistent enough to be worth treating as rules of thumb. A portfolio of product photos or blog hero images at a typical web quality setting comes out 25–35% smaller in WebP than in PNG. For AVIF, 40–50% smaller. On a page that loads 500 KB of images, that's potentially 150–250 KB saved. Multiply that by page views, and it shows up in Time to Largest Contentful Paint (LCP) — one of the three Core Web Vitals that Google uses as a ranking signal.

The conversion job itself is simple. The friction is usually the tool: either something that processes files one at a time, or a "free online converter" that uploads your images to a server before returning the converted versions.

The system

Step 1: Decide which format to target

WebP is the default choice. Chrome, Firefox, Safari, and Edge have all supported it for several years. If your analytics don't show significant traffic from IE11 or older Safari (pre-14), WebP is safe.

AVIF gives better compression but is newer. Chrome 85+, Firefox 93+, Safari 16+. Check your analytics — if most of your traffic is on modern browsers, AVIF is worth the extra saving. You can serve both using a <picture> element:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.png" alt="Description" />
</picture>

The browser picks the first format it supports. Older browsers fall back to the original PNG.

Step 2: Set your quality target

WebP quality is set on a 0–100 scale (similar to JPEG). The right level depends on the image type:

Image type Suggested quality
Photographs 75–80
UI screenshots, diagrams 82–88
Images with text 85–90
Icons, logos with flat colour Consider PNG or SVG instead

For flat-colour graphics (logos, icons, simple illustrations), PNG's lossless compression often beats WebP's lossy compression — they're roughly the same size, but PNG is exact. Use WebP for photographs and complex images; keep SVG or PNG for icons.

Step 3: Convert in batch with Toolbelt

Open Toolbelt's side panel and go to the image converter. Drag your image folder in (or select multiple files). Set the target format (WebP or AVIF) and quality. Click Convert — the converted set downloads as a ZIP, keeping your original filenames with the new extension.

The conversion runs in your browser. Your images don't leave your machine.

If you need to convert selectively (only the images above a certain file size, or only photos and not screenshots), sort by file size in the viewer and select accordingly.

Step 4: Update your image references

How you update depends on your setup:

Static HTML site: find-and-replace .png → .webp in your HTML files, or switch to <picture> elements for the fallback.

Next.js / Astro / Gatsby: these frameworks handle this automatically if you use their built-in <Image> components with WebP support enabled. You may not need to convert manually at all — check your framework's image optimisation docs.

WordPress: plugins like ShortPixel or Imagify handle conversion and serving automatically. Manual conversion is useful if you're cleaning up an existing media library.

CDN (Cloudflare, Fastly, imgix): most modern CDNs can serve WebP automatically when the browser sends an Accept: image/webp header — check your CDN's image optimisation settings before converting manually.

Step 5: Verify the improvement

After deploying, run Lighthouse (in Chrome DevTools or PageSpeed Insights) on the updated pages. The "Serve images in modern formats" audit should clear. Check LCP — if your largest contentful element was a hero image, LCP should improve measurably.

Also do a visual spot-check at 100% zoom. A quality setting that looks fine at normal viewing distance can show compression artifacts on text or sharp edges when you zoom in.

For CI/CD: automate it with cwebp or Squoosh CLI

If you want conversion to happen automatically when images are added to your project, command-line tools integrate into build pipelines:

cwebp (Google's official tool):

# Install on macOS
brew install webp

# Convert a single file
cwebp -q 82 image.png -o image.webp

# Batch convert a directory
for f in *.png; do cwebp -q 82 "$f" -o "${f%.png}.webp"; done

Squoosh CLI (supports WebP and AVIF):

npx @squoosh/cli --webp '{"quality":82}' *.png
npx @squoosh/cli --avif '{"quality":60}' *.png

Add either to a pre-commit hook or a build step to convert automatically when images change.

Common mistakes

Converting logos and icons to WebP. WebP's lossy compression introduces subtle artifacts in flat-colour graphics. SVG is correct for vector logos; PNG is fine for icons where exact pixel values matter. Save WebP for photographs and complex imagery.

Deleting the original PNGs. WebP is a delivery format, not a source format. Keep the lossless original — you'll want it if you need to re-export at different dimensions later.

Setting quality too high and missing the point. Quality 95 WebP is barely smaller than the original PNG. The point is to find the highest quality setting where the image is visually indistinguishable from the original at a reasonable zoom level, not to maximise fidelity. For most photos, quality 78 is indistinguishable from quality 95 at 100% zoom.

Not testing on Safari before shipping AVIF. Safari added AVIF support in version 16, which is reasonably well-adopted, but check your analytics if Safari is a significant portion of your traffic. Serving an unsupported format without a fallback shows a broken image.

Batch-converting through an online tool without checking what's in the folder. If you're batch-processing a synced client folder or a shared drive, scan the contents before uploading — you may not have looked at every file in it.

FAQ

How much smaller are WebP files compared to PNG?

Typically 25–35% smaller at equivalent visual quality for photos and complex images. For simple graphics with flat areas of colour (screenshots, diagrams, UI mockups), the saving is sometimes smaller — PNG handles those well and WebP's advantage narrows. AVIF is 40–50% smaller than PNG but has slightly older browser support (it's fine for any site targeting modern browsers, but check your analytics if IE11 or older Safari is relevant).

Should I use WebP or AVIF?

WebP for broad compatibility — it's supported in all modern browsers and Chrome, Firefox, Safari, and Edge have supported it for years. AVIF for maximum compression — it's newer but supported in Chrome 85+, Firefox 93+, and Safari 16+. If you're targeting a modern audience and want the best compression, AVIF is worth using. For maximum compatibility, WebP. You can serve both with an HTML picture element and a srcset fallback.

Will converting to WebP affect image quality?

At quality 80–85 (on a 0–100 scale), WebP is visually indistinguishable from PNG for most images. Quality 75 is often fine for photographs; quality 85–90 is safer for UI screenshots and text-heavy images where compression artifacts are more noticeable. Always compare the original and converted side by side at 100% zoom before committing to a quality setting.

Do I need to change anything in my HTML or CSS when switching formats?

Yes — either update the src/srcset to point at the new files, or use a picture element with both formats for a graceful fallback. If you're using a CMS or build tool, there may be a plugin that handles this automatically (Next.js, Astro, and Gatsby all have built-in image optimisation). If you're serving images from a CDN, some CDNs (Cloudflare, Fastly) can transcode on request without you changing anything.

Is it safe to delete the original PNGs after converting?

Keep them. WebP and AVIF are lossy formats by default — you can't recover the original from the converted file. Treat the PNG (or original JPEG) as the source of truth and the WebP as the delivery format. If you need to re-export at a different quality or size later, you'll want the lossless original.