Even fast connections suffer from multiple HTTP request overhead because of network latency and HTTP request processing overhead.
MSIE7 opens no more than 2 connections per domain, Firefox3 - 4-6 connections, Google Chrome - 6 connections.
Let’s suppose that time to first byte is 70ms (typical response time of http://google.com via 1.5 Mbps ADSL connection from Dulles)
If a page view involves loading of 20 images from the same domain, then total overhead in MSIE7 is 20/2*70ms = 700ms. The more images site contains, the more time visitor will have to wait.
The popular solution is to use CSS Image Sprites:
Join design/logo images into one bigger image. Use spriting technique (css background) to show the images on page. An image can be defined via css property background-position.
This approach is compatible with modern browsers (and even with IE4).
Let’s review the process step by step:
Step1.
Replace image entries <img src="/img/anyimage.gif"> with <div class="i_anyimage"></div>.
Add new css entry:
.i_anyimage
{
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-image: url('/img/anyimage.gif');
}
At the end you should get your pages fully functional and identical to the originals.
Step2.
Now you should join all the images into one bigger file. You can use an image editor or create automated script, etc.
Once the image is ready you start to change the css entries so they use the sprite image instead of original image:
.i_anyimage
{
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-image: url('/img/sprite.png');
background-position: -XXpx -YYpx;
}
XX, YY are coordinates of the original image within the sprite.
What can be useful to know here:
Some images can be saved in PNG8 without visible loss of quality and it makes sense to do so since this will reduce size of file by about 50% comparing to truecolor PNG. PNG8 also compresses better than GIF and PNG8 supports GIF-like transparency. Size of PNG8 file is 20% less than GIF in average.
You can compress PNG using this command:
pngcrush -rem alla -brute -reduce src.png dest.png
If you have 2 or more images aligned to the bottom right corner, then you will have to make at least 2 sprites (or keep 1 image separated).
Keep in mind that if there are pictures that change every few minutes then it would unpractical to include them into sprite because then you would have to refresh the sprite very often.
CSS Sprite Problems
If we use DIV or SPAN elements as image container we lose possibility to define ALT attribute. This means that visitors will not see the content (value of ALT attribute) if they are browsing with turned off images. It takes place even if we transform ALT=”" into TITLE=”".
It also affects search engine spiders, they also don’t see your content.
In case of images inside links it’s even worse since visitors don’t see the links and search engines skip your anchor keywords.
Happily, there is an easy solution exists. We should use IMG tag with transparent GIF as image container:
<img src="/images/transparent.gif" class="i_logo" alt=”keywords here” />
Applying Image Sprites involves putting effort into building and maintaining Sprites and changing Stylesheet. This can be time consuming especially if you often change images.
In addition, there are cases when you cannot put all images into sprites. I already mentioned case with several background images aligned to bottom right. Another case is when you have element with size depending on its internal content and you don’t know how big can it be. Then you cannot use a part of sprite as background because there are another images near the part.
If there are many images, usually each image appears on the page after loading. We join them into one sprite and browser will wait till the whole sprite loaded. This will increase time to the moment when most visible images appear on the page.
If we want an image or a group of images to load faster, we can split the sprite into two or more and preload important sprites via Javascript in document’s head.
Also, if there are several areas with different images we have to decide how many sprites we need and which image should go in which sprite.
As you see, Sprite Composition can be not so trivial task.
Visitors cannot view/download separate images inside a sprite. This is another problem if you want some of the images to be shared.
3 comments ↓
[...] - Using CSS Image Sprites saved by labmancw2008-10-21 - javascript game development with ext js - part 1 - sprites saved by [...]
[...] several Stylesheets we join them into one bigger CSS file. As described in the previous post about Image Sprites, we want to reduce amount of downloaded components because of HTTP request overhead. And if in case [...]
[...] It reduced Full Load Time from 2.4s to 2s. And we had only 7 images - usually sites contain much more and improvement will be more significant. CSS Sprites were described in one of previous posts. [...]
Leave a Comment