Tutorial6 min read·Updated

Eleventy Image Plugin: Feed It WebP Sources

The Eleventy Image plugin is the right tool for srcset. It is also the reason builds explode when `./img` is full of camera originals. Convert those to WebP at your max output width first.

eleventy-img reads every byte of the source

The plugin decodes, resizes and writes multiple formats. A 2000 px WebP source at quality 80 is already close to the output you want, so extra formats are cheap.

Why it matters

  • Netlify free-tier build minutes vanish on photo sites.
  • Markdown images are easy to forget.
  • You can convert a folder without writing a custom shortcode.

How to do it

  1. Convert the image directory used by the plugin.
  2. Keep the plugin for widths and AVIF if you want it.
  3. Set formats: ['webp'] if you want one format only.

Settings that work

Max width = your largest widths entry (often 1200–1600).

Convert a batch in your browser. Nothing is uploaded.

Put it into practice

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

Open the converter

Frequently asked questions

You can, if you write srcset by hand. Most people keep the plugin.

Yes.

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 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