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>>> <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> Adsense<br> <br> <span class="icons icon_2" style="float:left;"></span> Adwords<br/> <br> <span class="icons icon_3" style="float:left;"></span> Google Analytics<br/> <br> <span class="icons icon_4" style="float:left;"></span> Google Apps<br/> <br> <span class="icons icon_5" style="float:left;"></span> Google Base<br/> <br> <span class="icons icon_6" style="float:left;"></span> Blogger<br/> <br> </object> More Inline CSS (using Object Embed)
|