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-stripremoves EXIF metadata and embedded color profiles-resizekeeps the image size under control for large screenshots or exports-qualitybalances 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
srcsetandsizesattributes - 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.