Unknown Webmaster's poker affiliate blog

Examples of how you can reduce the size of your images and the load time of your website with smush.it

If you haven't read my first post on image optimization with Smush.it I recommend that you do so before reading this one. You don't have to, but it will tell you

Example of image optimization with smush.it
Imagine that this is you logo


Your logo is being shown on every single page of your website, and a reduction in filesize could be a big improvement on your website as a whole.

This is your logo after it has been smushed


As you can see there are no difference in the visual quality. All that has been changed is the way the image is saved. And the smushed image is 8% (2.8 kb) smaller than the original. Now, this was just a single imgae, lets see what it can do with a whole page.

Real life example - RakeTheRake
I have installed the smush.it Firefox plugin and are imagining that I own RakeTheRake. I have gone to http://www.raketherake.com and are looking at the bottom right of the browser window.



All you have to do is press the smush.it button as shown above, and you will be sent to a smush.it page that analyze the pictures and display the results.





I can't show all the results since it would break the design of the PAL blog. However, I can tell you that 20 kb of the 40 kb bloat comes from a background image.


Website optimization video
This is a video on website optimization and best practices from one of the creators of Smush.it - Nicole Sullivan. She talks about why it is important to optimize your website and gives some advice on how to do it. Be advised: The video is of a talk to designers and webdevelopers, so if you don't enjoy those kind of things you may just want to skip the video and add my RSS feed to your newsreader or try smush.it on your website smush.it!.

<div><object width="512" height="322"><param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.34" /><param name="allowFullScreen" value="true" /><param name="AllowScriptAccess" VALUE="always" /><param name="bgcolor" value="#000000" /><param name="flashVars" value="id=11192533&vid=4156174&lang=en-us&intl=us&thumbUrl=http%3A//us.i1.yimg.com/us.yimg.com/p/i/bcst/videosearch/6581/77038678.jpeg&embed=1" /><embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.34" type="application/x-shockwave-flash" width="512" height="322" allowFullScreen="true" AllowScriptAccess="always" bgcolor="#000000" flashVars="id=11192533&vid=4156174&lang=en-us&intl=us&thumbUrl=http%3A//us.i1.yimg.com/us.yimg.com/p/i/bcst/videosearch/6581/77038678.jpeg&embed=1" ></embed></object><br /><a href="http://video.yahoo.com/watch/4156174/11192533">Nicole Sullivan: &quot;Design Fast Websites&quot;</a> @ <a href="http://video.yahoo.com" >Yahoo! Video</a></div>