Laurence Laurence - 20 days ago 6
CSS Question

why are icons on some websites (eg. youtube) all saved in the same file?

I was trying to replicate the layout of youtube as a css exercise, and when trying to download the icons I found out that they are all saved into a single file. I tried to attach an image but I don't have enough reputation. Please follow the link to see what I mean.

I imagine this is done to save bandwidth in some way, possibly (please correct me if I'm wrong) limiting the amount of requests to the server from each client?

How is each of these icons loaded separately from the rest? And when would it be beneficial to follow this approach rather than having single files corresponding to each icon?

single image file containing all the icons of youtube.com

Answer

You can do it with the background-position css attribute. Why to use sprite sheet is explained on w3schools.com:

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.