Hello, please sign in or register
You are here: Home

Base64 Images

One feature i've just looked into is base64 encoded data to make icon images. Images can therefore be created by writing a line of code into a CSS documents and thus reduce the number of objects a webpage loads from a server.

<style>
    #test{background:url('data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==') no-repeat #fee; }
</style>

<div id='test'></div>

Produces

 

(If not viewing from a compatible browser, this is what your missing )

Base64 is not an optimal method for especially large images - the information is 37% larger for binary data.

And once again anything < IE8 wont support  the data: protocol

Alternatives

Another method of reducing the number of CSS icons/sprites is to stick them all together in a single image, then use CSS to displays the part of this merged image as the sprite required (however we can't use this method for wallpapering)

Best example is here http://alistapart.com/d/sprites/ala-buttons1.html (read more on sprites)

References

http://en.wikipedia.org/wiki/Data:_URL

Comments

Nike Outlet
High Point-born Gunne likes Nike Outlet autographed memorabilia and games. Also, she loves travelling and checking out different locations like Canada.
Created 09/05/12
tory burch flats
Reading-born Jame is hooked on http://tory-burch--flats.com/ tory burch outlet .http://www.nikefreerun-30.com/ nike free 3.0 electronics, playing team sports. And finally, pretty much all her inspiration is obtained from watching a Carolina hurricane...
Created 24/05/12
air max shoes
thanks for the great post. it reminds me that i have to bring more structure into my blogging. your blog is very interesting
Created 09/08/12
Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share