User interface & digital design

John Newall Visual Communicator

Web authoring and base64 encoding images

IT staff alert me to their error log. Errors were being generated due to "excessively long strings of text" being inserted into the content of web-pages. Our content management system (CMS) was not set up to handle them. What was this mystery content? Who would make a page so verbose that our CMS was choking on it?!

On investigation it was discovered the content in question was not the internet's longest page but an image encoded in such a way that it can be embedded directly onto the page. The encoding method is base 64 encoding.

Base 64 encoding converts image data into text. Once in text format the image can be directly included on a web-page and saved as part of that single html file or database record.

On the surface, embedding images into a web page might appeal to many content authors and the occasional unwary developer. It removes aspects of image management which can be a significant barrier to users who's skills are based in writing rather than developing. Embedding images increases page portability, ensures an image is present on the page at the moment loading is complete and removed the need to upload, and link to, separate image files.

As previously mentioned, our CMS struggled with these images. An obvious problem but one that could probably be fixed by altering server and/or database settings, so not necessarily a reason against including base64 encoded images. There are other considerations to weigh up though.

Managing images separately from content provides some great benefits. A single image can be referenced by multiple pages, saving the effort involved in duplication of that resource. Images filed separately can also be served via a different server or location from text, opening opportunities for efficiency gains in filing and content delivery.

The biggest trade-off when embedding images is the loss of image caching. Caching allows images to be saved in a location where a web browser can access them faster if it might need them again. Caching can occur not only in an end-users browser but by servers that pass on that content.

It's hard to overstate the importance and effectiveness of caching. It alone is enough reason to avoid embedding images into text content. The ability to reference a single image on multiple pages and serve images from a separate location well and truly seal the deal for all normal scenarios.

Other articles