Images
To load an image, you just use import().
:ruby
Image = import("./río_amazonas.jpeg")
%img{src: Image.src, width: Image.width, height: Image.height}
A more complete example:
:ruby
Image = import("./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 placeholder attribute containing a small data
URL that you can use for blurred loading effects.
Source code for the Image component on this site
SVGs
Scalable Vector Graphics are fantastic, and they are really easy to use.