A look Into: Using Encoded Image In CSS (background-image)

By . Filed in Web Design

As designers, adding background image via CSS is definetely a no-brainer to you. Traditionally, or typically, here’s how we do it – using background-image property and link directly to the image source file.

div {
	background-image: url(img/image.png);
}

However, each image url that we add in that way will cause the browsers to run more requests. In other words, if we have 10 different urls, the browser require 10 HTTP requests for images.

There are few workarounds for this – we either adopt CSS Image Sprite approach or we can use Encoded Image.

Encoded Image

The encoded image consists of some random characters and it looks like the following.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==

We are able to embed this encoded image in <img> element and also through the background-image property.

Since, it is directly embedded on the document and does not point out to other sources, the browser doesn’t need to load HTTP requests to deliver the output.

How codes look like in HTML

<img width="50" height="50" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==" >

How codes look like in CSS

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==);

How to Convert Images to Code Format

There are many online tools to convert images into code, but one of my prefered of choice is Duri.me. It’s a simple tool. Simply drag and drop your image, then we can copy the output as image, CSS or plain code.

Downsides

However, every technique as its own downsides and using encoded images is no exception. Some of the drawbacks of encoded images are:

  • Maintainability: This is somewhat the hardest part when using encoded image. We need to pass through more technical steps than using just the actual image itself.
  • Browser Support: This encoded image is not supported in Internet Explorer 6 and 7. But, Internet Explorer 9 should be just fine.
  • Internet Explorer 8: Regarding Internet Explorer 8, it limits the code size to 32768 Bytes only.

How to Apply

Here is an example to show you how to apply this. This time, we are going to create noise texture. This screenshot below shows how it looks like.

1. Create Noise with Transparency

First, we need a noise texture in PNG format with transparency. Fortunately, there is a handy tool to create it easil,y called NoisePNG. We are able to set the output dimension, the noise intensity and the image opacity.

In this case, I have set the background color to #333333, then lower the Opacity to 50 and lastly turning the image texture to Monochrome. Download the image.

2. Convert Noise to Code

Now, let’s go to Duri.me. Drag and drop the downloaded PNG image above, and then select "copy code as CSS".

3. Add Code in CSS

Lastly, place the code in the stylesheet, like so:

body {
background-color: #333333;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url(data:png;base64,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)
}

To compare, we have also attached the PNG image with CSS in another document. Then, if we load it in the browser and see the request log, you will see that the one that uses encoded image has less HTTP requests than the document that points out to the image source directly.

Now, you can see the demo and download the source from the below links. Thanks for reading, I hope you find this tip helpful.

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement