History of CSS Sprite
{div style="line-height:160%;max-width:54em;text-align:justify"}
^This is __only a test!__ Do not apply anything you read on this page, unless you want to.^
{maketoc}
! 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 [http://tango.freedesktop.org/Standard_Icon_Naming_Specification|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 [http://developer.yahoo.com/yslow/|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 [http://webwait.com|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 [http://spritegen.website-performance.org/|spritegen.website-performance.org] and download the resulting files into your style folder like this:
{code title="your file system:"}
/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
{/code}
!!! 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:
{code title="/themes/styles/yourstyle/themes/header_inc.tpl"}
<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" />
{/code}
!!! 3. add some CSS
Your style's CSS file needs 2 extra lines:
{code title="/themes/styles/yourstyle/yourstyle.css"}
span.spricon-p {height:16px;width:16px;display:block;float:left;background-image:url(/themes/styles/yourstyle/icons/tango_sprite.png);background-repeat:no-repeat}
span.spricon-g {height:16px;width:16px;display:block;float:left;background-image:url(/themes/styles/yourstyle/icons/tango_sprite.gif);background-repeat:no-repeat}
{/code}
!!! 4. add some PHP
In function.biticon.php add the following __after__ '' around line ~92)
{code title="/kernel/smarty_bit/function.biticon.php" num=92}
// only GIF for now in this test
$outstr .= ' '.$iexplain; //stays as it is
} //stays as it is
if ( $pParams['iforce'] == 'icon_text' || $pParams['ilocation'] == 'menu' ){
$outstr = "<span class='spricon-g " . $pParams["iname"] . "'></span> " . $iexplain;
}
{/code}
!! result
Now first for some cache purging and then, though I get the same bad grade [http://developer.yahoo.com/yslow/|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 [http://webwait.com|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.
{/div}
^This is __only a test!__ Do not apply anything you read on this page, unless you want to.^
{maketoc}
! 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 [http://tango.freedesktop.org/Standard_Icon_Naming_Specification|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 [http://developer.yahoo.com/yslow/|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 [http://webwait.com|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 [http://spritegen.website-performance.org/|spritegen.website-performance.org] and download the resulting files into your style folder like this:
{code title="your file system:"}
/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
{/code}
!!! 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:
{code title="/themes/styles/yourstyle/themes/header_inc.tpl"}
<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" />
{/code}
!!! 3. add some CSS
Your style's CSS file needs 2 extra lines:
{code title="/themes/styles/yourstyle/yourstyle.css"}
span.spricon-p {height:16px;width:16px;display:block;float:left;background-image:url(/themes/styles/yourstyle/icons/tango_sprite.png);background-repeat:no-repeat}
span.spricon-g {height:16px;width:16px;display:block;float:left;background-image:url(/themes/styles/yourstyle/icons/tango_sprite.gif);background-repeat:no-repeat}
{/code}
!!! 4. add some PHP
In function.biticon.php add the following __after__ '' around line ~92)
{code title="/kernel/smarty_bit/function.biticon.php" num=92}
// only GIF for now in this test
$outstr .= ' '.$iexplain; //stays as it is
} //stays as it is
if ( $pParams['iforce'] == 'icon_text' || $pParams['ilocation'] == 'menu' ){
$outstr = "<span class='spricon-g " . $pParams["iname"] . "'></span> " . $iexplain;
}
{/code}
!! result
Now first for some cache purging and then, though I get the same bad grade [http://developer.yahoo.com/yslow/|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 [http://webwait.com|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.
{/div}