Tutorial6 min read·Updated

Hugo Image Processing: Start from WebP

Hugo is fast until a post bundle contains 15 megapixel JPEGs. Convert those to WebP at 1600 px and `resources.Fit` has less work. Your public/ folder also shrinks.

Page resources inherit the original

Page bundles store originals. Processing methods create derivatives in resources/_gen. A lighter original means faster builds and smaller deploys.

Why it matters

  • Netlify/Cloudflare build minutes are finite.
  • Photo blogs multiply images per section.
  • You can convert locally without installing libwebp in CI.

How to do it

  1. Convert each bundle's images, keep filenames where possible.
  2. Use .Resize / .Fit in templates as you already do.
  3. Prefer WebP in goldmark image renders.

Settings that work

1600 px / 80% for article images. 2000 px for full-bleed.

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

Yes, with image processing. Supplying WebP sources is compatible.

Hugo processing of animation is limited. Convert stills; keep short GIFs only if needed.

Keep reading

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
Tutorial6 min read

WebP in Astro

Astro can transform images at build time. Pre-convert large photos to WebP so builds stay fast and pages stay light.

Read more
Workflow6 min read

Blog images to WebP

How to bulk convert article photos and UI screenshots to WebP with different quality for each type.

Read more