is also a type of goblin.
This sprite’s not so refreshing after an all-nighter and it likes to feel the wind in it’s hair.
But less of the little green fella. Don’t know why but it’s taken me some time to actually get round to using CSS sprites for the background images here on Toxic Web, after all I think the first article I saw about them was on “A List Apart” and that is just over 6 years old. Added to that I’ve used them elsewhere, mainly for such things as menu lists with a rollover effect, but in a smaller individual basis.
In fact even on this site, with the rollover effect for the submit button on the comments form (below). Pretty much every image to do with the site’s layout is a background image so I decided to go the whole hog and create one huge image, which turned out not as workable so I ended up with two sprites.
I tried a couple of the Sprite generators but they didn’t exactly work out for me, the SpriteMe bookmarklet looked like a good one – there are more in this Smashing Magazine article – but in Firefox it produced a strange box that covered the working are making it partially unusable.
So it was down to a bit of DIY, importing the images into a big transparent background image, marking all the coordinates and making sure that there’s no overlapping when rendered on the page.
First one an image for all the borders (in the main content area), boxes (red & orange over there on the right) and all the little icons (again over there on the right next to ever list menu oh and down below and the date on the left), it came out at 150px high and 15,000px long but was only 21kb and replaced 37 individual images that in total were about 5kb more. The second image was for the navigation menu tabs at the top, one the left and at the bottom, this weighed in at 6kb replacing 16 images totally 10kb.
But it wasn’t the size of the images that I was bothered about, this day and age of broadband what difference does 9kb make? Bugger all.
It was partly just to do it and see about getting 53 images down to just 2 and thus reducing the number of HTTP-Requests by at least 50.
Using this post as a test subject (mainly because it is just text, no videos or images), Firebug shows that before the sprite there was 133 HTTP-Requests, after it was down to 78. The total download time was reduced by about 33%.
Then I looked at the site a Linux Mint live disc and of course even though it’s Firefox, it’s not the same as in Windows. Great, top nav is miles above where it should be. Hmmm positioned absolutely, obviously not measuring the same from the bottom of the containing div. Positioning it from the top gets it to work but of course the search box on the right drops down below where it should be.
And all this started when I was thinking about CSS3ing the whole site after changing back from Flock to Firefox when the latter moved to v3.6 – more on that later – and viewing a number of examples that would negate the use of images all together with nice border radii, alpha transparencies, glossy style boxes which of course won’t work in the most used browser.
Bloody interweb, can’t live with it, can’t hit it over the back of the head with a shovel and bury it under the patio…