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.
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.
Click the Create new action button.
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.
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!
Click File…Save for Web & Devices.
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.
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.
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
Click the Stop button on the Actions panel to stop recording.
Step 6: Create a Droplet
To create your Droplet, click File…Automate…Create Droplet…
Choose a location to save your droplet that is easy to get to, like the Desktop.
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 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:
After at 84 KB:
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:
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.
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):
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.
- Average Load Time: 33 seconds
- Bytes In: 5439 KB
- Average Load Time: 13 seconds
- Bytes In: 1865 KB
- Load Time: 20 seconds (60%)
- Bytes In: 3574 KB (66%)
The results are in amigo – the optimized images loaded 20 seconds faster!
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.