Klenodexempel

Assets

Bilder blir genererade browser assets

Assets importeras genom routade Haml-sidor och genereras med varianter för responsiv bildmarkup.

Asset-mönster

CSS url()

CSS kan referera bildfiler med `url("./coffee.jpg")`; CSS-pluginet skriver om URL:en till den genererade asset-sökvägen.

Picture element

`picture` kan kombinera en genererad WebP-källa med JPEG-fallback och återanvända varje imports `srcset`- och `sizes`-metadata.

Kaffekopp på ett bord
CSS image-set()

Ruby kan bygga ett `image-set()`-värde från importerade bildvarianter och skicka det till CSS med en 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

Bildimporter exponerar dimensioner, responsiva varianter och genererade outputsökvägar för Haml- och Ruby-kod.

Kaffekopp på ett bord
Importerad som AVIF- och WebP-varianter.

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

Varianter

  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