Best practices for CSS sprite image [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I was looking around to find some best practice and hints when building css image sprite.
The questions:
Consider a site with lots of images:
Should I group and put images with approximately same size in one png?
What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!
Is there any recommendation for number of images in one sprite image ?!
Is it make any difference on how to put and align images in the sprite image? I just find a hint at http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340 which mentioned (keep images Organized, it will be more maintainable) but is it the only reason
If it helps:
I use compass sprites utility, and it automatically convert a folder of images to one png file and creates a css file for it. The images aligned under each other automatically

Answer 1

Should I group and put images with approximately same size in one png?
While Michael has a good point on grouping images by usage, you may also want to keep in mind that the optimal sprites have as little whitespace as possible. Saving file requests is awesome, but you do not want to load a bunch of unused pixels instead.
What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!
Imagine a website with a huuuuge collection of icons, buttons and other graphical elements. Now image you put all those elements in one sprite, because, you know, low amount of requests and all. The sprite is 5MB big.
A visitor enters the page, and loading begins. Text appears, but you are still waiting for Megasprite to download. Depending on the filesize and the internet connection, a visitor has to wait a potentially long time before crucial (navigational) elements of the site are usable.
For a simple site a single sprite will do, but when things get more elaborate, it might be beneficial to use a couple of sprites. Furthermore, putting all your images in one sprite is a pain in the gluteus maximus when it comes to maintenance (although automation helps a lot). All in all, huge sprites are bad sprites.
Is it make any difference on how to put and align images in the sprite image?
Not really. There are a few thing you should keep in mind though. First of all, you want the sprite to be as compact as possible; the less unused space the better. However, that may force you to do ridiculous meticulous positioning in CSS. If you're willing to set background-position for each element by hand that's no problem, but nobody will blame you for cheating a little bit and using positions that are easier to work with.
One more thing
Have you considered using SVG sprites? Small in file size, perfectly smooth and crisp at every resolution. CSS Tricks has excellent articles on it here and here

Answer 2

To question 1:
From my experience in working on a large mobile service provider website, it is certainly a good idea to group images together, but probably better grouped logically, by what component or section of the project they belong to, rather than size. So I would group sprites that make a border (sides, rounded corners, etc.) or background images together.
It will make bits of them easier to find and to maintain during development.
On the other hand, if you're making a game and you have all your images created already (e.g. 64 images of animated character) You might as well stick them all in the one file.
Hope this helps.
Michael

Answer 3

What are CSS Sprites?
CSS Sprites is a method of combining multiple images used throughout your website into one big image. You can then use the proper background-position CSS attribute to load the particular image you want from your CSS Sprite using the X and Y coordinates.
CSS Sprites and Website Performance
A lot of people are under the assumption that it would be faster to reduce image file sizes and load every image individually. This is not true, in fact, it’s quite the opposite. The reason for this is because every time you make an HTTP request (whether it’s in your HTML code or your CSS code) you essentially create one more connection that has to occur in order to fully load a given page. So, for instance, if you have a page with 16 background images (as referenced in your website’s CSS file) that means that in order for that page to load it has to make 16 individual HTTP requests for each of those images. That’s not to mention any additional HTTP requests that will have to be made for stylesheets, JavaScripts, etc..
By combining all 16 of those background images into one big CSS Sprite the website only has to make one HTTP connection instead of 16 individual connections. This also means that anytime an image needs to be loaded on the fly (i.e. a rollover image) that image will already be loaded without any delay thanks to the fact that it’s already been loaded as part of your single CSS Sprite file.
So, not only are you drastically increasing performance by reducing the amount of connections but you can also take advantage of your CSS Sprites by using CSS image preloading.
How to Make a CSS Sprite
When it comes to creating CSS Sprites you’ve got two options. If you’re proficient enough with a photo editing program such as Adobe Fireworks or Adobe Photoshop then you’ll have no problem creating a CSS Sprite. For people who aren’t as savvy with those sorts of programs we recommend using SpriteMe. SpriteMe is a bookmarklet. After you’ve added it to your bookmarks bar, you simply go to any website and click the SpriteMe bookmarklet. SpriteMe will then open up an overlay over the right side of your screen with everything you need. You’ll also find that there is a demo on the SpriteMe site which will greatly assist anyone who isn’t as knowledgable.
Here’s an example of what a CSS Sprite would look like (this was created in Adobe Fireworks):
CSS Sprite Example
The above is an example of what a CSS Sprite might look like. Keep in mind there are a lot of different ways to do this. Some people like to leave 1 pixel of space in between each image just to provide some space. Other people like to leave a substantial amount of space between images. You’ll also find some people who like to stack things next to each other in rows to maximize the use of space. The bottom line is that there really isn’t a wrong way of doing this. So, with that being said consider the above example just that, an example.
Implementing the CSS Code
Now that you’ve finished making your CSS Sprite it’s time to get down to the nitty gritty and put CSS code in place so that we can actually make use of our CSS Sprite. For our example we’ll use the CSS Sprite above and show you how we made it work with the ‘Submit Comment’ button on our Comment Form at the bottom of this post.
#commentform input[type=submit] {
width: 122px;
height: 26px;
border: 0px;
background-color: #FFFFFF;
background-color: #FFFFFF;
background: url(/images/btn-sprite.png) no-repeat 0px 201px;
}
#commentform input[type=submit]:hover {
cursor: pointer;
background-position: 0px 175px;
}
Basically the trick here in using the CSS Sprites in your code is that you’re referencing the X and Y axis from the CSS Sprite. In this case the CSS code uses the background attribute, references the image URL, and finally addresses the X and Y axis which happen to be 0px for both.
The hover version of the button doesn’t have to reference the background image URL since it’s already been referenced above. Instead you simply need to change the Y axis to 175px to reflect the fact that the hover state of the button is above the non-hover state of the button.
I realize this might initially come off as confusing but I promise you once you play around with it you’ll see it’s actually very simple. If all of the CSS Sprite images are aligned to the left then your Y axis always remains at 0 pixels. This is one reason we prefer to stack our images all aligned to the left since it takes a lot of the guess work out of it. Given that your Y axis would always be the same in this case the only thing that would change is your X-axis. So, if the non hover button is at 0 pixels on the Y-axis and 201 pixels on the X-axis then the hover button above it would be at 0 pixels on the Y-axis and 175 pixels on the X-axis.