JIMP is the JavaScript Image Manipulation Program which is actually an NPM package, and one of its many features is the ability to create a Base 64 string from an image file. This has various uses (some nefarious…) and in this post I will demonstrate embedding a Base 64 encoded graphic as an img src in an HTML document. This is useful for small images such as logos or button graphics to reduce the number of HTTP requests, and although I am using HTML the Base 64 string can also be used in CSS.

As you probably know, base 10 (decimal) uses digits 0–9, and base 16 (hexadecimal) uses digits 0–9 plus the letters A-F. Base 64 of course needs 64 different characters and uses the 26 upper case letters, 26 lower case letters, numbers 0–9 and the plus and forward slash characters, as well as the equals sign for padding. (There are also a few other less common standards.) Therefore any code converting a file, stream or buffer to Base 64 will provide a string containing only ASCII characters which can be safely transmitted using any protocol.

For this project I will write a pair of simple functions which open an image file, obtain its Base 64 encoding, and then insert it into an HTML document. You can grab the source code from the Github repository.

#image-processing #web-development #nodejs #programming #javascript