September 1, 2013

Multi image in one image file

Monocular’s Question:

I’m fairly new in CSS web design. I found some website combine multi image in one image file. This is an example from Amazon :

http://g-ecx.images-amazon.com/images/G/01/x-locale/personalization/amznlike/amznlike_sprite_02._V196113939_.gif

And i really want to know how to do it in the best way. Is there any tool for combine image and get pixel position of each image to put them in CSS?

They are called CSS Sprites. You can google a lot of information. This techniques are used by most sites to reduce loading time. What you basically do is load one images in all the elements you want to load the images.

But you load them as their background images, thus enabling you to modifying their position. Thus making it possible to show different version of same images.

I dont want to tell everything so here is a futher read to get you started.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!