Hi, I tried to make the title a little different another than my normal titles like css question, but anyways I came across a website a while back and I noticed the site put all their images on 1 single image file, each image was spaced apart and then they used css to display based on the position of course. I’m just curious to know if thats even practical? What would you prefer to do, having multiple image files or just 1 big 1? Are there any advantages or disadvantages? Just curious to know other thoughts, thanks.
I’m just curious to know if thats even practical?
Hi,
Yes it is, when multiple images are merged together like that they are known as “Sprites”.
The advantages are less http requests and preloaded states for images that change on hover such as rollover navs. When your image is preloaded you won’t get the flicker or delay when hovering on an anchor.
What would you prefer to do, having multiple image files or just 1 big 1?
It really depends on the purpose of the images.
If they are background images used for presentation then yes those would be candidates for a sprite. Although you don’t have to go to the extreme of merging every single BG image of the entire site on to one sprite image. In fact, there are some cases where the image must be a single image as with repeating BG images.
You can group them together in a related manner and come up with more than one sprite. That will reduce the complexity of your css while reducing http requests at the same time.
If they are content images that belong in the html then I would not suggest making sprites of those. It would defeat their purpose and add unnecessary elements and css to make them work, not to mention the mess you would have if css was off.
Here is a simple sprite used on a navbar.
It has three states that change according to the current page, hover, and default.
With my knowledge, the advantage is that there is only that one http header request.
So, if this image is complex or slightly big, having different images for each state would me multiple requests, more images downloaded, and a longer load time for your page. Or if anything, longer latency preventing other things to load.
It is possible and I do it and find it useful.
It is essentially done with Rayzur’s code in the post above. Have a background image for a main container element and then assign the different positions to the inner elements.
There are some other ways to do it in CSS3 and CSS4 and if you are interested then I can tell you. But I doubt that they are supported yet as this styling is relatively new. Especially level 4.
Hope that helped!
-Team1504