After-render hook that rewrites <img> tags to <picture> elements.
When enabled, every locally-sourced JPEG or PNG <img> tag produced by
Markdown rendering is wrapped in a <picture> block with <source> entries
for WebP and AVIF variants:
<!-- before -->
<img src="/images/hero.jpg" alt="Hero">
<!-- after -->
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="Hero">
</picture>Opt-in
Register the hook in your site's config/config.exs:
config :sayfa, :hooks, [Sayfa.Hooks.ResponsiveImages]Requirements
The .webp and .avif files must exist on disk for browsers to use them.
Run bash scripts/optimize_images.sh (generated by mix sayfa.gen.images)
before building to produce the variants.
External URLs (starting with http:// or https://) and images already
inside a <picture> element are left unchanged.