Stefan Kecskes

Never stop learning, because life never stops teaching

Image sprites using CSS only

What are image sprites and why should I use them?

Image Sprite

Web pages these days have many images. They are also called multimedia rich web pages. It may take a long time to load all of them. Each image means a server request from browser. Did you know that browsers these days download concurrently only 6 resources? That means that browser will start to download next resource only when one of the resources is fully downloaded and the slot is empty for next resource. Browser will do the following, each time when the browser looks into the list of resources needed to display the web page: