Michael Ramsey – The Website! This is a Tagline?

Learning CSS – Part 8: Image Sprites and Media Types

Coolie on a road in Java, 1946 (from The Commons)

Glad to be doing this last CSS post. Like I've said before, I'm sure I'll be revisiting CSS after this, but not in an organized, step by step way. I've been through a good assortment of the basic stuff that can be done with CSS as well as a few more interesting aspects (like Sprites, coming up). There are all sorts of fancy CSS tricks, particularly with the new stuff in CSS3. Those are the kinds of things I'm looking forward to talking about in the future. For example, I read a neat post about advanced shapes you can make with CSS3 (I can't seem to find the link though).

Image Sprites

Back in the days before everyone was on broadband, you had to be super careful to keep your pages' file sizes small. Too many images and/or too long a page and the many users on 33.6-56k modems would be forced to sit through minutes of loading for every page. The issue still exists today, but it's now more of an advanced usability, SEO and high volume website concern.

When a page is loaded, the first aspect to be retrieved is the page's source code itself. In the source of the average webpage are calls to various external files such as JavaScript scripts, CSS files, and images. Each of these requires its own call to the server to download that file before the page can be displayed (generally at least, but not always). When you've got a handful of different external scripts, CSS files and a whole bunch of images to load, you're faced with quite a few separate requests to be made. These requests account for a significant portion of the load time for a page.