I recently noticed that every image on this website – the logo, badge colors, up/down voting arrows — the list goes on – are actually part of a single sprite sheet, set as a background image, and repositioned based on the required state. What is the advantage of using this method over using multiple images?
Share
With a sprite, the browser only has to make one HTTP request for the whole image, instead of N requests for N images. There is significant overhead and delay to creating the TCP connection (three-way handshake), so limiting this to just one request saves a lot of time.