When building a website, how to combine multiple small images into a big one?

Question

Hi, when I open google front page in chrome developer tool, I found that they have bundled multiple icons into a large png file and then download them together(as above). I think this is a somewhat common approach to accelerate page loading. Can someone point to me a how to do that? Better yet is there a library to handle the bundle/debundle?

(I spent quite some time online searching for this but can't find exactly what I need. Any help would be appreciated!)

Answer 1

here you have a jsfiddle . This code below is for one icon. You can move your big image around with background-position

.sprite-gmail {
    width: 30px;
    height: 30px;
    background-position: -45px -5px;
}

Here you have a good post from w3Schools to better understand how to get what you want