Posts Tagged ‘graphics’

Bulk Image Compression with Photoshop Droplets

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.

§

PNG Alpha Transparency – No Clear Winner

Jul ‘08 25

As a long time user of Adobe Photoshop, I missed the boat on a very important discovery in image optimization – PNG-8 supports full alpha transparency!

Alex Walker wrote a great article on PNG and included a nice example on creating PNG-8 images with a full alpha transparency layer with Fireworks – yes, Fireworks. Stoyan Stefanov points out this ability in his image optimization mistakes presentation as well. Thanks to you both for enlightening me!

Before Stoyan and Alex, I like probably many other thousands of Photoshop users believed, or still believe, that PNG-8 is identical to GIF, i.e. an all or nothing scenario when it comes to transparent pixels. In Photoshop, we are left with the usually bloated, heavy PNG-24 format that I typically steer folks away from.

However, in applying PNG-8 to my favorite PNG transparency techniques, I came to a different conclusion than Alex and Stoyan. This article shows there is no silver bullet when it comes to saving out PNGs (are you listening, Adobe?).

PNG Transparency Text Effects

One cool technique we can do with alpha PNGs are text effects, as detailed here by Nick La. The technique involves layering an empty element containing the horizontally tiled background gradient over system text.

Using this CSS and HTML, we can pull off the desired effect:

<style type="text/css">
.glossy-text
{
	font: 45px 'arial rounded mt bold';
	margin: 0;
	position: relative;
	color: #f30;
}

.glossy-text b
{
	background: url(glossy-text-photoshop.png) repeat-x;
	position: absolute;
	width: 100%;
	height: 27px;
	top: 4px;
	display: block;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='glossy-text-photoshop.png', sizingMethod='scale');
}
</style>

<div class="example">
<h2 class="glossy-text"><b></b>PNG Can Overlay Text</h2>
</div>

Here are the results…

PNG Can Overlay Text

And another using the same image, with blue text…

One Image for Every Heading!

The optimization win here is clear – use only 1 image across multiple headers to pull off a polished design for headings!

The PNG Image

I created the PNG image in Photoshop using a Gradient Fill layer. This gives us a fine deal of control over the gradient and the level of transparency to apply at each point. We can visually see how much transparency is applied by looking at the shade of the Opacity Stops. White is 0% Opacity (invisible), while black is 100% Opacity, or fully visible.

Photoshop Gradient Fill

Now, we will head on over to our trustworthy Save For Web tool, and notice how our PNG-8 doesn’t support full alpha, as usual.

PNG-8 PNG-24
Glossy Text Photoshop Png8  Glossy Text Photoshop Png24 

I will save out the PNG-24 version, which comes out to 156 bytes, not too bad at all. Let’s see if Fireworks and its PNG-8 format can do better.

Now, if you are new to Fireworks (like me), the workflow is a bit different than Photoshop. Let’s start by opening up our PNG-24 image saved out of Photoshop, and switching to the export Preview view.

Fireworks Export Preview View

The Export Preview is essentially the same thing as Photoshop’s Save for Web tool. Look over to the right in the above graphic at the Optimize and Align panel – those are the settings it’s using. Let’s update that to PNG-8, and the Alpha Transparency option.

Fireworks Optimize Align Png

To export the image, we can go to File…Export, but we can also see the expected KB in the lower-left corner of the panel, a file size of 248 bytes. After exporting, we see it was actually 238 bytes. (Adobe, why can’t this be completely accurate?)

Photoshop PNG-24, 156 bytes glossy text from photoshop
Fireworks PNG-8, 238 bytes glossy text from fireworks
Fireworks PNG-8 (dithered), 278 bytes glossy text dithered from fireworks

Now, this brings me pause, because the PNG-24 I saved out of Photoshop was a mere 156 bytes – 37% smaller in size! You can also clearly see that the Fireworks image is banding, which I would not expect to happen on such a low color image. I also dithered it, and it got larger and the pattern was still noticable.

It would seem that for this design purpose, the glossy text overlay, Photoshop’s PNG-24 is the better choice. My luck indeed!

Gradient Header Backgrounds

Similar in design to the text overlay image, the same finding is bound to hold true for gradient background techniques, right? Read on…

I’m going to create another Gradient Fill layer, and overlay a fade to white, and a fade to black over a layer filled with red. Notice I added a Color Stop in the center to ensure one side is white, and the other is black.

Glossy Background Gradient Fill

Just to be fancy, I will go ahead and add some fully opaque rounded corners using our selection tool. First, I’ll make a circle selection with a 10px diameter, giving us a 5px corner radius.

circle selection at the top left corner of the header

Next, we’ll add to the selection along the top and left hand sides of the circle selection.

same thing on the left hand side

Next, we’ll need to use Select…Inverse to flip the selection so we can fill it in.

menu select inverse

Using our pencil tool with at least a 5px radius, we fill in our rounded corner with white.

filled in with white

Notice that it also nicely anti-aliases against the layer below. For the other side, we’ll simply make a selection around it, and copy it over to the other side of the header.

copying the rounded corner

Move it over to the other side and do Edit…Transform…Flip Horizontal.

menu flip horizontal

And finally, position it in the right spot.

position the right corner

It is time to save out our PNG. Let’s go ahead and disable our layers and crop the image.

before diabling layers

after disabling the layers

cropped

And now for the PNG-24 vs. PNG-8 test.

Photoshop PNG-24, 399 bytes Glossy Background Photoshop Png24
Fireworks PNG-8, 397 bytes Glossy Background Fireworks Png8
Fireworks PNG-8 (dithered), 411 bytes Glossy Background Fireworks Png8

The tables have turned – PNG-8 wins by 2 bytes! However, notice again there is banding going on, which is bothersome to me for such a low color image. I played with all the settings I could in Fireworks to no avail, and the dither is larger in size and looks worse, so again I will have to hand this one to Photoshop’s PNG-24.

ImageOptim, a GUI PNG Tool

And then, I thought about messing around with some programs Alex mentioned in his article, the programs PNGQuant and PNGNQ. PNGQuant and PNGNQ take 32-bit or 24-bit PNG images and "quantize" them down to 8-bit, or PNG-8. Now, what sucks is that the tools are command line, although PNGQuant has a GUI version for Windows, it is difficult to install and doesn’t help OS X fans like myself and many other designers.

I couldn’t get either of these to work on OS X, because I am chobo and didn’t want to spend more then the 30 minutes I did trying to compile the source code on OS X.

In my Googling for GUIs, I discovered ImageOptim. Now, I have no clue what language the developer speaks, or what the tool does exactly, but if you want to help me translate for my readers, be my guest:

screen shot of imageoptim homepage with non english text

If I had to guess, it appears to try various PNG algorithms until it gets one that compresses the best. The tool is very user-friendly, and would fit nicely into any process as you simply drag and drop your files into its window, and it takes care of the rest.

To see how we fare, let’s take our full quality Photoshop PNG-24, and drop it in.

dragging png24 into imageoptim window

Viola! ImageOptim crunched our PNG-24 down to 355 bytes, a savings of 11%. Recall this is also smaller than our Fireworks PNG-8 (397 bytes).

imageoptim results window savings of 11%

The resulting file was smaller and identical to the original:

Photoshop PNG-24, 399 bytes Glossy Background Photoshop Png24
Fireworks PNG-8, 397 bytes Glossy Background Fireworks Png8
ImageOptim PNG, 355 bytes image optim png

Let’s go back and see if we can save anything from our Glossy Text image.

glossy text results showing no gain

Looks like we didn’t gain anything, oh well.

My one beef with ImageOptim is that I have no clue what it did. Did it throw away information? What program did it use, OptiPNG, PNGCrush, AdvPNG? And why is their logo of a man getting impaled by credit cards?

imageoptim logo

Okay, with that we’ll use the ImageOptim version of the PNG to complete our design, along with the following CSS and HTML, for those interested.

<style type="text/css">
div.glossybg
{
	width: 250px;
	font-family: verdana;
	margin-bottom: 1em;
}
div.wide
{
	width:500px;
}
div.glossybg h2
{
	color: #fff;
	height: 32px;
	font: 18px/30px verdana;
	margin: 0;
	padding-left: 12px;
	background: #f30 url(glossy-background-imageoptim.png) repeat-x;
	text-align: center;
}
div.glossybg h2 b
{
	display: block;
	background: url(glossy-background-imageoptim.png) top right; /* Tricky bit! */
	background-color: #f30;
	padding-right: 12px;
	font-weight: normal;
}
div.glossybg h2.cold, div.glossybg h2.cold b
{
	background-color: #0066b3;
}
div.glossybg p
{
	border: 2px solid #ccc;
	border-width: 0 2px 2px;
	margin: 0;
	padding: 10px;
}
</style>

<div class="glossybg">
<h2><b>A Red Header</b></h2>
<p>Some text inside the skinny box.</p>
</div>
<div class="glossybg wide">
<h2 class="cold"><b>A Blue Header</b></h2>
<p>Some text inside the fat box.</p>
</div>

A Red Header

Some text inside the skinny box.

A Blue Header

Some text inside the fat box.

Notice the tricky bit of CSS indicated above. We are layering the image in <b> element of the header to pull off a rounded corner on the right side, allowing us to stretch the image to various widths, a favorite technique of mine.

Transparent Image Overlays

For my final experiment, I will create a banner header with a logo overlay, to demonstrate a more complex application of PNG.

We’re going to create a website banner for a fan site of a well known American politician. I downloaded some free artwork from his campaign website.

For our transparent overlay, I will need to cut him out of his poster and copy and paste him on a black background.

obama cut out

Then, we switch our document to Lab color mode.

lab color mode switch

This gives us a nice Lightness channel which we can use to create our overlay. In the Channels panel, select the Lightness channel, we’ll then make a selection using Command + Click (Windows Ctrl + Click).

select lightness channel and make a selection from it

This selects the light areas of the image, and also includes transparency information. Visually, you will see anything greater than 50% white with a marquee around it. If we wanted the dark pixels, we could simply select the inverse to obtain it.

This is also why we created him on a black background, to maintain the outline (transparent pixels are counted as white).

Now that I have my selection, I am going to switch back to RGB mode, create a new layer, and fill the selection in with white. I disabled the color layer to show the end result.

filled in the selection with white

We now have a layer with white transparency information in the shape of our political figure. Disable the black background, and save it out as Photoshop PNG-24. Export it through Fireworks and ImageOptim as outlined above.

Photoshop PNG-24
16764 bytes
Fireworks PNG-8
4542 bytes (73%)
Fireworks PNG-8 (dithered)
5265 bytes (69%)
Obama Photoshop Png24 Obama Fireworks Png8 Obama Fireworks Png8

ImageOptim was unable to gain any savings, so I didn’t include it. It seems as though ImageOptim doesn’t include a quantizer that will reduce the color palette like PNGQuant and PNGNQ, which is what we really want.

But I think we are finally getting somewhere on the Fireworks front. Our Fireworks PNG-8 was 73% smaller than our original PNG-24, though that banding is back (see his shoulder).

I exported another image out of Fireworks with a 100% dither, and think it looks much better. While a tad larger, I would recommend going with the dithered Fireworks PNG-8 image.

Let’s see how our finished product looks.

And if the boss said to make the background more patriotic, we can do so without affecting our transparent image.

What a catchy campaign slogan!

The Drop Shadow

I almost forgot the drop shadow! Well, I did forget it, I am editing this post just after I published it. Here is how a two color logo faired with a drop shadow.

Photoshop PNG-24

25232 bytes
Fireworks PNG-8

7150 bytes (72%)
Fireworks PNG-8 (dithered)

8615 bytes (66%)
ImageOptim

23255 bytes (8%)
obama logo with photoshop fireworks fireworks dithered fireworks dithered

In this one, my vote is for the Fireworks PNG-8 dithered with a whopping savings of 66% and a decent looking shadow.

Let’s add a gradient to the logo, and see how that looks.

Photoshop PNG-24

42264 bytes
Fireworks PNG-8

11049 bytes (74%)
Fireworks PNG-8 (dithered)

13909 bytes (67%)
obama logo with photoshop fireworks fireworks dithered

At first glance, the dithered version would be my choice. However, if you look close enough, you see some odd dark specks here that just don’t belong. I tried to get rid of them in Fireworks, but my skills there are lacking. In this situation I would probably modify the source image to get the result I wanted. 1/2 point for effort, Fireworks.

PNG8 Graceful Degradation in IE 6

The final thing I’d like to echo with Stoyan and Alex about PNG8, is how gracefully it degrades in IE6.

Ie 6 Vs Ie 7 Png8 Transparency

Notice that all pixels that had transparency applied (the drop shadow) disappear, allowing for a graceful degradation in IE6. For most cases, this will be entirely acceptable and allow us to avoid the performance penalty and CSS hack associated with AlphaImageLoader, the traditional way to enable alpha transparency support in IE 6.

Take a look at how wide your IE6 audience is, and make a call on if it’s worth the design/performance tradeoff to fully support it.

Findings and Conclusions

At the end of the day, the score was +1 for Photoshop PNG-24, +1 for ImageOptim, and +2.5 for Fireworks PNG-8 (dithered). Because of Fireworks’ poor performance on the first two scenarios, there is no clear winner.

With my late discovery of Fireworks PNG-8, I went into this article thinking I would have the end all answer for saving out PNGs. If you’ve been reading, you know that it’s not quite so simple. We simply need better tools; preferably, one tool.

My final thought on a designer-friendly transparent PNG workflow:

  1. Save out your transparent PNG out of Photoshop as PNG-24, and take note of the size.
  2. Open the PNG-24 in Fireworks, and export it as PNG-8 with Alpha Transparency (play with the dither option), and take note of the size(s).
  3. Run your Photoshop PNG-24 through ImageOptim, and see if you saved anything.
  4. Make a final decision based on quality, size and longevity (e.g. how long will the image be around, how important is it?).

There seems to be a big gap on the GUI PNG tool side for saving out high quality, low file size PNGs. While command line tools exist, they are not a realistic answer for designers who haven’t ever launched a terminal window, and for developers who don’t have the time or patience to compile source code.

I want to encourage Adobe to look at the available open source PNG tools and get them into Photoshop CS4′s Save For Web, where it belongs.

Until that happens, I am going to have to respectfully disagree with Stoyan and Alex that PNG-8 is the clear winner, as in 2 of the important use cases above, it wasn’t.

Please index me, experiment!

“Your… Your brain has the shell on it.” — Tommy Callahan