norska are first class citizen. I spent a lot of effort into making
sure image loading is performant and seems fast.
The recommended way to add an image to a page is to use the
+img() Pug mixin.
Note that adding images in Markdown files automatically uses this mixin
internally. This will always attempt to load the image, but also provide
a LQIP (Low Quality Image Placeholder) while the image is loading.
The specific strategy used is different based if the image is local (in the
build), or remote (with a
http(s) url), as well if running in production or in
The following table gives an overview of the choices made:
|Local image||Remote image|
|Dev (placeholder)||base64 LQIP||proxy LQIP|
|Prod (placeholder)||base64 LQIP||proxy LQIP|
imgtag while the real image is loading
norska uses images.weserv.nl as its
image proxy. This is a free service, based on top of Cloudflare, that allows
dynamic manipulation of images it serves, on the fly.
Thanks to this CDN, images can be resized, compressed, blurred and turned into grayscale directly from the Pug markup.
If you have a Cloudinary bucket, you can alternatively use it instead of Weserv
by setting your
cloudinary key in
norska.config.js to your Cloudinary
bucket name. You can overwrite it on a per-image basis by passing a
key to your
+img options if needed. Also note that passing an array of bucket
names will shard your requests accross those buckets.
options parameter of the
+img(target, options) mixin accepts the
height, to resize the image. If only one is passed, the image will be resized by keeping the same ratio.
qualitycould be any number between
blurcould be set to any value between 1 and 2000 to control the blurriness
grayscalecan be set to
trueto pass the image in black and white
And additional key of
placeholder accepts the same options but only affects
the placeholder used during the lazyloading of the images. If left empty, its
values will be derived from the main image.
If using Cloudinary, the following keys can be used as well:
pixelifyto render a pixellated image. The size of the pixels can be any number between
1(large pixels) to