Skip to content

Want to share this article? Please use this short URL: http://1click.at/CCA2xH

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.

firebug bar 300x74 Compressing Your Websites Graphic Files With The Help Of Google

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.

Page Speed Analysis 300x74 Compressing Your Websites Graphic Files With The Help Of Google

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.

Page Speed Optimize Images Subitem 300x74 Compressing Your Websites Graphic Files With The Help Of Google

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.

Page Speed Analysis Microsoft.com  300x74 Compressing Your Websites Graphic Files With The Help Of Google

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…

www.studenten vermittlung.com  300x225 Compressing Your Websites Graphic Files With The Help Of Google

… 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.

Categories: Optimization.

Tags: , , ,

Read more about Michael Pehl



  • Pingback: Tweets that mention Compressing Your Websites Graphic Files With The Help Of Google | Cookieless Domain -- Topsy.com

  • Aki

    Hello, interesting site you have. Maybe you could help me a bit on cookieless issue…

    I have Joomla site where recently I changed php.ini settings:
    session.cookie_domain =”” to session.cookie_domain =”www.mysite.info”
    session.cookie_path = “” to session.cookie_path = “/tmp/”
    On my phpBB forum (located in http://www.mysite.info/forum) I also changed cookie server from “.mysite.info” into “www.mysite.info” and named the cookie path from “/” to “/forum”.

    Can you tell me if these settings will give me cookieless subdomains once I put subdomains up and fill them with images, css, js etc.? Or is this impossible as my site used “.mysite.info” earlier ie. I can’t produce cookieless subdomains on this site no matter what.

    In short is the only solution to get myself another domain for cookieless stuff?

  • http://cookielessdomain.com Cookieless Domain

    Hey there.

    The php settings have nothing to do with a cookieless domain.
    In my case I have registered a new domain, cookielessdomain.de

    From that domain I can serve static content cookieless.

    Michael

  • Pingback: Vote on this article at blogengage.com

  • http://just-ask-kim.com/ Kimberly Castleberry

    This post didn’t exactly tell me what I expected it to tell. Sure we’ve got googles help for page speed but what are the recommendations for how to compress the images and for which images its worth our time and more perhaps about how to integrate css sprites into sites (particularly w p sites that utilize preconfigured themes).

  • http://cookielessdomain.com Cookieless Domain

    Hey Kim.If you would take a closer look at the graphic in the post (I think it is number 4) you would see that Page Speed offers you to watch the compressed version of the graphics, and it offers you to download the compressed version :)

    About CSS sprites… this will be another post soon.



Michael Pehl - info@cookielessdomain.com

Powered by Wordpress - © 2010 Michael Pehl, CookielessDomain