ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Gatsby's image pipeline can generate responsive WebP/AVIF variants and blur-up placeholders automatically, but uncontrolled processing causes layout shift and slow builds. Scope sources, set explicit sizes, and verify srcset output.
A step‑by‑step diagnostic guide for Hugo sites where images lack srcset and sizes, causing cumulative layout shift. Covers template pipeline checks, Hugo Extended requirement, config fixes, and verification with Lighthouse.
Learn how the HTML5 <picture> element lets you serve different images based on viewport size or pixel density, improving performance and visual focus while providing a reliable fallback.
The <picture> element lets browsers pick the best image file for each device, cutting bandwidth and speeding up load times. Learn how to implement it, test it, and weigh its trade‑offs in this practical guide.
Learn how to implement gatsby-plugin-image to automate responsive image generation, reduce page weight, and improve Core Web Vitals using GraphQL and Sharp.
Hugo Page Bundles plus built-in Resize/Fit image processing give you responsive srcset images with no external pipeline. Here's the render-hook setup, the caching trick, and the trade-offs.
gatsby
hugo
html5
graphql