How to Batch Optimize your Website's Images in One Click

It's no secret that I like using images in most of my posts. I think they drive the point home much faster especially when it's a tutorial. However this often comes at a cost of page load speed. In this day of scripts, page load speeds suffer the most and when you combine this with a bunch of un-optimized images the results could be devastating.

That hit me months ago while I was "optimizing" this site so to speak. Naturally I used Google's Page Speed Insights and the score I got was actually not that bad. It was 70 something, and among the suggestions that Google listed for me, the one that caught my eye first was that of optimizing my site's images. Apparently I could save over 20kb on just some images. Some of the other suggestions seemed well out of my control so I decided to work on the images first. I already had a couple of posts in place so I took the challenge to optimize all of them. That turned out to be a hectic task but fortunately something came to my rescue before I was done.



Check which images need Optimizing First

If you need to check your live images first, you can use Google's Page Speed Insights. Just put the URL of a page with images and give it time to fetch and analyse the data. It will soon give you URLs of the images that need optimizing alongside the KBs you can cut. Sadly it doesn't give image previews, so it may be difficult to pinpoint the un-optimized images. Fortunately, for that you can use the equally superb page speed tool at Varvy. It's actually more thorough than Google’s tool in the report it outputs and more than that it looks pretty good.


The Optimization Tool

For optimizing the images I settled for the free tool called Riot. RIOT is actually an acronym for Radical Image Optimization Tool and it's free for personal & non-profit use. You can also use it for commercial purposes but the good developer asks you to support him by giving him a donation first. It's available on Windows as a standalone app and more than that it's very easy to use since it has a GUI.

RIOT is also available as a plug-in for the 3 popular image applications softwares - IrfanView, XnView and GIMP. If you use any of these programs you can use the plugin though I've personally not tested it in that set-up. The software is also available as a dynamic link library for developers.

You can find out more on what RIOT can do by reading the review I wrote here. It's more than just a web image optimizer!
RIOT's Main Window
RIOT's Main Window

Batch Optimizing Images using RIOT

1. First get RIOT from the official donwload page. There's also a portable version available from the same page.

2. Launch the app and configure the output settings you want first. For instance if you need your images to be compressed to PNGs, switch to the PNG tab, for JPEGs switch to the JPEG tab. RIOT only supports outputing to JPEG, PNG & GIF formats which I believe should be adequate for your web needs.

Underneath the tabs you can also tweak the output settings if necessary - like adjustments, removing metadata e.t.c. For instanc, if you tick the grayscale option, all the images you load will be converted to grayscale.

3. Load your images by dragging and dropping them or the folder containing them into the program. Loading images this way will automatically launch the batch window with the images added to queue.

You can also use the Batch button to launch the batch window first. From the batch window you can then add multiple images or folder/subfolder using the Add images button.

RIOT supports loading a variety of image formats including Photoshop PSD format and Raw/HDR formats (needs the RAW + HDR plugin which is available from the same download page).
Batch Optimizer Window
Batch Optimizer Window

4. Add additional tasks (rotate, flip, resize e.t.c) if need be then choose the output folder at the bottom. Click Start and let the magic begin.

Note: Any additional task you add will be applied to all the images in the queue.

That's pretty much it. From experience I can tell you that the optimization is blazing fast especially if you're outputting to JPEG or GIF. High quality PNGs and higher resolution images tend to take more time but it's still quite fast. If you're working with high resolution images you may want to consider batch resizing them too by adding the resize option from Additional tasks. RIOT will resize and optimize the images in just one click. Sweet!



Other Free Tools for Optimizing Images

1. Jpegtran   
  • for optimizing JPEG images
  • available for Windows & Unix
  • command line only

2. Optipng
  • for optimizing PNGs
  • lossless PNG optimization (doesn't lose any information during optimization)
  • command line only
  • available for Windows & Linux
  • available in RIOT as an external PNG Optimzer

3. Pngquant
  • for optimizing PNGs    
  • lossy PNG optimization (discards some information for optimization)
  • available for Windows, Linux & Mac OS X
  • gui and command line versions available
  • batch processing

4. SuperPNG
  • adobe photoshop plug-in for optimizing PNGs
  • available for Windows & Mac OS X

5. Gifsicle   
  • for creating and optimizing GIFs
  • command line only
  • available for Windows, Linux, Mac OS X, DOS, FreeBSD & NetBSD

Learn More

If you want to learn more about optimizing web images, you can read some of the following useful resources:

1. Image Optimization - Google Developers
2. A Guide to PNG Optimization - Optipng


Leave your comment below. Spammers are advised to file a missing comment report in not less than a weeks time.