Combine Images into few Files using CSS Sprites
For viewing all tips see here
Applicable To
All Browsers
How Improves Page Load Time
By optimizing number of network round trips
Prologue
Similar to CSS and JS, downloading multiple images incurs additional round trips.
Why
o To minimize the number of roundtrips
o To reduce request overhead
How
o Combine images that are loaded on the same page and are loaded always together. For example, set of icons on a web page. Images that are dynamic in nature like profile pictures, shouldn’t be sprited.
o Sprite GIF and PNG images because they use lossless compression and can thus be sprited without reducing the quality of resulting sprited image.
o Sprite small images as there are requests overhead associated with small images, which can be reduced by combining all small images
o Minimize amount of empty space in the sprited image as a sprite with invisible pixels increases the memory usage of page, which in turn can make the browser slow.
o Sprite images with similar color palettes
Exceptions
None
Recommendations
None
Comments
Post a Comment