url(data:image/jpg;base64…)

Jens — Wed, 03 Dec 2008 21:30:30 +0000

This cool stuff. Check out the CSS code below. Here they have added an image to the CSS file by encoding (base64) it directly into the CSS. This code was CTRL + C from the Helvetireader project. Believe that this works in most browsers except the infamous IE. There is some work done to fix this, check Dean Edwards site below. The good thing is that the images are in the same file as the CSS, no more broken images. The CSS can be gzipped so it should not be any bigger than separate files. The bad is that whenever you noeed to change the image you need to convert the new image. I’m not sure if there is any image programs like Photoshop that can save base64 file right away. Let me know if have any more information to this.

body {background: URL(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/
2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExM
cGxsbHCAgICAgICAgICD/2wBDAQcHBw0MDRgQEBgaFREVGiAgICAgICAgICAgICAgICA
gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICD/wAARCAFKABsDAREAAhEBAx
EB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAECBAMI/8QAFxABAQEBAAAAAAAAAAAAAAAA
ABESE//EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/
9oADAMBAAIRAxEAPwD6pAAAAAAABAAAASgUCgUEAAABAAAASgUCgUAAAAGQAAAKBQ
KBQQAAAEAAABAAAASgUCgUEAAABAAAASgUCgUEAAABAAAAQAAAEoFAoFBAAAAQAAA
EoFAoFAAAABkAAACgUCgUEAAABAAAAQAAAEoFAoFBAAAAQAAAEoFAoFBAAAAQAAAEAA
AB47A2BsDYOboB0A6AdAc3QDoB0A6A5tgbA2BsGQAAAf/Z) left bottom
repeat-x !important;}

Here is example of my own picture that has been translated into base64, should work in most browsers except IE.

http://www.greywyvern.com/code/php/binary2base64
http://dean.edwards.name/weblog/2005/06/base64-IE/
http://helvetireader.com/

xhtml | css | Design » alphabet

url(data:image/jpg;base64…)