Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

CSS offers a lot of flexibility to web developers and can be used and abused in many different ways. The background-image property can be especially useful when dealing with images that should be displayed as overlays (via a DIV). I make use of this over at my jQuery PhotoBoxr plugin, however instead of using images I specify image data directly in my CSS file as a Data URL.

Understanding how this is done is quite straight forward and I'll cover that first.

There are online tools that will convert your image file to a Data URL. I used this one. It produces something that looks like this...
dataurlimg.png


With that in mind, your CSS changes from...
 Old CSS
.my-class {
background-image: url('image.png');
}


...to this (abbreviated for display purposes):
 New CSS
.my-class {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...YII=);
}


Basically you take the 'data:' string and put it into the url() function. The end result is your CSS and images are combined into a single file. This means the browser requests a single file from your server so theoretically would be more optimal, but there are catches.



The main catch is file size. By changing your image into a Data URL, the overall size of the image will increase. For small images this is not an issue, but for larger images it does start to become noticeable. Another catch is that certain browsers have a limit on the size of a Data URL (32kb), though you should never do this if your images are anywhere near that size anyway.

More pros and cons are discussed here.

So after reading all the pros and cons, when should you use CSS with inline Data URL images? The answer is a little fuzzy but the following checklist should serve as a guide:

  • Your source images are quite small (<5kb)
  • It's not feasible to bundle image files with the CSS
  • Same image is not used multiple times i.e. one background-image tag per Data URL
  • Having a single CSS file is cleaner e.g. when distributing your code and your code has a small amount of CSS and image use
  • Caching of CSS and Images together is acceptable


In my case all of the above items were true so I went with the combined CSS+Image file approach. However in my case the overriding reason was the fact that I didn't want users of my plugin to download all the additional image files before starting to use the plugin i.e. it was cleaner that way.

Because my plugin uses just a handful of images and a tiny bit of CSS it make complete sense to merge these together. The same may not apply to other projects. I did see about a 2Kb increase of overall file size, but I think that's well worth the convenience of having just one file.

On the other hand if your CSS reuses the same image multiple times or you have large images, this approach should not be used.

-i

Please leave your comments or feedback below!
comments powered by Disqus
Other posts you may like...
Hi! You can search my blog here ⤵
Or browse the recent top tags...

Recent Blog Posts

Review of Stellar Phoenix Photo Recovery software for Mac

A year later and GitLab still doesn't allow to show private project activity

How to remove caked on stickers from old game carts

How to pass parameters to your PHP script via the command line

jPhotoFrame new layout engine explained with examples

Atari Lynx Multi SD Card cartridge review

Jersey JAX-RS filters and interceptors execution order when throwing Exceptions

Why I'll never renew a domain with GoDaddy again

Fake AirPods - HBQ-i7 TWS wireless headset teardown

How to fix Postman error - Failed to import data: format not recognized

Recent Galleries

BMB-012 Nanoblock T-Rex Skeleton Model assembly

Tiny Arcade revision 6 kit assembly and decal application

Atari Lynx repair - Part 5 - McWill LED screen mod installation

Atari Lynx repair - Part 4 - screen cover replacement

Atari Lynx repair - Part 2 - re-capping the motherboard

Atari Lynx repair - Part 3 - broken speaker replacement

Atari Lynx repair - Part 1 - introduction and case disassembly

Building a custom Atari Lynx game box storage shelf unit in a day

Protecting old Atari Lynx game boxes with snug fit plastic sleeves

Monument Valley 2 is released and does not disappoint

Blogs and Friends

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity