Menu
We all know that CSS sprite images are great to reduce the amount of requests and such, but what about the performance of the browser rendering the page with several elements using a big image as a background?
344
CSS Sprites are a collection of images that are combined into a single file that an HTML document can access. These images are then called into use within the HTML code to be displayed on the website.
In recent years, however, they've made a comeback. Sprite is a computer graphics term for a two-dimensional bitmap that is integrated into a larger scene.
The use of image sprites is done for two main reasons: For faster page loading since use only single image. It reduce the bandwidth used to load multiple images. This way less data is consume.
on slower machines equipped with older browsers (like IE6/IE7) you can notice significant performance drop when you're using very big images many times on one page. It's even more severe, when you're using sprites for :hover states.
You have to moderate your temptation towards pushing all your sprites to one huge image - think about which elements are part of the website/webapp UI and put them into one sprite file (those will be displayed all the time, while browsing). Then try to group rest of the sprites into website section-specific images, and use them as needed. Downside is slightly extended load time (additional HTTP requests), but user experience while viewing/scrolling page will be much higher.
147
You need to balance things. If you are talking about an image which will include say 1000 sprites then the CSS will be huge. In addition there is a very thin chance that you'll be using all those sprites in the same page anyway.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
