Images

Add responsive images to Niral with lazy loading, explicit dimensions and priority loading. Generate WebP variants with optional build-time transcoding.

niral add image              # a best-practice <Img> component (yours to edit)
niral add image --transcode  # + official cwebp — builds emit .webp variants

<Img> ships lazy loading, async decode, explicit dimensions (zero layout shift) and priority for hero images.

With transcoding, niral build turns every raster image into responsive WebP:

hero.jpg (1800px)  →  hero.webp
                      hero-480.webp   480w
                      hero-960.webp   960w
                      hero-1600.webp  1600w    (never upscaled)

<Img src="/hero.webp" width={1800} height={1200}
     srcset="/hero-480.webp 480w, /hero-960.webp 960w, /hero-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 600px" priority={true} />

Results are content-hash cached — rebuilds are free.