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

, , ,
About — I'm an enthusiastic software engineer and consultant interested in many fields including J2EE, programming, electronics, 3D printing, video games, wood working and gardening.
See my Resume for more information.
The views expressed in this blog are my own and not those of my employer.
comments powered by Disqus
My other posts you may like...
Programming, DIY, Games, Hacks, Tech and more.
Follow me on...
Current and Past Projects
See my Resume

Subscribe


RSS Feed

My Other Web Sites

Igor and Elise's Travels
Riverside Expressway Cam
StrFunc() Online
300 George St Blogumentary
Guru JSON-RPC Tester
Extrudifier Object Designer

Recent Blog Posts

New Nintendo 3DS XL, R4i SDHC RTS Lite and DSDoom

Older versions of JD-GUI crashing on macOS Sierra

How does Seeed Fusion stack up as a low budget PCB fab

Where to find the last item (Robbie's lost lyrics) in GravityFalls Lake level

Detecting print requests to print contents of a DIV with JavaScript

Using Google DFP with AdSense on responsive pages

How to change the email subject line in Gmail

Force PHP GD library to load JPEG images that have invalid data

How to uninstall Samsung Smart Switch from your Mac

Facebook adds weather forecasts but forgets to adjust them to your time zone

Recent Galleries

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

Good Friday Electronics fun Easter Bunny LED PCB Kit IBEABU-01.0

Top Categories

Blogs I follow

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth

Friends

RAWS Parts Online
Alpha Dimensions Hosting
Kristensen Photography
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity
Follow me on... 
     
...or subscribe for updates!

Don't show this again