Tuesday, January 1, 2013

The getImage macro: embedded images using text strings

A little known HTML trick is that you can embed images in an HTML file using a Base 64 representation of an image. For example, this folder open image:

is generated using the following text in an HTML page:

<img src="data:image/png;base64,R0lGODlhEAAQAKL/AP//////

There are a number of reasons why you, as a developer, might want to use base 64 encoding of images in your web pages, for example:
  • you don't have control over the images directory of your web server and you can't add images.
  • you don't want to have to deal with the actual url path to the image when creating an html file (either static or dynamic).
    • this is a bigger issue for html files not served via a web server (e.g., they are access via the file system and thus easily moved around)
  • minimizing round trips to the server when the page is accessed
There are a number of web sites that you can use to convert an image to its it base 64 encoded value. A simple search will find any number of tools you can use to do this. For example:


As a best practice you should limit the use of base 64 encoded images to small images where the base 64 text is not too long. Note that lines feeds are allowed in the HTML text).

The getImage macro is a utility macro designed to be used to generate such images in SAS Server Pages. See my SAS Press e-book, SAS® Server Pages: Generating Dynamic Content, for more information about SAS Server Pages. Just use the macro in a SAS Server Page as follows to insert an image:
  • <img src="%getImage(image=OpenFolder)">
You can download a zip file containing the macro, along with:
  • SAS transport file of a data set containing a number of sample images
  • a sample program illustrating the use of the macro
My next blog entry will use this macro in a sample dual listbox SAS Server Page.