how to encode pics paths in css based on base64?

Question

I've recently encountered with sites that their site's assets (logo, resource pics) are like below:

background: url("data:image/gif;base64,R0lGODlhbAAbAMQAADRNU////8PAvwCq3KunpYeCf+fm5RSGp3BpZgDW7tvZ2WRdWaCbmVhQTRSltPPy8re0sszMzHt1cgDs9xTBwJOOjBCNsgC/5TRZWBDOzd7e1vf39xCduYiCgEA3MwAAACH5BAEHAB4ALAAAAABsABsAAAX/oCeKDaEEaGBA0ui+cCzPdG3fM5HuqYHgQBtvNAzCeClZ44REdozQV9EzjVKbMl2zubBGp9UvFtZAKgiQCBLihYJ37SsyxuD9RgheJB58J9tbMWopbC55O3t8gHCKYSKDKAwvDQ87kopejlaakCoNLwsGKASYi398mlo9LUANDBGVKixHcx4VTAoMn3IoRFsBChW7SgSivzELTQbCNqpIBqwiTUtr0oy8Ww9PMc7HMQK  /AndkTL8B29go5UV+5gGXLhDup5PrSBHjI90BEcY7u  /N6WDsVEAU6D3UK0tjHg9SIMjsI7JLQ0EWTfpYG9tLo7sEuSgUD1Ggg71chD84E/7igiMgijwoeGoBb5ovgtQYSOr0TUYGHAgldON5oUMGfHRHrhnlgSchlCngx2ol8YdTAox0epVy7saDkDpW8FMBYl0+T043YYCT8EwvFyZpoXWhRcFAEgrYbW05KEyGaUBpSYRz6wwPqXxdrgcXowC6FWCBm4U5N+6Ino4paUTwYq2nwxnVBb0Q+7MirCqQ7HjtVoJTjZBeW/zhjjWM05dsiku0oZDqA3ytZMVDIQAGDB6P8JOxakDgAWM8BHhDIJ8N24BEd8Aa4wxgrM2ukMEwYPx5D83nodHpLt5X95JBgRSBv8sNBgvv3HVArmIiE9kCutQege0hkNQJTv/zAwV8FDDLIQUzqNUGbC6HMI1kYAwb0QGgjxLbFDwcMIKKIB4xQwHwRKdFbLQS+5t6F97SG3X9PeQDAiCIC8IIEBEBigADfzUCUACjCSM+LAWomQF1kVIAREjABcIAFB+gYAgA7") no-repeat scroll 0 0 transparent;

How is this possible? and how we can do such encoding in our site?

EDIT
Am not really good at this point, if it's possible please help a little more to get the answer, I encoded my picture an got the code which is too long about 2 pages now I've added that in css but gain no success!! (by the way does that help in improving performance?)

Answer 1

As commented above, it's not encryption but encoding; basically it's the same resource you'd normally refer to externally embedded into the css. You can try making one yourself or using one of the numerous tools available online ; wiki article is surprisingly thorough as well.

While it does not offer any content protection (ie anyone can still save the file), when used correctly it does offer some benefits. Main one is less http requests - rather than requesting every individual image resource, they are already all downloaded! Just don't dump all your site's graphics into the css file and stick with the elements that are used on almost every page instead.

IMO, another great benefit is easier resource management. Instead of spriting small icons you are effectively operating on individual graphic files (no background bleeding artifacts etc.) - but you're not being punished for it with significant file size overhead (suggested to be as low as 3% with gzip enabled).

Basically all browsers but IE7 support the method to a degree. There are some further limitations as to content type/size (eg max 32kb for IE8)

Answer 2

The source of image is just encoded using BASE-64. It is faster. If you want to decode this use eg http://www.motobit.com/util/base64-decoder-encoder.asp and choose export to .bin file. Than save, change extension to .gif and voila. :)

As I wrote it is faster, but less convenient in my opinion.