ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Define Contao image sizes once and render <picture> markup with WebP fallbacks from one high-resolution upload.
Explore how Behance balances professional visual fidelity with global performance using dynamic image transformation, CDN caching, and responsive asset delivery.
Discover how <code><picture></code> lets browsers pick the right image for any viewport, reducing bandwidth and improving performance. See a hands‑on example, trade‑offs, and next steps.
Hugo leaf page bundles keep images beside their Markdown files. Combined with build-time image processing, they let you ship responsive srcset images without an external service.
Replace manual srcset construction in Gatsby with the gatsbyImageData resolver, which generates WebP, AVIF, and resized variants during gatsby build.
Use <picture> with ordered <source> elements and srcset to let browsers pick the right image by viewport and format, with an <img> fallback for accessibility and old browsers.
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.
contao
html5
hugo
gatsby
graphql