Responsive image helper (<picture> + srcset)

[tayebmokni]

Summary

Ship <picture> / <img srcset sizes> helpers per doc 07 §6. Two implementations needed: a Go server-side helper for theme/block render functions (RenderImage), and a JS mirror for client-rendered blocks. Helpers emit explicit AVIF/WebP/JPEG sources, set width/height from the original aspect (CLS=0), inline the blurhash as a base64 SVG background-image, and add loading="lazy" decoding="async" unless priority is set.

Design reference

• docs/07-media-performance.md §6.1, §6.2

Acceptance criteria

• Go RenderImage(m Media, opts ImageOpts) template.HTML ships in renderer package
• JS image(m: Media, opts: ImageOpts): JSX.Element ships for client blocks
• Emits <picture> with AVIF + WebP + JPEG <source> elements
• srcset widths follow next.config.js deviceSizes and imageSizes defaults
• width / height attrs match original aspect — Lighthouse CLS = 0
• Blurhash inlined as data:image/svg+xml;base64,... background-image
• loading="lazy" default; priority opts into eager loading
• Next.js custom loader (image-loader.js) returns /img/{id}/w_{w},q_{q},fmt_auto

Dependencies

#image-proxy

Complexity

M