i can haz .NET

a Run Through the Jungle of Software Development and Unrelated Sagas

Posts Tagged ‘optimization

Optimizing images on your website is a RIOT

leave a comment »

RIOT, the Radical Image Optimization Tool is a great FREE app for reducing file sizes for JPEG, GIF and PNG images. When you upload a blog post to WordPress, multiple versions of the images in the post are generated in different sizes by the WordPress blog engine. The WordPress image generator has nowhere near the sophistication of RIOT’s Algorithms so those files end up being quite a bit larger than they have to be. By shrinking them you are saving yourself bandwidth and your page load times will also be faster.

The example here is from Safari, using an iPhone user-agent on my other blog. I was mucking about with the WPtouch iPhone theme for WordPress at the time The page is http://www.cadbloke.com/using-acne-with-excel-2007-or-2010-and-windows-7/

Before

iPhonePageBefore

After

iPhonePageAfter

As you can see, the image file sizes halved.

RIOTsizeReductionList

These ones  are all PNGs optimized to a 256 color palette. That’s plenty good enough for screen grabs. They are almost indistinguishable from the originals. You’d really have to look closely to spot an differences. RIOT also processes GIFs and JPEGs.

How long did optimizing the 120 image files that WordPress generated for that post. It took less than 5 minutes, including downloading and uploading time.

How?

Step 1 is to download the images from your blog to a local folder so you can process them. If you’re using a blog hosted at WordPress.com you can stop right here. You’ll need FTP access to upload the processed images. This only works on self-hosted blogs. You can still use RIOT to optimize the images before you insert them into your posts but after that it’s out of your hands.

I used Beyond Compare to create a folder sync between a local folder and the image folder on my web server I wanted to process. You could just as easily use an FTP client to download the images to a local folder, it’s probably no harder. For FTP I tend to use FireFTP which plugs straight into Firefox.

Step 2 is to Open RIOT. Set the image format you want and tweak your settings, particularly for JPEGs or transparent GIFs. If you have mixed file types then you will have to process them one type at a time because RIOT, amongst other things also can convert between formats.

Step 3 is the batch process. After you’re happy with the output settings go to the tools menu in RIOT, load up your list of files and hit Start. A tip: set it to save the optimized files in a new folder instead of overwriting your existing images. You will kick yourself a lot less hard if when you mess it up. Keep the originals until you know you’re happy with the results.

Tip: You can select an entire folder tree for a batch process in RIOT so you could download your entire image library from your server you can optimize the whole lot and send it back

Step 4 is to upload the optimized images over the top of the old images on your web server. Try to remember not to upload the originals – check your FTP client has been set to the folder full of optimized images.

Step 5 … you’re done.

These instructions are a little light-on. I only wanted to introduce you to RIOT. I think it’s worth checking out. It does far more than the simple process I have described here.

RIOT is also available as a plugin for Irfanview. You can use it via the “save for web” option in the file menu.

Advertisements

Written by CADbloke

September 13, 2010 at 8:52 pm

Posted in Wot I use

Tagged with , , , , , ,