Image Icons (Single Image)


Image "Background-Position" attribute:


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.

Website Images Performance:



 This is what 28 image requests look like from a Google Server. (All images less than 1 KB each):


Fullscreen:


Single Image Sprites/Icons :


Here is what a Single Image Request Looks (29KB)


Supported CSS Object:


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.







<object></object>


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 :



<object>
<style type="text/css">
.icons
{
display: block;
width: 20px;
height: 28px;
background-image: url('https://sites.google.com/site/drupalvsgoooglesites/_/rsrc/1284506389115/google-sites-html/image-map/google-icons-trans.png');
background-repeat: no-repeat;
}

  
.icon_1
{
background-position: -3px 0px;
}

.icon_2
{
background-position: -23px 0px;
}

.icon_3
{
background-position: -63px 0px;
}

.icon_4
{
background-position: -83px 0px;
}

.icon_5
{
background-position: -103px 0px;
}

.icon_6
{
background-position: -122px 0px;
}
</style>
<br>
<span class="icons icon_1" style="float:left;"></span>
&nbsp; Adsense<br>
<br>
<span class="icons icon_2" style="float:left;"></span>
&nbsp; Adwords<br/>
<br>
<span class="icons icon_3" style="float:left;"></span>
&nbsp; Google Analytics<br/>
<br>
<span class="icons icon_4" style="float:left;"></span>
&nbsp; Google Apps<br/>
<br>
<span class="icons icon_5" style="float:left;"></span>
&nbsp; Google Base<br/>
<br>
<span class="icons icon_6" style="float:left;"></span>
&nbsp; Blogger<br/>
<br>
</object>


More Inline CSS (using Object Embed)



Image Icons (using Google Gadgets Editor):


Using the single image above to create a selection of icons.
The Background-Position attribute is used in the following Google Gadget example:

Image Icons (Single Image)


<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" height="250"/>
<Content type="html"><![CDATA[

<style type="text/css">
  body{background-color: #eeeeee}
.icons
{
display: block;
width: 20px;
height: 28px;
background-image: url('https://sites.google.com/site/drupalvsgoooglesites/_/rsrc/1284506389115/google-sites-html/image-map/google-icons-trans.png');
background-repeat: no-repeat;
}

 
.icon_1
{
background-position: -3px 0px;
}

.icon_2
{
background-position: -23px 0px;
}

.icon_3
{
background-position: -63px 0px;
}

.icon_4
{
background-position: -83px 0px;
}

.icon_5
{
background-position: -103px 0px;
}

.icon_6
{
background-position: -122px 0px;
}
</style>
<br>
<span class="icons icon_1" style="float:left;"></span>
&nbsp; Adsense<br>
<br>
<span class="icons icon_2" style="float:left;"></span>
&nbsp; Adwords<br/>
<br>
<span class="icons icon_3" style="float:left;"></span>
&nbsp; Google Analytics<br/>
<br>
<span class="icons icon_4" style="float:left;"></span>
&nbsp; Google Apps<br/>
<br>
<span class="icons icon_5" style="float:left;"></span>
&nbsp; Google Base<br/>
<br>
<span class="icons icon_6" style="float:left;"></span>
&nbsp; Blogger<br/>
<br>
]]></Content>
</Module>