PI6 Getting the Most Out of Subsampling
Getting the best results with the smallest possible file size for JPG's in the Image Optimizer involves a tradeoff of several factors: Mode, Compression (Quality) level, and something we rarely hear discussed, Subsampling. I discuss these features, including, Subsampling, on page 530 of my book, "PhotoImpact 6 Wizardry," but for those of you who don't yet have the book (or skipped over that part), here are a few facts about editable Image Optimizer variables that you should know:
Mode: You can choose from Progressive (image comes into focus gradually, but can result in larger file sizes and older browsers can't see them), Standard (larger file sizes but can be viewed in most browsers) or Standard Optimized (creates the smallest possible file size in non-Progressive mode).
Quality: Lower compression values result in better quality images, while higher compression values adversely effect image quality. How much you compress an image will depend on how much quality you want to retain when the image is saved as a JPG. If appearance is importance, go for a higher Quality level.
Subsampling: The default is YUV411 (smallest possible file size, good for flat images with little detail), YUV422 (good accuracy and compression, with slightly larger file size) and None (best quality but results in larger file size).
I hope that this tutorial will help to convince you of the importance of the role of Subsampling, combined with Mode and Compression, on image quality and file size. You can see the results of the different Subsampling methods used in this tutorial here. While the screenshots you'll see below are for PI6, the information is just as relevant to users of prior versions of PhotoImpact.
So that we're all working with the same file size numbers, download this BMP cabin image ZIP file. It's a greatly reduced in size version of a digital photo I took on vacation. Unzip and open cabin.bmp in PhotoImpact.
Let's take a look at how different JPG Image Optimizer settings will affect file size. Choose Web, Image Optimizer (or hit F4). Click JPG, Standard Optimized Mode and 85% Compression. Note that the default Subsampling method is YUV411.
Look up at the top of the Image Optimizer dialog box (shown below) and you'll see that these settings decrease the original file size of 627 kb to 71 kb.
While the Image Optimizer is still open, edit the Subsampling method to YUV422. Just click the down arrow next to Subsampling and select it. Immediately you will see a change in the file size at the top of the Image Optimizer dialog box. As you can see below, the file size still decreases appreciably, but at 78 kb, the YUV422 method results in a file size about 7 kb larger than results from YUV411.
Now edit the Subsampling method to None. Look at the File Size at the top of the Image Optimizer dialog box. As you can see below, this time the file size decreases to 90 kb.
Clearly there is no free lunch when you are balancing image quality against file size. Each of the Subsampling methods results in a significant savings in file size, but image quality is definitely affected by the method chosen. But when you're looking at the image in the Image Optimizer's preview windows, it's difficult to tell how the image will actually look on a web page when saved with different Subsampling methods.
Accordingly, I've saved this photo as a JPG, 85% Quality, using each of the three Subsampling methods, on this page. Take your time to scroll down the page and notice the subtle (and not so subtle) differences resulting from each Subsampling method. If you look quickly you may not see much difference.
However, cast a critical eye on the sharpness of detail within the images. YUV411 (the one used by most of us by default) causes blurriness and obscures detail of the red shutter cutouts, the knothole details in the cabin's wood, the gray tree bark on the right and in the individual leaf shapes on the left. In general, the colors are not as bright and vivid.
Scroll down to YUV422 and you'll see subtle improvement in detail, but some blurriness around detail remains. There is some improvement in the brightness and range of colors. For most purposes, this image may be the best for web display. It is only a slightly larger file size (7 kb more) and it looks better than the one using YUV411.
Finally at the bottom of the page, take a look at the image saved with None as the Subsampling method. It has the brightest, least muddy colors and crispest detail. At 90 kb, it's 19 kb larger than YUV411 and 12 kb larger than YUV422. But if showcasing an image is important, this would be the one you'd want to select for your web page.
I'd encourage everyone to try saving a photo using all three methods and see for yourself what a difference Subsampling methods can make in terms of quality and file size for your own images.
If you get a Subsampling and Compression method you really like and that you think you'll want to use over and over again, consider making an Image Optimizer preset so you don't have to re-invent the wheel each time. First choose your Image Optimizer settings, then click the "Add JPEG Preset" button (arrow).
Doing so will open the Add Preset Options box. Give the currently selected settings a name and click Add.
From now on this custom preset will appear in the Preset name dropdown list (arrow) every time you open the Image Optimizer.
Just select your Preset and all of the attributes associated with the save will be in effect automatically. What's more, you'll be happy to know that if you use PI6's web page building tools, your custom presets will appear as choices from the HTML Properties dialog box's File Format tab (for saving images on your web page). Even better, you can create a task in the Quick Command Panel that saves web images with your custom Image Optimizer preset, saving yourself a lot of mouse clicks.
This tutorial uploaded 9/21/01
Do not duplicate, translate, copy, archive, appropriate or redistribute this document.