Image optimization

Over the holidays I was at my local Starbucks sucking off their WIFI along with ~10 others. It’s funny how performance becomes your top priority under those circumstances; compared to my office WIFI it was like night and day. Retail emails especially choked, with their big images taking forever to load and some just hanging.

Starbucks reminded me that users aren’t always checking email under ideal “office testing” conditions, and to look into new ways to reduce the file size of desktop images. To that end I went back to basics, running this 508K Gap hero image through a bunch of image optimization tools.



Original 508K image view Optimized via RIOT 84K view
image optimization tools


Click “View” to see the full-sized image that each tool produced.

jpg optimization tools
Original size of Gap image - View 508K
Photoshop “Save for web” 70% - View 154K (lossy) - View 102K - View 303K - View 463K 80% (Mac only) - View 102K RIOT 70% - View 84K



RIOT was my favorite, it cut the 508K image down to just 84K at 70% compression. I liked the interface and control it gives you. Though unlike Kraken and jpegmini you have to install it on your system. For Mac users imageoptim also did a great job, again it’s something you install.

RIOT interface

image optimization tools


Back to basics

Image optimization is an easy win for improving mobile load times, and can be done without visibly reducing the image quality. I usually save images out of Photoshop via “save for web” at 70%, but with these tools I’ll be able to save an extra 30% or more. Here’s a few more comparisons using RIOT:

Neiman Marcus original 60K image view RIOT at 85% 37K view
image optimization tools


Horchow original 162K image view RIOT at 70% 80K view
image optimization tools


Hugo Boss original 260K image view Hugo Boss at 70% 59K view
image optimization tools

10 Responses to “Image optimization”

  • n
    January 9th, 2013 13:59

    Great tip on RIOT. I’m definitely going to check it out. My only concern is that it majorly changed the blue of the dress in the Gap ad, and some of the reds in the Horchow ad to the point where some of the copy was unreadable. I’d be concerned about products being accurately represented.

  • Anna Yeaman
    January 9th, 2013 14:24

    Hi Natalie,

    I didn’t notice a difference in the color output for the blue dress (maybe its my monitor?), though you can play around with the optimization settings.

    I did notice RIOT doesn’t handle text as well as photos though, so some images will optimize better than others. Maybe one of the other tools will handle image-based text better than RIOT.

  • Suzanne Raphael
    January 11th, 2013 07:44

    Not sure what blue “n” could possibly be talking about. I grabbed both versions of the blue dress image & popped them into Photoshop, to identify any color shift. Although RIOT did smooth out some detail, the blues were virtually identical. Could be a browser incompatibility with the compression algorithm or something?? Odd. But honestly, for the optimization benefit & considering the wild variations in color from one device to the next anyway, RIOT is the bomb…pity it’s Windoze-only. Will give imageoptim a try though. Thanks for the tip :-)

  • Anna Yeaman
    January 11th, 2013 09:58

    Cheers Suzanne,

    I did the same putting both images side by side in Photoshop and couldn’t see a difference. You make a good point, we have ~30 mobile testing devices and colors look slightly different on all of them (even one iPad to another).

    imageoptim did a great job, RIOT was just my preference though not necessarily the best choice, its worth having a play with all the others.

  • Remy Bergsma
    January 14th, 2013 00:22

    Fast loading images under any circumstances are important - people are impatient these days with the now! generation. Great post Anna, and a subject that deserves more investigation and testing by others - both in size and timing. Our interconnected world is just warming up to the wireless eco-system, and those wireless connections won’t always be as reliable or blazingly fast as the wired ones.

  • Anna Yeaman
    January 14th, 2013 08:44

    Thanks Remy,

    yeah according to KiSS data, 47% of consumers expect a web page to load in 2 seconds or less and a 1 second delay in page response can result in a 7% reduction in conversions.

    I wouldn’t be surprised if consumers are less patient with email load times vs. webpages, as they are flipping through a bunch of them in quick succession. I remember Litmus found 51% of recipients delete your email within two seconds of opening it, can’t imagine they’d spend long waiting for it to download.

    Was chatting with Graeme about whether its best to have one big image, or multiple image slices which would increase the number of requests - plus overall file size usually - but maybe improve the perceived load time (at least you see something quickly). Also if there’s an optimum no. of slices based on the no. of requests you can make at once ect. Obviously you’d have to slice it up for URLs but often there’s just the one. Wonder if anyone’s done testing around this?

    Also talking about progressive jpegs and challenges of server-side image optimization, lots to think about.

  • marko
    January 22nd, 2013 01:03

    very interesting!!! Where I can download this program? Is a free program?

    thank you so much!

  • Anna Yeaman
    January 22nd, 2013 08:16

    Hi Marko,

    you can download RIOT for free here:

    I believe all the tools are free (either as downloads or online tools). There’s a free version of jpegmini, though you are limited to 20 images per day. Otherwise it’s $19.99.

  • Michel Hendriks
    April 9th, 2013 04:40

    Sorry for this late reply, but I just found this article and wanted to add something.

    “I usually save images out of Photoshop via “save for web” at 70%, but with these tools I’ll be able to save an extra 30% or more.”

    This is simply not true. You can obtain the same results with Photoshop’s “Save for Web” in terms of quality and file size. In Photoshop you’ll simply have to use a different quality setting. You cannot compare 70% quality in one program to 70% in another, what happens behind the scenes can be completely different.

    It looks like you should be using a quality setting of 40 to obtain the same results with Photoshop’s ‘Save for Web”, and in some cases the result will be even smaller (so you could up the quality a little, comparing to the other programs). I’ve made a quicky comparison here:

  • Anna Yeaman
    April 9th, 2013 07:45

    Hi Michel,

    I just ran the same tests as you - save for web at 40% - and the output quality was good, on par with the other tools. So thanks for that. I’ll often start at 70% in Photoshop and work down until artifacts start to show up, but maybe I wasn’t pushing it far enough.

    I’ll do some more Photoshop/RIOT comparisons to see if one handles certain types of images better. btw just asked a couple of my coders what they are using for compression and they said mostly Photoshop with ProMotion for animated Gifs…so I’m outnumbered. Though all of the tools mentioned are worth checking out, RIOT was just my preference.


Leave a comment: