Tutorial6 min read·Updated

Astro Image Optimisation with WebP

Astro's `<Image />` is great. A folder of 8 MB camera files is not. Convert content images to WebP before they enter `src/assets` and you cut build time and HTML weight together.

Build-time transforms scale with source size

Every image Astro processes is decoded, resized and encoded. Smaller WebP sources finish faster in CI and produce smaller outputs even when you request quality 80 again.

Why it matters

  • Content collections with 50 posts × 5 images punish CI.
  • MDX authors drop PNG screenshots at Retina 2×.
  • Static hosts bill for bandwidth.

How to do it

  1. Convert src/assets and public/ photos.
  2. Keep SVG for logos. Use WebP for photos and screenshots.
  3. Let <Image /> still set width/height and srcset.

Settings that work

Blog 1200 px / 82%. Heroes 1920 / 78%. Screenshots 1400 / 90%.

Convert a batch in your browser. Nothing is uploaded.
Open the converter

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

No. Pre-convert, then let Astro generate srcset.

Yes. Reference `.webp` in frontmatter image fields.

Keep reading

Tutorial6 min read

WebP in Hugo

Hugo's resources.Process can resize. Convert page bundle images to WebP first so Hugo builds stay quick.

Read more
Tutorial6 min read

WebP in Eleventy

@11ty/eleventy-img generates WebP/AVIF. Pre-size sources so Eleventy builds on cheap CI stay under the time limit.

Read more
Workflow6 min read

Screenshots to WebP

PNG screenshots shrink dramatically as WebP if you keep quality high enough for text. Recommended settings and max width.

Read more