CSS Image Sprites - Pros and Cons

Websites usually contain graphics and visual elements that make the web pages look more user-friendly and easy to use. Buttons, Arrows, Icons, and many other design elements use images in order to give the website a certain desired appearance. 

The problem is that each image on the website is loaded through a standalone HTTP request, and each request needs some time in order to be established, send the request metadata, wait for the server to process the request, and eventually receive a response from the server. This is done in a matter of milliseconds, but when the page contains many files and images to load, those milliseconds add up and cause a longer page loading time.

Therefore, it is considered one of the best practices to reduce the number of HTTP requests in a page; this applies to images, CSS Style Sheets, Javascript files, etc.

Image Sprites is a technique used in CSS in order to reduce the number of HTTP requests on a page. It's simply done by combining most of the static background images on the website in one big image that's called Image Sprite!

For example, some sites have buttons that have different icon backgrounds that change shape or color whenever the user hovers over them; this is a common CSS styling task. So, instead of styling each button with a separate background icon image file, those icons can be placed in a bigger image sprite that would serve as a common background image for all these buttons. The idea of image sprites is to simply align images in one big image sprite, whether horizontally or vertically, whatever makes sense to you. In the CSS, the same image sprite will be loaded for different selectors and classes as a background-image, and each element will be set to different background-position X and Y values.

Here is a good example how this can be implemented with an Image Sprite: http://jsfiddle.net/videsignz/eAp2H/

ProS

• Fewer HTTP requests, which means less server overhead.
• Fewer HTTP requests also means reduced page load time on browser.
• Images appear faster (Especially the hover state images) because the Image Sprite is loaded once and for all.

Cons

• More development time for slicing images, combining them, and programming background positions in the CSS.
• More maintenance time. Whenever a modification is needed, the whole sprite needs to be re-generated carefully
• Less SEO friendly. Some images are better be placed in the HTML rather than being backgrounds. HTML images can contain Titles and Alternative texts that are more beneficial to SEO, while CSS backgrounds cannot.

In the end, it depends on each case Image Sprites are useful when it comes to performance optimization. It might take a little bit more effort, but it's effective. Below is a link to a helpful tool which helps in generating image sprites quickly rather than doing them manually: http://spritegen.website-performance.org/

If you have any comments or questions about Image Sprites or reducing the HTTP requests on a page, please leave them in the comments section below.