Faster websites with image sprites and css
This clever technique works by combining multiple images into one, subsequently reducing site load times due to less image data and fewer server requests.
How websites and requests work
When a user requests a site, the site server delivers a stream of HTML code which is received and processed by the web browser software on the users machine.
As the HTML is processed the external resources required by the page need to be downloaded. This includes images, code files (css and java script) and other embedded material. For each resource a connection request is negotiated with the server and then the data passes from server the users computer.
Each request takes time, not just for the data that is requested. So the smaller the amount of data AND the smaller the number of connections the faster the site be completely loaded.
What is a sprite image?
Wikipedia: In computer graphics, a sprite is a two-dimensional/three-dimensional image or animation that is integrated into a larger scene.
When I refer to a sprite I am talking about the images that are used (via CSS) as elements in the site design. This technique does not apply to content images such as photos that are linked via HTML <img srg="">
An Example of a sprite image used
in the Google search page
By using CSS background image property to specify image and placement we can user parts of the larger image.
Technical example
Using the image above as an example, we can use the following CSS code to create a red "O"
The width and height are applied to the element to create a 'window' through which we can look at a part of the background image. By setting the position (44pixels to the left) the end result is that the only part of the sprite image exposed to the viewer is part 16 wide by 26 high and 44 pixels in from the left edge.
Summary
The concept sounds good but does this just result in a site design that ends up involving more data and complexity.
For web based applications such as ActionThis I can see where every bit must count and it was here that I was first introduced to the concept of image sprites. This technique, along with others, have been automated into a system called Runtime Page Optimizer (RPO) by the guys who built ActionThis.
There are at least two downsides to using this approach:
First there is the initial work of creating a well optimized image and all the fiddly effort of correctly aligning all the image elements with position values.
The second and more important issue is the complexity that is encountered when you come to modify your site. Because all the images are nicely combined into a single image file and referenced with exact pixel values, it becomes very tedious to swap out an image, particularly if the size differes from the original. Intruducing a larger image will possibly mean recreating the combined master sprite and subsequently adjusting all the pixel alignment values.
