Responsive images in Hugo using Render Hooks
2 days ago
- #WebP
- #Responsive Images
- #Hugo
- The article discusses the evolution from using Hugo shortcodes for responsive images (JPEG and WebP) in 2022 to using Render Hooks by 2026, as WebP is now widely supported in browsers.
- A Render Hook is implemented in a file at layouts/_default/_markup/render-image.html, which generates resized WebP and JPEG images, using srcset for WebP and a JPEG fallback, without the need for a <picture> element.
- The Render Hook automatically processes images referenced in Markdown files, supports page bundles (placing images next to Markdown files), and allows quality settings for WebP images via Hugo configuration.