April 14, 2026
WebP wars heat up
Responsive images in Hugo using Render Hooks
Hugo’s image glow‑up: simpler pics, faster pages, and comment chaos
TLDR: Hugo’s new image setup uses a single tag to auto-serve fast WebP with a JPEG backup, making posts simpler and pages quicker. Comments are split between simplicity lovers and future‑proofers demanding AVIF and the old multi-format approach, with bonus folder fights over page bundles versus a central images directory.
Hugo fans just got a tidy new trick for faster pages: a render hook that swaps the old, fussy setup for a single img tag with smart sizes, WebP images by default, and a safety‑net JPEG. Translation for non‑nerds: cleaner posts, quicker loads. The author says WebP (a modern, smaller image format) is now everywhere, so the bulky picture tag can go, and images can live neatly next to your post using “page bundles.” Docs: Render Hooks, Page Bundles.
Cue the comments section fireworks. Team Simple is cheering: less code, automatic lazy‑loading, and cleaner folders—“one tag to rule them all.” Team Future‑Proof fires back: where’s AVIF (an even smaller image format)? They want both WebP and AVIF, plus the old picture tag for maximum control. Meanwhile, Legacy Lifers insist the JPEG fallback should stay because “clients still use mystery browsers,” sparking memes of “Grandpa JPEG” wearing slippers. Folder drama erupts too: page bundles stans call it “KonMari for content,” while asset‑folder loyalists swear centralized images are easier to reuse.
Performance hawks nitpick the preset widths and quality 85: some want 2560px for giant screens, others say “smaller is greener.” Accessibility folks applaud the alt text and locked width/height to stop page jumpiness. Verdict? A clean, fast default—plus a classic internet brawl over how much “simple” is too simple.
Key Points
- •The article replaces a 2022 shortcode-based method with a Hugo Render Hook to generate responsive images.
- •The render-image.html hook builds a WebP srcset for widths 480–1920 and sets a JPEG fallback (up to 1024px).
- •The emitted <img> includes sizes, alt, intrinsic dimensions, and uses fetchpriority for the first image; others load lazily and decode asynchronously.
- •Authors can place images next to content using Hugo page bundles and reference them via standard Markdown.
- •WebP and global image quality are configurable in Hugo’s imaging settings (e.g., quality = 85).