Compressing Your Websites Graphic Files With The Help Of Google

This time I just want to show you how your websites graphics can be optimized with the help of Google.

Google has a very nice addon for Firefox called Google Page Speed.

Once installed you have a new tab in your Firebug bar.

Okay, let’s load a small website to look at the graphics we can optimize.

We will load this site: XHTML-Valid-Websites.com

After loading the site, with Firebug enabled, head to the Page Speed tab and press Analyze Performance.

Once the analyzing is finished you will see several subitems.

As you can see the Page Speed score is 90/100. That’s pretty good but there is still something to optimize.

We will focus now on the Optimize Images subitem.

Click on the subitem to open it.

As you can see here there is only the favicon image that could be optimized. On other websites there can be more files.

Let’s take this example here.

As you see in the graphic there are several graphics that can be optimized. In some cases it is worth the work, in others not.

You have to decide if you need to optimize your images to get a higher Google Page Speed score.

For a clients website (the start page itself) I optimized every graphic.

The result is…

… a Google Page Speed score of 94/100.

I also used a cookieless domain, combining/minifying CSS/JS files and CSS sprites as you can see in the CSS code below.

.slide-umzug{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -1000px;}
.slide-buerohilfe{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -1250px;}
.slide-nachhilfe{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -250px;}
.slide-computerservices{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -1500px;}
.slide-sprachunterricht{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -500px;}
.slide-messepersonal{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px 0px;}
.slide-renovierung{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -750px;}
.slide-uebersetzungen{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -500px;}
.slide-diverse{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -1500px;}

Tests has shown that the site is loading in about 672ms cached (217.40 KBytes, 35 requests) and 1167ms uncached (415.75 KBytes, 35 requests).

I think this is pretty good, no?
If you have any questions do not hesitate to contact me via email.

Good luck optimizing.