Creating icons from a single image is a important way to increase Google Sites loading performance.
You can simply use the Background-Position attribute to offset the position of the image for each individual icon.
A similar Technic is used intensively in PlayStation , Xbox and PC Games development to reduce graphic load & render times.
As The Internet moves towards more graphic rich content this type of 'Bitmap' Caching Technic is being used on smaller less powerful devices , such as Android , iPhones etc..
In Adobe Flash, Air and Flex this Technic helps produce smoother animations.
This is what 28 image requests look like from a Google Server. (All images less than 1 KB each):
Single Image Sprites/Icons :
Here is what a Single Image Request Looks (29KB)
Using an Object Tag to embed the CSS attribute "background-position". Multiple Icons from a Single image.
Insert the following tags in your Google Sites Html.
Live Html Editor [Larger View]
Edit your Inline CSS LIVE >>>
Copy and Paste the Following HTML code>>>
This will create a Embed Object with ability to add the following Html :