Bulk Image Compression with Photoshop Droplets

Bookmark and Share

Aug ‘08 10

I recently exported a bunch of photos from iPhoto for an article I am working on, and discovered there was very little compression applied. Even at a lower 640 by 480 dimension size, the 30 images totaled 5.4 MB in size!

I needed a way to quickly compress these, and then I remembered Photoshop’s ability to create Droplets. A Droplet is an icon created by Photoshop that launches Actions on files that you drag on top of it. The resulting file is then saved in a folder of your choice.

This allows me to drag all 30 images on to the Droplet, and have Photoshop compress the entire batch automatically.

For those of you that learn by watching, I created a 5 minute screencast showing how it’s done.

Get the Flash Player to see this player.

For those of you that learn by reading, read on!

Step 1: Open a Test Image

In Photoshop, open up any image. The image is not important, you simply want something you can record your actions on.

Step 2: Record a New Action

In Photoshop, open the Window…Actions panel.

actions panel

Click the Create new action button.

create new action in actions panel

Give the Action a name descriptive of what it does. We will name ours JPEG50, because this Action will save out a JPEG at 50 Quality.

Click Record.

Step 3: Save For Web

Your Action is now recording, so be careful from here on out!

Tip: If you wanted to resize the image, or apply Filters before saving, you could do that and Photoshop will record these steps!

file save for web

Click File…Save for Web & Devices.

save for web jpeg settings

Set the compression type to JPEG, and choose a Quality setting you like. We recommend 50 Quality for optimum visual quality to file size.

Unless these files will be used in Flash, always use the Progressive option. It enables your JPEGs to render progressively in your user’s browser.

Click Save.

Step 4: Choose a Location for Compressed Images

You will need to create a folder for the compressed images, so when the Action or Droplet is run you know where the resulting files go.

compressed images save folder

We will create a new folder on our Desktop called Compressed JPEG 50 Progressive, descriptive so we know what it’s for.

Create the folder and click Save.

Step 5: Stop Recording Actions

stop recording the action

Click the Stop button on the Actions panel to stop recording.

Step 6: Create a Droplet

create droplet menu

To create your Droplet, click File…Automate…Create Droplet…

save droplet in a new folder

Choose a location to save your droplet that is easy to get to, like the Desktop.

choose action for droplet

Choose the Set and Action you just created for the Droplet.

Ensure Suppress File Open Options Dialogs and Suppress Color Profile Warnings are both checked.

When finished, click OK.

Step 7: Try it!

drag files on to the droplet

Drag the images you want to compress on to the Droplet.

If all goes well, the resulting optimized JPEGs will be in the Compressed folder you created in Step 4.

Step 8: Review Results

Let’s check out the before and after in terms of quality and file size.

Before at 234 KB:

photo before optimization

After at 84 KB:

optimized photo at 50 quality

We had a savings of 150 KB, 64% of the original size! The quality is also quite good.

If you happen to be viewing this page in Safari, you will notice that the colors are different than the original. This is because Safari supports color management, and we should address this.

For you non-Safari users, here is an image showing the original (top) against the optimized (bottom) version:

grass needing color correction

Notice how the grass in the original is much richer than the optimized version. See what you are missing out on? This is because I don’t have Photoshop configured to automatically convert Color Profile mismatches to the Working Space.

Color Correction in Photoshop

To fix this, go to Edit…Color Settings.

color management in photoshop

When working on the web (RGB), you always want to use your Monitor’s profile to ensure your images look the same across browsers. In my case, it is the Color LCD profile.

Under Color Management Policies, ensure RGB is set to Convert to Working RGB and all checkboxes are off. This way you won’t be bothered again.

Finally, run your images through the Droplet again. The colors should more closely match the originals now.

After Color Correction (84 KB):

after color correction

Much better, as it was meant to be seen. Good thing we checked for quality!

Image Compression Impact on Page Load Times

Altogether, we were able to quickly optimize 30 images from 5.4 MB to 1.9 MB, a savings of 3.5 MB or 65%. Let’s see how this plays out in page load times.

I created two test pages, one with our original photos and one with our optimized photos, and ran them through Pagetest to see the difference.

Original Photos – Speed Test Results

  • Average Load Time: 33 seconds
  • Bytes In: 5439 KB

Optimized Photos – Speed Test Results

  • Average Load Time: 13 seconds
  • Bytes In: 1865 KB

Savings

  • Load Time: 20 seconds (60%)
  • Bytes In: 3574 KB (66%)

The results are in amigo – the optimized images loaded 20 seconds faster!

Final Thoughts

Droplets can be a nice way of getting your optimization work done quickly, but at the cost of missing opportunities where you might save even more bytes by saving at lower a Quality – or the reverse, compromising quality at the cost of lower bytes. Always experiment and push to find a balance between low KB and image quality.

Did you know that Pagetest has an image compression check? It tests all JPEGs to see if they are saved at the equivalent of 50% Quality in Photoshop. Use the Pagetest Optimization Report (sample of our test here) to help you spot areas of your site where you might need to share our JPEG 50 Droplet with those responsible for the heavy images.

By loading images faster, you are helping your users consume them faster and thus giving them more reason to stay around.

Tags: , , , , ,

Bookmark and Share

18 Responses to “Bulk Image Compression with Photoshop Droplets”

Leave a Reply »

  1. Sue Massey notified... August 10th, 2008 at 7:30 pm

    Great Blog post. I am going to bookmark and read more often. I love the Blog template

  2. Marco quacked... August 16th, 2008 at 10:16 am

    Dave – you’re a gift for the goddess.

  3. Lou Metzger sounded... May 23rd, 2009 at 10:03 am

    This is exactly what have been looking for, thanks for sharing with others.

  4. Ev Barney wrote... June 15th, 2009 at 11:32 am

    Your site is a wonderful invitation to procrastination! Now, I must go put some of these idea to work!

    Thank you.

  5. Rich Y uttered... December 19th, 2009 at 4:59 pm

    I would suggest 1 more step though to add while you are recording your action.
    CLOSE file …. and when it asks to save changes … press Don’t Save.

    Otherwise when you’re processing a batch of images, it’s going to keep opening every one of them, which if you have a TON of images, it’ll really slow down your photoshop. PLUS you’ll have to manually close and press don’t save on all those open files once it’s done.

    I’m doing a batch of 1400 images. Without the close/don’t save, I would be slowed to a crawl.

  6. noru shouted... January 8th, 2010 at 7:01 am

    Offtopic : please tell me what plugin do you use for the randomness in the comments (squawked…,sounded…,reported…,quacked…, lessoned… )

  7. ArtzStudio howled... January 15th, 2010 at 9:45 am

    It’s just some custom PHP I wrote. Simply fill an array with words, and use PHP’s rand function to spit out a random word :)

  8. Mongo Monga shouted... April 1st, 2010 at 3:42 am

    Thank you, this worked brilliantly

  9. Luke shouted... October 8th, 2010 at 9:41 am

    If the folder is not there the droplet errors out. Is there a way to have the droplet create the folder if it doesn’t exist?

  10. Dan squawked... January 27th, 2011 at 5:11 pm

    Great article :)

    Mac users: After doing the above, drag n drop the images (in bulk) on to the wonderful ImageOptim for extra file size squeezing!

    http://imageoptim.pornel.net/

  11. Richard Karge pontificated... April 21st, 2011 at 1:36 pm

    Excellent read, I just passed this onto a friend who was doing some research on that. And he just bought me lunch because I found it for him smile Thus let me rephrase that: Thank you for lunch!

  12. Mateo lessoned... July 19th, 2011 at 1:44 pm

    Genius. Thank you. Saved me a lot of time. Droplet does exactly what I want – Batch kept overriding my original image since it was taking the save name from the action… Droplet ignores that while letting me save it to whatever folder I want.

  13. Treeism415 hazarded... August 31st, 2011 at 10:53 pm

    THANKS!!!!!! Very clear and on point tutorial getting straight to what I needed it to do delivered wonderfully! I really appreciate this! Peace.

  14. Ray Cooney howled... September 2nd, 2011 at 10:38 am

    Is there a way to create an action that will optimize every file to a specific file size? I have tried but have not succeeded.

  15. Chris pontificated... September 21st, 2011 at 4:47 pm

    A year later… still awesome. Thank you!

  16. Andreas Andrews announced... February 19th, 2012 at 5:05 pm

    I’m trying to create droplet for someone else to use. To ensure it will be easy, and simply work on the images they drop onto it without any pre-configuring needed I thought the best way would be to record the save for web (export) process, which shows up in the action list and then simply save the file and close, however this doesn’t seem possible. What’s the best way to create a droplet for others to use which does essentially does the same thing, but will work on different systems. It doesn’t have to be cross platform as that would take some doing I’m sure, but at least work on various PC’s and versions of Photoshop. Any ideas? Thanks, and great article.

  17. ArtzStudio lessoned... February 27th, 2012 at 9:17 pm

    Generally, this is not a good idea for performance. For example, if you optimize a fairly simple image and set it to say, 30K, chances are it could be a lot smaller (say 15K). Experiment with two different images, one simple, one detailed to see what I mean. This is why standardizing on a certain quality is the way to go, to ensure consistent quality results.

  18. ArtzStudio quacked... February 27th, 2012 at 9:22 pm

    No idea. If you figure this out post a comment!

Leave a Reply

Please index me, experiment!

“I am the gatekeeper to my own destiny and I will have my glory day in the hot sun.” — Nacho