http://www.sitepoint.com/use-svg-image-sprites
// CSS Sprite:
CSS Sprite is the practice of combining multiple images into one larger image.
This is done to reduce the number of HTTP requests, and thus improve performance,
even though the size of the combined image might be a bit larger than the total
size of all the individual images.
.flags-canada, .flags-mexico, .flags-usa {
background-image: url('../images/flags.png');
background-repeat: no-repeat;
}
.flags-canada {
height: 128px;
background-position: -5px -5px;
}
.flags-usa {
height: 135px;
background-position: -5px -143px;
}
.flags-mexico {
height: 147px;
background-position: -5px -288px;
}
Sprity is a wonderful node package that creates sprites from a glob of images.
Sprity has a lot of great features including formatting output as PNG, JPG (or
Data URIs of those), and stylesheet generation in CSS, LESS, Sass, and Stylus.
npm install sprity -g
sprity ./output-directory/ ./input-directory/*.png
For more information on using css-sprite with Grunt or Gulp (or many other
enviornments), head over to https://github.com/aslansky/css-sprite
Popular tools to create CSS Sprites:
SpritePad
SpriteMe
Sprite Cow
https://css-tricks.com/css-sprites/
https://wearekiss.com/spritepad
http://spritegen.website-performance.org/
http://alistapart.com/article/sprites
http://instantsprite.com/
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
http://css.spritegen.com/
CSS Sprite is about combining multiple images into one images (to reduce the number of HTTP requests, and the number of bytes downloaded), and using CSS background-position to position the image.
CSS background-position: The background-position property sets the starting position of a background image within the element.
To have the background image positioned 4px from left top corner of an element:
background-position: 4px 4px
CSS Sprite works by using background-position, height and width. The height and width of the element establish the view port for the images, and by tweaking the value of background-position (which can be negative), we can display any small image ( more correctly, any portion of the large image ).
Background image positioning explained
SpriteMe
http://spritegen.website-performance.org/
Sprite Optimization
Sprites in the web. Part 1
To Sprite Or Not To Sprite
How to Make a CSS Sprite Powered Menu
CSS Sprites from A List A Part
IE6, CSS Sprites and Alpha Transparency
http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization
CSS Sprites w/out Using Background Images
Yahoo's Secret Text-Sprite Generator
21 Must See CSS Sprites Tutorials
Command-line CSS spriting
http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/
http://www.alistapart.com/articles/sprites
http://www.alistapart.com/articles/slidingdoors/
