Nowadays there are a lot of pieces of news about CSS-sprites. However, all resources just crunch the same idea about saving a set of small pictures in the one to increase total page loading speed. This research in two parts will gather all my knowledge about sprites using features in the web.
Well, I think you know it. Sprites are several small pictures united in the one graphic file.
Sprite of the “Zhytlobud” site
Such an approach includes several advantages. First, the one file’s size is usually less than the sum of sizes of several files. It can be explained by reducing costs for saving one picture: all these titles specifying picture format, or color palette, if it’s about indexed PNG or GIF. The old-school coders still remember some pieces of advice from the 90s about breaking one big file in several small ones to build an illusion at user of the site loading faster. It was nothing but illusion because of the total size of several files was bigger than one’s and the picture itself was being loaded longer.
Second and the most crucial point is decreasing HTTP-requests frequency. Somebody doesn’t pay attention to it, but in vain: individual request is much more expensive than ten “odd” data in the one picture. I won’t concentrate on this aspect because it needs separate discussion.
So we already know that sprites are cool and up-to-date. Is sprite using limited just within grouping different images in the one?
When I was young I was keen on playing games. And I was interested very much how these games were developed. Thenadays all-round 3D-graphics using was not common, and games which I was playing were mostly 2D-arcades (Another World, Commander Keen, Moles, Prince of Persia, ohh my…),which actively used sprites. Basically it is exactly videogames that influenced on worldwide spread of the name “sprite”, and it’s exactly videogames that mostly influenced on my growth as web-developer.
Besides of the standard images grouping several sprite types can be separated out.
Elephant on “Paritet98” site
1. Both JPEG and semitransparent PNG can be used.
2. Wider range of image optimization options
3. Autonomic animation speed and direction control with the same batch of shots (using just one image)
The following things are to remember while creating such a sprite: First you need to select shot size, where any image from sketch can be placed without troubles +10 to 20% of free space as reserve. It will allow future trouble-free image modifying.
Then you need to accurately match images in shots for spurts being unapparent in animation. If you do everything correctly then you’ll spend minimum of forces and time on JS-controller development.
This sprite type is commonly used for creation tools like preloaders: Some repeating texture on the block of uncertain width.
Your fingers itch to use GIF-animation, but such perfectionist as I am would not be satisfied with movement smoothness. Just compare:
In the first case I used GIF-animation with 0 ms delay (which means without one) between shots. In the Photoshop preview it works quite smoothly, whereas in the browser delays between shots are really visible. In JS-animation with using controller from previous example there is no delay.
Higher system requirements are among disadvantages of this approach so if you have about ten preloaders on the page you’d better think about what is better GIF or JS.
Sometimes you cannot find ideal image format. The best example would be the picture with semitransparent background:
In such a case much more effective will be splitting image on the two layers: first is the core to be saved in JPEG and second one is background to be saved in semi-transparent PNG.
Thus you kill two birds with one stone: reducing image size and improving its quality, using the best format for each of the levels.
Naturally this example is quite simple and primitive: I’m pretty sure most of you will handle this image exactly in that way. Most effect this sprite type gets in cases when the core is not rectangular. Good example: Imperia section on Imperia Private Banking site:
The huge decoration on the door is split on two layers: the core and the background, where each of these layers was optimized in its individual way, allowing me economizing about 200kB. I described process of splitting image on such two layers in my article About PNG. Part 2 (comming soon on Splashnology).
Unfortunately not always these pictures could be split on layers. For example when non-rectangular core contains photo-image. In this case cutting-edge browser technologies go to our rescue – SVG, Canvas and VML. Using them vector masks can be set on rectangular JPEG image, getting necessary look. For this purpose I’ve created special ictinus library, concentrated on solving such issues. A good example of using sprite masks (together with my library) is Аymobilko’s main page.
In the middle of the page beautiful product’s teaser is placed, whose image is to take irregular shape (in our case it is CD’s box with bent angle). Giving the background is not uniform (and is changed, too) the unique solution for this task was creating separate PNG image sized more than 100kB for each of these products. This way was not really convenient for me, so I decided to make an experiment using ictinus (or its alpha-version for that time). Vector mask (depending on the product type) is set on rectangular JPEG image, and the PNG-shadow is put under this image. The result was fantastic. Not only I economized user’s traffic but also saved customer’s nerves: now putting Show on the Main Page tick for any product in admin panel was enough without need to prepare new images in Photoshop.
It seems I have not forgotten anything about sprite types, and in the next part we’ll study ways of data storing in sprites together with some advices for using.
This post has been written by the team here at Splashnology.com
Subscribe to our email newsletter for useful tips and freebies.