Klenodexample

Assets

Images become generated browser assets

Assets are imported through routed Haml pages and emitted with generated variants for responsive image markup.

Asset patterns

CSS url()

CSS can reference image files with `url("./coffee.jpg")`; the CSS plugin rewrites the URL to the generated asset path.

Picture element

`picture` can combine a generated WebP source with a JPEG fallback while reusing each import's `srcset` and `sizes` metadata.

Coffee cup on a table
CSS image-set()

Ruby can build an `image-set()` value from imported image variants and pass it to CSS with a custom property.

coffee.jpg image-set(url(/assets/coffee.360w.129f6df9f16e1bc9.avif) type("image/avif") 1x, url(/assets/coffee.720w.37477182e767036c.avif) type("image/avif") 2x, url(/assets/coffee.360w.e7c5f963fc875fba.webp) type("image/webp") 1x, url(/assets/coffee.720w.2a7bfc8908be0668.webp) type("image/webp") 2x)
Imported image metadata

Image imports expose dimensions, responsive variants, and generated output paths to Haml and Ruby code.

Coffee cup on a table
Imported as AVIF and WebP variants.

coffee.jpg

src
/assets/coffee.7642b1dfd6456572.avif
width
1448
height
1086
sizes
(max-width: 720px) 100vw, 720px
srcset
/assets/coffee.360w.129f6df9f16e1bc9.avif 360w, /assets/coffee.720w.37477182e767036c.avif 720w, /assets/coffee.360w.e7c5f963fc875fba.webp 360w, /assets/coffee.720w.2a7bfc8908be0668.webp 720w

Variants

  1. original1448 x 1086 avif/assets/coffee.7642b1dfd6456572.avif
  2. 360w360 x 270 avif/assets/coffee.360w.129f6df9f16e1bc9.avif
  3. 720w720 x 540 avif/assets/coffee.720w.37477182e767036c.avif
  4. 360w360 x 270 webp/assets/coffee.360w.e7c5f963fc875fba.webp
  5. 720w720 x 540 webp/assets/coffee.720w.2a7bfc8908be0668.webp