How to convert PNGs to WebP on macOS

· 2 min read
astro images performance webp imagemagick til

I’ve been cleaning up the images on my blog, and one thing that stood out was how bad transparent PNGs looked when converted to JPGs. The background fills in with white by default, and unless you explicitly manage that, you end up with something that clashes with the site. JPG doesn’t support transparency at all. That got me thinking about alternatives.

Why WebP and ImageMagick

WebP supports alpha transparency, good compression, and smaller file sizes. It’s a good default for the web unless you have a reason to prefer AVIF or want full-fidelity PNGs. Since I already had ImageMagick installed, converting was simple:

magick input.png -strip -resize 1600x -quality 85 output.webp
  • -strip removes EXIF metadata and embedded color profiles
  • -resize keeps the image size under control for large screenshots or exports
  • -quality balances fidelity and compression (75-85 is a good range)

In one test, I reduced a 1.8MB PNG to a 150KB WebP with no visible loss of quality, and got rid of the metadata baggage along the way.

Bonus: Using Astro’s image component

The real upgrade came from using Astro’s Image component, which does a lot automatically if you import your image as a module:

---
import { Image } from "astro:assets";
import githubImg from "../assets/github-actions-repository-secrets.png";
---

<Image src={githubImg} alt="GitHub Actions repository secrets" />

When Astro builds the site, it:

  • Converts the image to WebP (and optionally AVIF)
  • Generates multiple sizes (e.g. 640w, 750w, 1080w, etc.)
  • Adds the correct srcset and sizes attributes
  • Lazy loads with optimized decoding and fetch priority

Note: I stopped reducing the quality because as Astro already handles that and I’d rather have the highest quality image as input to its image component

Here’s the kind of output it generates:

<img
  alt="GitHub Actions repository secrets"
  loading="lazy"
  decoding="async"
  fetchpriority="auto"
  sizes="(min-width: 1372px) 1372px, 100vw"
  data-astro-image="constrained"
  width="1372"
  height="630"
  src="/_astro/github-actions-repository-secrets.HTCCxf6o_VvTf3.webp"
  srcset="
    /_astro/github-actions-repository-secrets.HTCCxf6o_Z1lShk5.webp  640w,
    /_astro/github-actions-repository-secrets.HTCCxf6o_Zrk7JR.webp   750w,
    /_astro/github-actions-repository-secrets.HTCCxf6o_Z1pHbYs.webp  828w,
    /_astro/github-actions-repository-secrets.HTCCxf6o_1WxhsQ.webp  1080w,
    /_astro/github-actions-repository-secrets.HTCCxf6o_Z1nJirn.webp 1280w,
    /_astro/github-actions-repository-secrets.HTCCxf6o_VvTf3.webp   1372w
  "
/>

No extra setup. Just give it a good source image and Astro takes care of the rest.

← Back to all posts