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//////
AMDAwMDAwICAgICA\AAAAAAAAACH5BAEAAAIALAAAAAAQAB
AAAANFKEpMpjAKAkYYTkJqu2sbII6kSCzApXbqM1VrPLiUWpYGFwB
F7/+51ID3KwaHReNrlwS+iM0CTRTtTavSjWHL7W41YE0CADs=">

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:

https://www.google.com/search?q=base64+encoded+image

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.

2 comments:

  1. Tricia,

    Yes, you can add any of the standard image attributes. That is part of the reason why the getImage macro only returns the text for the src attribute - so that it is easy for a user to add other attributes.

    In my dual list box example (probably will be posted the end of this week or early next week), I will be using this technique with the border attribute.

    ReplyDelete