CSS SPRITE

I have been working on this technique and found it quite interesting and loved working on it. Lets discuss more about this technique.

What it is??

Technique wherein small images are consolidated at one place and then that consolidated image is used to apply those small images around your application.

Whole magic is done by background position property. By using background position property the exact position of the required image can be identified.

Why to use??

The technique helps you to reduce HTTP request and thus performance gaining of your application.

When you look for optimization of web application you look around to reduce the number of HTTP requests.

So here if you have 10 different small images in your application then 10 different HTTP requests would be sent to fetch those images from server. Wherein when we use CSS SPRITE, all 10 images are consolidated in one image and then only one HTTP request is sent to fetch the images.

Where it has been used??

CSS sprite is now majorly used. Put your firebug (in Firefox) on and see the CSS of yahoo.com, aol.com, digg.com all are using CSS sprite to display small images.

When to use??

Typically the technique should be used to access small images.

How to make it?

Sprite images can be build in photshop or to make your life easier there are number of CSS SPRITE generators available on web wherein they ask you to upload your images and build sprite image for you with respective background position of particular image. I use www.csssprites.com

Useful Resources:

http://css-tricks.com/css-sprites/

http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

http://websitetips.com/articles/css/sprites/#why-sprites

http://csssprites.org/

DATA URI

To fetch each file (images on your website, any plain text file) browser has to make separate http request with server. So the thumb rule to optimize any web application is to reduce the number of http requests.So lesser the number of requests made fast your application will load.

We use different techniques such as CSS Sprites to reduce these http requests.

Data URL is one of such techniques. And is supported in all major browsers including Internet Explorer 8.

There are many URL schemes available eg http, ftp,mailto: etc. each scheme has its own meaning. Similarly the data: URL scheme is a way to embed “immediate data” as if it was included externally.

Syntax:

data:[<mediatype>][;base64],<data>

The mediatype is a MIME type string, such as "image/jpeg" for a JPEG image file.

If omitted, defaults to text/plain;charset=US-ASCII

If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.

Examples:

data:,Hello%2C%20World!

Simple text/plain data

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

base64-encoded version of the above

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

Embedding an image in the HTML using data url:

E.g.

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/

/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp

V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 

width="16" height="14" alt="embedded folder icon">

Useful resourcesl:

http://tools.ietf.org/html/rfc2397

http://nametrends.net/about/sparklines.htm

http://eligrey.com/blog/projects/data-uri-tool

http://www.websiteoptimization.com/speed/tweak/inline-images/

http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/

https://developer.mozilla.org/en/The_data_URL_scheme