CSS Sprite creator Visually create a CSS sprite list from an uploaded image
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.