Select Page

Just recently we had a client ask how to optimize photos for the web. I have a post describing the steps which you can read (Web Page Load Times and Image Optimization). That post describes the steps: copy, crop, resize, and optimize. The “crop” step implies editing each image and cropping out unneeded  or unimportant image elements.

In many cases you have a large number of photos you have taken and you just want to optimize them for the web, all at once. A professional might use a tool such as Adobe Photoshop. But for many a free PC-based tool will do the job just fine.

The tool I use is called RIOT. The stand-alone program is available at http://luci.criosweb.ro/riot/

RIOT is very similar to Photoshop’s “Save for Web” feature. For this post I want to describe RIOT’s batch capabilities.

After downloading and installing RIOT you launch the program and see the following:riot

Since we are processing photos we want to use JPEG compression.  You can see at the bottom of the screenshot the tabs for JPEG, PNG, or GIF image file formats.  With JPEG selected you have a “Quality” slider to specify the amount of compression you want to use for the photos.  A good starting point might be 75 percent.

jpgcompression

You can drag and drop one of your photos on to RIOT and then slide the slider back and forth to see the effects.  Below is a photo in RIOT that is compressed to 50 percent and it still looks fine.

riotbird

Once you have decided on the level of compression you are ready to batch process your images. Create a folder where you want the compressed images to be placed. Then click the “Batch” icon. A new window opens:

batch

Click on the “Additional tasks” and select the “Resize” option:

additionaltasks

and then enter the size you want your images to be. Typically you just need to set the width. In this example I am setting the width to 500px.

resize

Then click on the “Add Images” which opens the normal windows open dialog and select all of the photos you want to process.  After selecting the images they show up as a list in RIOT.

imagelist

And then specify the output folder and click start.  imagesdone

That is it.  As each image is compressed and saved the status changes to “ok.” Now close RIOT and go look at your compressed image.