Coding Tips & Tricks


Home > WPF

SmushMySite Image Optimization Tool - Smush.it™

When I am developing a web site, I am always looking for ways to improve the speed and page load times. I have used a few tools such as Yahoo's YSlow and Google's Page Speed Analyzer. If you have played around extensively with YSlow you may have noticed that there is a small column on the components tab called "Smush.it".

YSlow Smush.it

Smush.it™ is an awesome tool that optimizes images by removing unnecessary bytes from the image without changing its look or visual quality. After Smush.it™ runs on a web page it reports how many bytes would be saved by optimizing the page's images and provides a downloadable zip file with the minimized image files.

I was recently playing around with the tool that is included as part of the YSlow tool for Firebug. Now the tool that comes part of the firebug plugin is great, but the process is a bit manual if you have loads of images on your website. I also had a look at the Smush.it site, which provides an online tool for you to upload images and then retrieve the optimized images as a zip file. On the site, there is also the option to input the URL's of the images on you site. This got me thinking, what if there was a way to optimize all images on my site, or even all images on one of my web pages.

I decided to write a tool that would help with this. Enter SmushMysite - it is a tool that allows you to link to a URL or website sitemap, which then processes all the images on the page and copies the optimized images to an output directory. I can sometimes be lazy and any way to automate this process makes life a lot easier. Be sure to download this tool at http://smushmysite.codeplex.com. It has been written using WPF and C# 4, and you might be prompted to install .NET Framework 4 when installing the tool.

Below is just a quick walkthrough about the tool and how it works.

The Main Menu Screen

SmushMySite - Main

The ability to optimize images for a given URL

SmushMySite - Url

The ability to optimize images for a given sitemap. The tool will run through all URL's on the sitemap.

SmushMySite - Sitemap

Once the tool has finished running, you will be able to view the results of the optimization as well as any errors that may have occured during the process.

SmushMySite - Sitemap

One thing to keep in mind when using this tool is that it is still in the early development stages and there are a few known issues. If you come across any issues with this tool, or have any advice on how to improve it / suggestions - please contact me and let me know. Please be sure to include the URL that you were running against.

List of known current issues:

  • Doesn't currently process images in CSS files. This is being looked at for future releases.
  • Generally only works with image URL's that end in correct image formats (ie. jpg, gif, png, etc.)
  • "407 Authentication Error" occurs when connecting from a proxy. One of the things I am looking at in future releases is to allow for proxies.
  • Websites that have too many redirections in the page load may cause errors.

There are also a few things that I would like to add to this tool and these are some of the upcoming features that I would like to have ready for future releases:

  • Ability to loop through the CSS file and retrieve and optimize all the images.
  • Full support for proxies and the ability to enter Username and Password when prompted.

For more details and frequently asked questions on Smush.it™, please visit the FAQ.

Again, to download the tool please visit - http://smushmysite.codeplex.com








Comments

TraiaN - 3/12/2011
I wonder why Yahoo and Google don't just put a download all optimized images link into their tools..


Add your comment

300 Characters left


Please fill this in to confirm that you are human