Web & graphic design notes

Website graphic optimization

When your website uses a lot of images in its template the overall working performance decreases even if the total file size of all graphic files is pretty small. This happens because of many queries to the server. There is a very simple and aesthetic solution to reduce this nasty effect.

To optimize graphic file requests we can include all the necessary graphics with the same color palette and dimensions in one single image file. Then we use the div layers and their background position css properties to show the necessary images. This technique is very helpful when using image-based rounded div corners, pictograms, icons or something similar.

One more advantage of this method is that its coding is more semantically correct because service information should be presented with div layers rather than with img tags.

In this example we use 4 images which are placed horizontally in one image file icons.gif:

CSS:

div.icon_green {
width: 20px;
height: 20px;
background: url(icons.gif);
background-position: 80px 0px; /* left and top positions */
}
div.icon_blue {
width: 20px;
height: 20px;
background: url(icons.gif);
background-position: 60px 0px; /* left and top positions */
}
div.icon_orange {
width: 20px;
height: 20px;
background: url(icons.gif);
background-position: 40px 0px; /* left and top positions */
}
div.icon_red {
width: 20px;
height: 20px;
background: url(icons.gif);
background-position: 20px 0px; /* left and top positions */
}

HTML:

<div class="icon_green"></div> Icon green
<div class="icon_blue"></div> Icon blue
<div class="icon_orange"></div> Icon orange
<div class="icon_red"></div> Icon red

The result will look like this: