Skip to content

How to Batch Optimize your Site’s Images in One Click

Images drive the point home much faster especially in the context of 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 occurred to me a few months ago while I was “optimizing” this site so to speak. Naturally I used Google’s Page Speed Insights which was quick to suggest a list of optimizations among which was optimizing my site’s images. Apparently I could save over 20kb on just some images.

I took up the challenge to optimize all of them however that quickly turned out to be a
hectic task that needed required some ingenuity: batch optimization.

Batch Image Optimization Tools

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!

If you however only need to optimize PNGs I highly recommend to use PNGGoo which supports batch jobs too.

Step 1: 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. Its report is actually more detailed than Google’s tool.

Step 2: Batch Optimizing Images using RIOT

RIOT's Main Window
RIOT’s Main Window

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.

Other Free Image Optimization Tools

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

Share:

Leave a Reply

Feel free to share your comments or questions with me. I may not be able to respond immediately so please check later once I've approved your comment.

Your email address will not be published. Required fields are marked *

Kelvin Kathia

Kelvin Kathia is a writer that's passionate about sharing solutions to everyday tech problems. He's the founder and editor of Journey Bytes, a tech blog and web design agency. Feel free to leave him comments or questions regarding this post, or by leaving him a message on the contact page. If you found his content helpful, a donation is much appreciated.