CSS Sprite creator Visually create a CSS sprite list from an uploaded image
Description
CSS sprite is a technique used by Web designers to lower a web site's size and HTTP requests thus reducing its load time. It consists of aggregating various small images into one big image and using a CSS trick to select and display only the required area of that image when needed.
Reducing a website's load time
A request is made to the server each time an image is displayed on a web page.
This request has a cost regarding page loading speed as the web-browser needs to ask for the image, which will be downloaded from a web-server and displayed on the web page.
Aggregating multiple images into a bigger one will result in fewer HTTP requests as only one image will be requested and download from the server.
The web-browser will cache this image and display it (or a sub-part of it) as many times as required without downloading it again.
JPEG, GIF and PNG image files have a specific header with image information such as its size, color depth or metadata.
This header, while small compared to the full image size, is still something which can be gained by aggregating various images into one.
Only a single header data will be downloaded by the web-browser.
Display a CSS sprite in a web page
A CSS sprite will be displayed as a background image. mIt can't be displayed using the img HTML tag. This means that the sprite won't be selectable and special care must be taken for repeating CSS sprites. To display a CSS sprite, the background-position CSS attribute must be used to select the part of the image to display. The containers' width and height must be defined to avoid incorrectly displaying multiple sprites in one image. The CSS sprite creator above will help you with this task.
References and links of interest
A list apart: CSS Sprites: Image Slicing's Kiss of Death
Everything old is new again, and though the rise of 3D games has made sprite maps obsolete, the concurrent rise of mobile devices with 2D gaming capabilities have brought them back into vogue. And now, with a bit of math and a lot of CSS, we’re going to take the basic concept and apply it to the world of web design.
Wikipedia: Sprite (computer graphics)
In computer graphics, a sprite is a two-dimensional image or animation that is integrated into a larger scene. Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene. That is, figures generated by either custom hardware or by software alone were all referred to as sprites.
Sprite Creator 2.0
Welcome to Sprite Creator. This program allows you to upload an image and select areas of the image to create the css for that sprite. The new feature in version 2 creates a list of all css sprites you select.
ShoutMeLoud: 9 Great Free Online CSS Sprite Generator
Few days back we let you know about Google started ranking website based on speed and its high time for all the bloggers and website developers that we should optimize our site for speed as much as possible. One of the simplest way to optimize your WordPress blog is by using super cache plugin, Smush.it plugin and using CSS sprites.