Menu
is css-sprite good technique? I read about its pros at http://spriteme.org/ and have also I seen a lot of questions about css sprites here in stackoverflow.
What are its cons?
Will it work in all browsers as claimed in their site?
699
The main advantage of using image sprite is to reduce the number of http requests that makes our site's load time faster. The images also load faster making switching from one image to another on some event much smoother.
Sprite sheets increase the performance of your game and reduce the loading and startup time. The game uses a few big image instead of hundreds of small images. This also allows sprite batching — the rendering system draws the sprites with a few draw calls instead of sending isolated commands for each sprite.
Sprite is a big image which is made up of combining small images into one larger image. It is defined by X and Y coordinates. CSS background-position property is used to define the exact position that is to be displayed.
Yes, it is a good technique.
You can reduce the number of HTTP requests and it is a page optimization technique.
The first rule in
Best Practices for Speeding Websites by Yahoo
is
Minimize HTTP Requests
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.
When you need to change the dimensions of the images inside the sprite then you have to recalculate the offsets for the images. But I don't think this is a huge burden.
It is supported by almost all modern browsers.
This is also a good article on CSS sprites
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
65
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
