CSS Sprite

How bitweaver takes care of the many icons

Created by: laetzer, Last modification: 20 Mar 2008 (03:22 UTC)

This is only a test! Do not apply anything you read on this page, unless you want to.


why

The basic of CSS Sprites is to jam all your icons in one big image to reduce the number of image requests. This is an advantage when the little requests combined are a bigger hit in bandwidth then one big image. Also, since some browsers have very limited capabilities in the field of concurrent HTTP requests, i.e., downloading more than 2 files at once, a few dozen images waiting in the queue can certainly make your visitors think your site is slow, even if that is not true “in reality”.

bitweaver

Bitweaver doesn't have a centralized, fully automatic way of taking care of the CSS Sprite problem (yet). It's not even certain, if it would be a good idea. CSS Sprites might remain a task for the admin to solve, which is probably you. Similiar to your website's design, a Sprite can be a pretty individual thing.

possible temporary solution

Follow these simple steps to get a first and very effective CSS Sprite working in no time. Let's assume you are using one of the icon styles that come with bitweaver. They follow the Standard Icon Naming Convention and are located in /themes/icon_styles/.

setup

Of course, the biggest HTTP request hog is the dropdown menu. Let's visit Admin > Themes > Menues > Visibility and a turn on Blogs, Boards, ilike, Wiki, Languages, Nexus, Users, Rss, Search, Stats, and Tags. Not even that many. Common packages like Fisheye, Categories, Articles aren't there. Still, using the minimal style cascader and the default icon style tango, I only get a C (76). There are 30 images, totalling 50.4 Kilobytes. All in all there are 35 HTTP requests and 119 Kilobytes. I'm looking at the Welcome wiki homepage of a fresh install with some extra text and one image thrown into. The highly unsignificant webwait.com tells me 3.6 seconds for the first load, and about 2.6 seconds for subsequent calls (of cached content).

concept

The basic thought is to find out the icons that should be taken from a Sprite. This could be done in a way that everything falls back to normal if there is no Sprite. A first try could be the parameter iforce, which is used to override the site wide setting of how icons are displayed - as icons, as text, or as icons with extra text. That last option is used for the menus, in fact, menus override the site wide setting by default.

steps to follow

1. create the Sprite

Zip all PNG's in /themes/icon_styles/tango/small/ into one archive called tango_png.zip, and all the GIFs in another archive called tango_gif.zip. Upload each at spritegen.website-performance.org and download the resulting files into your style folder like this:

your file system:


<?php
/themes/styles/yourstyle/icons/tango_sprite_gif.css
/themes/styles/yourstyle/icons/tango_sprite_png.css
/themes/styles/yourstyle/icons/tango_sprite.png
/themes/styles/yourstyle/icons/tango_sprite.gif
?>


2. include files

Now for the inclusion of the CSS files in your templates. You copy )header_inc(.tpl from /themes/templates/ into your style's directory and edit it there:

/themes/styles/yourstyle/themes/header_inc.tpl


<?php
<link rel="stylesheet" type="text/css" href="/themes/styles/yourstyle/icons/tango_sprite_png.css" />
<
link rel="stylesheet" type="text/css" href="/themes/styles/yourstyle/icons/tango_sprite_gif.css" />
?>


3. add some CSS

Your style's CSS file needs 2 extra lines:

/themes/styles/yourstyle/yourstyle.css


<?php
span
.spricon-{height:16px;width:16px;display:block;float:left;background-image:url(/themes/styles/yourstyle/icons/tango_sprite.png);background-repeat:no-repeat}
span.spricon-{height:16px;width:16px;display:block;float:left;background-image:url(/themes/styles/yourstyle/icons/tango_sprite.gif);background-repeat:no-repeat}
?>


4. add some PHP

In function.biticon.php add the following after '' around line ~92)

/kernel/smarty_bit/function.biticon.php


<?php
 92
// only GIF for now in this test
 
93:             $outstr .= ' '.$iexplain//stays as it is
 
94:         } //stays as it is
 
95:     if ( $pParams['iforce'] == 'icon_text' || $pParams['ilocation'] == 'menu' ){
 
96:         $outstr "<span class='spricon-g " $pParams["iname"] . "'></span> " $iexplain;
 
97:     }
?>


result

Now first for some cache purging and then, though I get the same bad grade C (76), I'm down to 8 images (from 30), all in all 14 HTTP (from 35) requests and 127 Kilobytes (from 119) for a bitweaver setup that might be quite common … right after install, welcome screen + large top menu, many but not all packages installed. Seems to work 100% like before, so it's fine in all browsers that can display the top menu correctly. Only webwait.com is mean and claimes 3.05 seconds now for the first load, and about 1.2 seconds for the subsequent loads from cache. Well, so much for test results, totally useless...

So, this stab at the parameter iforce is a first test for CSS Sprites in bitweaver. It leaves icons alone that are wrapped in a link without extra text, which are those icons that might need the alt-attributes, depending where your site stands accessibility-wise. In bitweaver's main drop down menu, however, it's not done so great yet anyway, since alt and title fall into the same tag. Alt attributes could also be seen as descriptions of what is there. So in a link to the homepage with an icon of a little house, the alt attribute might rather want to say “little house” than “go to homepage”, or just be silent and admit that it belongs to fluff. But if you turn off JS and CSS so you can actually surf through the web, a CSS Sprite system which replaces all the icons with span's might produce some anchors with nothing in it. At the most, one could hover over it to see its title. Not ok.