Images
To load an image, you use the image()-method which
validates that the resource is an image.
:ruby
Image = image("./río_amazonas.jpeg")
%img{src: Image.src}A more complete example:
:ruby
Image = image("./río_amazonas.jpeg")
%img{
src: Image.src,
sizes: Image.sizes,
srcset: Image.srcset,
width: Image.original.width,
height: Image.original.height,
}(alt="Amazon river")
:css
img {
width: 100%;
height: auto;
}Images also come with a blur attribute which contains a small
base64-encoded PNG that you can blur for fancy loading effects.
Source code for the Image component on this site
SVGs
Scalable Vector Graphics are fantastic, and they are really easy to use.
You can load them using svg().