Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
Rodrigo Siqueira rsiqueira:   Followers: 25 ; Following: 31

Explore Rodrigo Siqueira's photo albums:
Microscopic (15)
Férias em Natal, RN (18)
Stonehenge (25)
Château d'Ussé (3)
Maceió (136)
Ubatuba (31)

How to create CSS Image Sprite


SPRITES - WHAT IS CSS IMAGE SPRITE?

CSS Sprite is a way to improve load time of a web page by storing many images in a single file.
Using sprite images is a way of improving page load speed and this technique is part of a list of web site performance best practices. Loading a single image avoids creating many http requests between the browser and the web server.

Other alternative to sprite, that also avoids creating http requests for images, is creating inline images with the data uri scheme.


Example of Twitter's sprite single image file with many icons inside:

This is a single image file (PNG) that is loaded at once by the browser with a single request to the web server, so it loads fast and includes more than 150 images!

The following icon is a part extracted from the above image, using CSS to get a part of the whole image:

 

The following CSS command was used to extract and display this single icon above from the original image with all icons. The extracted icon size is 18x18 and starts 62 pixels from the left and 14 pixels from the top:

<div style="
width:18px; height:18px;
background:url(http://rsiqueira.postbit.com/upload/2/sprite-icons-twitter.png);
background-position: -62px -14px;
"></div>


I use the following online service find the pixel position (X,Y) of each icon in the sprite image, preview and create the CSS code: spritebox.net

Samples of other sprite files with icons to use the sprite technique:

 

Google's sprite image file icons
(about 80 icons in a single image):
    Facebook's sprite image file
(more than 60 icons in a single image):


Twitter Bootstrap Icons - Glyphicons - Boostrap sprite file - one single png image:



View all Glyphicons Bootstrap Icon names (as provided by the Bootstrap framework)

Post by Rodrigo Siqueira (2011-09-07 12:21)

Tags: design css

Post your comment:

Name: Email: Site:




| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2017 - postbit.com