To make your website perform faster, few things can be done serverwise, some can be done client wise. Aside from Javascript and CSS minifying, an often overlooked item are the creation of sprites. Sprites, are “combined images” of your images.
On places.ae, we use many small icons which add up to multiple downloads of images on our website. Every download takes time even though HTTP persistent connections are enabled. These timings can be minimzed using springs.
First off, we streamlined to use 16×16 pixel icons, so this allows us to make a nice square with several area’s of 16 by 16 pixels. Using GIMP you can help by enable the grid view, and setting the grid (in Image -> Configure grid) to 16 by 16 pixels, or 8 by 8, to determine the middle easier.
By adding all our icons into this image, we can reference to them using CSS:
/* sprite images */
.sprite {
background: url(/images/sprite.png) no-repeat;
width: 16px;
height: 16px;
float: left;
margin-right: 10px
}
.img_warning { background-position: 0px 0px }
.img_location { background-position: -16px 0px }
.img_phone { background-position: -32px 0px }
.img_web { background-position: -48px 0px }
.img_fax { background-position: -64px 0px }
.img_menu { background-position: -80px 0px }
.img_dollar { background-position: -96px 0px }
.img_calendar { background-position: -112px 0px }
.img_search { background-position: -128px 0px }
.img_close { background-position: -128px 0px }
.img_check { background-position: 0px -16px }
.img_error { background-position: -16px -16px }
.img_clock { background-position: -32px -16px }
.img_heart { background-position: -48px -16px }
.img_thumbsup { background-position: -64px -16px }
.img_thumbsdown { background-position: -80px -16px }
Finally, in our code, we can eliminate the many <img> tags, and use div’s:
<span class="sprite img_phone" />
Many may know this already, but I wanted to share this quick and easy introduction to sprites.
A few days ago, I read
Many people ask me why their website has a low Alexa rank. Alexa, an Amazon-owned analytics service shows and ranks different websites and can even tell one the audience their website is getting; including gender, education and age groups. The question often remains; How does Alexa work? Do they monitor the entire Internet?
The Internet as we use it today, has very little privacy left. We all say that Facebook and Google know “too much”, only to realise that they don’t know anything aside from what we feed them, or do they?
From that advertising point of view, it creates mixed feelings. It’s like somebody overlooking your shoulder while you’re reading a magazine and changes the ads accordingly to which article you were staring at longer.
For a new web project, I’ve been looking at 

A particular aspect in IT security is injecting malware into websites. Often leading to so-called “