Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Forcing Lossy on PNG-32 (RGBA) Images
2146
single,single-post,postid-2146,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
shoes_out

Forcing Lossy on PNG-32 (RGBA) Images

For transparency, PNG format gives you two options. One option, (PNG-8) limits how much information can be saved into an image. The other option (PNG-32) provides almost no control over information reduction, as it is always lossless. But, with a few tricks, we can bridge the gap slightly between the two versions.

Fireworks provides some control over alpha channels in PNG-8, but overall, the format is still far too limiting for images with photographic elements, colors and alpha channels. The result is that we often end up using PNG-32 images, even though file size can be enormous.

Complexity in any image can bloat file size. Reducing complexity in a PNG-32 involves any number of the following: reducing total number of colors, reducing total levels of alpha, and reducing graininess. Adobe provides us with no control over these things in the export options, but when file size is critical, there are some tricks we can use. This can be slightly involved depending on the image, but I’ve created a Photoshop action:

here

…that starts you out with a lot to work with.

Here is the original example image we are going to work with. It is 270k exported from the Export for Web panel. Maybe I’m old fashioned, but that seems huge for such a small image. We’re going to try to reduce it down to under 130k.

Take the example image, and run the action on it. In your file, you will find a few new things:

1. An Accumulated layer with the partially opaque pixels built up to complete opaqueness.
2. An Isolated layer containing only the pixels that were originally completely opaque.
3. The original alpha saved into a channel.

The first thing that should jump out at you is the complexity that was revealed from the buildup of the semi-transparent shadows. Even pixels that are very near complete opacity have RGB values. This is one of the problems with Photoshop PNG-32 export, as this complexity bloats your file, and isn’t even detectable to the human eye with the alpha channel applied, which is why it was unknowingly left in.

From here, there are a number of ways you can deal with reducing complexity. Since every image is different, there’s no way to make a Photoshop action that could work well for every image. It is up to you to decide what techniques to use, how much complexity reduction to apply, and possibly figure out new ways to deal with it. It may seem like a lot of steps at first, but once you understand the concept, it becomes pretty easy. We’re going to do the following to give you an idea of what results can be obtained.

1. Posterize the pixels that were completely opaque
2. Remove unnecessary pixels
3. Posterize RGB channels of semi-transparent pixels
4. Posterize alpha and reapply it to semi-transparent pixels

POSTERIZE OPAQUE PIXELS

It is good to apply different complexity reduction to the fully opaque pixels, because a stronger reduction can be used that would cause banding (the undesired effect of posterization) to occur in your shadows. This depends on the type of image. You may want to apply different levels of reduction to different areas of this layer. Gradients need more levels, but also reduce to smaller file size than photographic areas.

1. Select the Isolated layer
2. Select Image > Adjustments > Posterize
3. Adjust the slider to where the complexity reduction becomes mostly unnoticeable.

REMOVE UNNECESSARY PIXELS

This process removes pixel data that is sometimes present, but unseen in areas that are nearly, but not completely transparent.

1. Duplicate the alpha channel created by our action, by right-clicking on it in the channels panel and selecting Duplicate Channel.
2. Select/show the new alpha channel, and hide the original one.
3. Image > Adjustments > Threshold
4. Drag the slider so the highlights in the preview only cover where you expect semi-transparency to be visible.
5. Select the Accumulated layer
6. Select > Inverse
7. Edit > Delete

POSTERIZE RGB CHANNELS OF SEMI-TRANSPARENT PIXELS

Apply a complexity reduction to the RGB channels of the semi-transparent areas with the Posterize image adjustment.

1. Select the Accumulated layer
2. Select Image > Adjustments > Posterize
3. Adjust the slider to where the banding becomes mostly unnoticeable.

POSTERIZE THE ALPHA CHANNEL AND REAPPLY TO SEMI-TRANSPARENT PIXELS

1. Select the alpha channel created by the action in the channels panel.
2. Select Image > Adjustments > Posterize.
3. Drag the slider until the banding becomes mostly unnoticeable.
4. Command click alpha the channel in the channels panel.
5. Select > Inverse.
6. Select the RGB channels.
7. Select the Accumulated layer.
9. Edit > Delete.

Now, turn off the background layer, use Export for Web and Devices as you would normally to save the image back out, and look at the file size of the output.

This may take a few tries to get the hang of, and to get the image exactly how you need it for your application. Depending on the amount of complexity reduction you apply, you can end up with an image that is under half of its original file size.

An optional form of complexity reduction that can be substituted for the above steps, is to apply indexed color mode to individual layers. That requires duplicating each layer into a separate file, and back into the working file, but will allow you to dither, and have control over the colors that are used.

After you are finished with this process, I recommend using Ping, by ParaMac Software to further compress your image.