Igor's Blog

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

comments powered by Disqus
Other posts you may like...
Programming, DIY, Games, Hacks, and Tech

Recent Blog Posts

Swapping HDD logic boards between different brand disks - is it possible?

A guide for plotting your hard drive for Burstcoin mining on a Mac using mjminer

Replacing a broken hard drive in a Samsung Story Station

Fix Java applications slow start and net connection times on macOS sierra

Pierre Cardin Leather Computer Bag (PC2278)

How to stop SSH remote host disconnecting your session

Using PayPal PHP SDK on Google App Engine

Use the Touch Bar to lock your Mac with a single button press

Multi module builds with Maven 3.5 and the parent-child pom version management

Google App Engine local dev server DataStore becoming corrupted after a bad GQL statement is run

Recent Galleries

Monument Valley 2 is released and does not disappoint

Space Food - Chocolate Ice Cream with Chocolate Chips

Legeod Star Wars AT-DP kit

DIY spare parts computer build with a RAIDMAX Anura case

Fake 'Lepin' brand Lego packaging

Hardwood garden bench with clear resin void filler

Fixing a 3D printer extruder that stopped heating up

Easily increase disk space in a Lenovo Ideapad 100S 14" laptop with an M.2 SSD

Making a multi-piece 3D printed solder spool holder stand

DIY indoor apartment grow light wiring

My Other Web Sites

Igor and Elise's Travels
Riverside Expressway Cam
300 George St Blogumentary

My Online Tools

UUID to OID Converter
Guru JSON-RPC Tester
Extrudifier Object Designer
Travel ┬ÁBlog

Blogs and Friends

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

Blog Activity

Blog Activity
You decide - follow me or not, more great content awaits if you do!
     
Don't show this again