tips@lastplaceonthe.net

Using Yahoo’s Smush It service to optimise images in WordPress

Reading Time: 2 minutes

Building imagesImage: Francesco Marino / FreeDigitalPhotos.net

I’m always on the look out for ways in which to reduce the load time of my various sites. I use several methods to drive down the overhead of pages on this site and have experimented with lots of tools over the last few years. One of the heavier aspects of my sites has always been the images. It can be quite time consuming to edit images so that they are fully optimised (especially without a loss to quality) prior to using them, so I’ve been looking for ways to automate the process.

Yahoo run a web service that allows you to optimise images called Smush It. Whilst this takes the need for a good quality image editor out of the equation, on its own it requires a level of user interaction. Thankfully, a developer in the WordPress community (the platform on which this site runs) has coded a plugin that automatically smushes all images uploaded to the media component of your blog. I first came across the plugin WP-Smushit several months back; however if you download and install it (at the time of writing) it won’t work. Sure, it’ll install; however whenever images are submitted to the smush it API the process errors out.

I did some digging around the time I first found the plugin and found that the reason for failure was simple. Yahoo kept moving the API server, so as soon as the developer updated the plugin, it’s location was moved. There were several suggestions to fix the plugin in the threads, but none worked for me. In the past few days I’ve revisited the plugin and done further digging into the problem. Yahoo have now acknowledged the plugin author and realised that people were wanting to use the tool. They have since decided upon the API’s home however the plugin author hasn’t updated their plugin.

You can have the benefits of the plugin working if you follow these simple instructions:

1. Download the plugin from the WordPress hosted page here
2. Extract the plugin to you computer
3. Open the folder and then open the file wp-smushit.php in Notepad or another standard text editor.
4. Find the section titled:

/**
* Constants
*/

5. Replace the following code

//define(‘SMUSHIT_REQ_URL’, ‘http://smushit.com/ws.php?img=%s’);
//define(‘SMUSHIT_REQ_URL’, ‘http://ws1.adq.ac4.yahoo.com/ysmush.it/ws.php?img=%s’);
define(‘SMUSHIT_REQ_URL’, ‘http://smushit.com/ysmush.it/ws.php?img=%s’);
define(‘SMUSHIT_BASE_URL’, ‘http://smushit.com/’);

with

define(‘SMUSHIT_REQ_URL’, ‘http://ws1.adq.ac4.yahoo.com/ysmush.it/ws.php?img=%s’);
define(‘SMUSHIT_BASE_URL’, ”);

6. Save the file
7. Upload the plugin folder to your WordPress installation
8. Activate the plugin

From here on in all images uploaded to WordPress will be automatically smushed. If you wish to smush existing content in your media library, browse to the Media Library and smush each image in turn by clicking “Smush it”. (Found in the last column of the library table).

On this site alone, I reduced image size by an average 15%.  Add up all those images you have on your site and it makes a difference to page load times.  If you’ve got a WordPress site, this plugin is invaluable.

  • one day i'll get round to trying this out, have you noticed much drop in your overall traffic stats per month?

  • Rob

    I've not been paying attention to what it's done to my bandwidth since I have plenty of that. The reason for doing it was to vastly improve page load times for people. I don't know if you are aware or not, but Google is going to place site load time heavily into its algorithm for calculating page rank and therefore it's in our best interests to squeeze every last bit of juice out of the server and load pages as efficiently as possible. Non-optimised images can really make a difference.

  • Pingback: Optimizing Images for a Faster Website | WebTechWise()

%d bloggers like this: