What’s a sprite?
When a website is developed common scenario is to put all of your images used in the UI in a .css file. Yes some did not use it, which I think is too much old school, but however maybe 99.9% did make it that way. In fact in nowadays sites we’ve more and more rounded corners, more alpha in our images. But what’s a sprite at all.
Well imagine you’ve 20 of these images requested in you .css file, if we suggest we’ve only one stylesheet file. Than when your page is rendered into a browser there must be 20 requests to the server for those images. And so many requests may really slow down your page load. Using only one image with correct
background-image background-position
properties in you css make your site load really fast.
What’s website optimization?
Most of the beginners think that a website is always fast. That’s true until you start making really big sites. Like Youtube, Vimeo, Yahoo, etc. Take a look at their css files and the background images in them. Yes, they are using sprites – those big images containing all of the background needed for the page. And than the page load may become much faster.
How a sprite can change my load time?
In my case the site loaded for 4 to 5 seconds on a normal speed connection. Than only by making a sprite from our 10 images in the background, it became between 3 and 4 sec. That’s 20%, and 1 second is not so bad in todays’ web space.
How to make it?
You must make your background images as one sprite. At all that may become good practice for the future where for sure there will be only that way. OK, but how I can make it. Well you can generate it online simply by using something like http://spritegen.website-performance.org/ or you can make it alone with some image manipulation programe as GIMP or Adobe Photoshop, it’s up to you.
Related posts:
ok
veri good performes
your all of thanks
Properly optimizing your pages to make them “search engine friendly” can greatly increase your search engine rankings, traffic levels, and potential earnings from your website.
Web Optimizer ( http://code.google.com/p/web-optimizator/ ) also includes free CSS Sprites library (with own API). It handles all background images in fully automatic way — just parses initial CSS, makes magic, — and outputs CSS code with 1-3 combined images.
fast
opera mini
really good
its nice………..
khub bal haisel
reay good
very fast speed
very good
very~~~
Nice post! I’ve to try this for my own.
OK, but the overall size is the same, I don’t get where the benefit come from?
Hi balbir,
the thing is that you spent so many requests to the server, that always lead to performance gains.
hey people I like to know alote of people
it’s nice
simple nature is only the thing with whom v feel cool
vry nice
i like this program most
i like this but i say more speed change page