Image information and manipulations

[ArmorDarks]

From time to time we need to use in Sass or Nunjucks image dimensions. Besides, we could do some more interesting manipulations on already loaded into memory image.

So, what we'd like to have?

• A way to read image dimensions in Nunjucks and Sass
• A way to encode readed image as base64
• A way to include image within Nunjucks (useful for svg files)

While this isn't hard task and there are few useful tools for it:

• https://github.com/image-size/image-size
• https://github.com/nodeca/probe-image-size
• And some others I didn't look for yet...

There is a problem, though, related to performance. Same image might appear on all pages, or many times in row. It would significantly slow down build if it will be probed each time.

So far I see the only solution: we will grab images into index and cache received results, to ensure that any related to it function was invoked only once. I still hesitate should it be built-in cache, or an additional Grunt task which will read all files and make index with cache.