How to Optimize and Compress Images Using Adobe Photoshop
Since images can be very large in terms of kilobytes or even megabytes, they must be optimized, or compressed, for use in webpages. We will be using the terms optimize and compress interchangeably. There are significant differences between JPG compression and GIF compression of images.
Author: Keynote Support
The original image to be optimized can be a JPG or a GIF file. When optimizing the file in Adobe Photoshop, you can choose to compress the file as a JPG or GIF. If you choose JPG compression, you can select the percentage of compression, and the resulting file will have a file extension of .jpg. If you choose GIF, you can choose how Photoshop should handle colors and transparency during compression, and the compressed file will have a file extension of .gif. We cover the various options you can choose during compression later in this tutorial.
JPG Optimization Overview
As the JPG format supports 16.8 million colors and GIF supports only 256, most photographs are stored as JPG files and should be compressed with JPG. The only exceptions are when transparency is required, or one wishes to seamlessly blend an image's background color to the background color of a webpage or other medium.
During JPG compression, the file will lose some of its original image data, or color purity. Because of this, compression of JPG files is termed "lossy." If you compare an optimized JPG file with its original, you will notice that solid areas of color in the compressed file contain a bit of "noise" - or pixels whose color has changed slightly from the original color. Also, some edges that were sharp may now be slightly blurred.
If you want to change a file that has already been optimized, always start with the original file! Make your changes, compress the file, and save the image with the same file name as the file you are replacing. Do not begin with the compressed file or the quality will continue to degrade due to the "lossy" nature of JPG compression.
GIF Optimization Overview
In contrast, compression of GIF files is termed "lossless" because colors retain their true values. However, as the GIF format only supports 256 colors, only certain images should be compressed as GIF files. Optimized GIF files may not be that much smaller in file size when compared to the original if the image contains gradients, vertical bands of color, or many non-contiguous areas of the same color. Unless you are matching the background color of an image to the background of a webpage or other medium, you may want to consider compressing these types of images as JPG files. You can compress the file as both a JPG and GIF and then compare how the two files look and their resulting file sizes. Also, as GIF supports transparency and JPG does not, this is a consideration.
Optimizing an Image in Adobe Photoshop
To compress a file for the web in Adobe Photoshop, open the file, and click File / Save for Web (or Save for Web & Devices ). The Save for Web window opens. There are four tabs at the top. The 4-Up tab is most useful because it allows you to compare the original image with three different compressed images that Photoshop creates based on different optimization settings. Depending on the image characteristics, Photoshop may display both JPG and GIF images. You can click on any of the 3 images and change any of its settings.
To see the differences in quality of the compressed files, you may have to click the Magnifier Tool in the upper left menu strip. Then clicking on any of the images will magnify them all. To see a portion of the magnified image not currently visible, click the Hand Tool in the same menu strip and drag the image, or just press the spacebar and drag the image.
When you click on one of the compressed images, you will see the available compression options in the upper right corner of the Save for Web window.
When you are finished compressing your image, click Save, and in the Save Optimized As window, type in a filename that is different than the original image, and click Save. Then close the original file without saving it.
JPG Optimization Options
After taking the Save for Web option, click on the 4-Up tab. The original image is in the upper-left. Click on the upper-right image, select JPG under Settings and make sure the Optimized box is checked. Then choose High from the dropdown arrow in the box below. Repeat the process for the other two images, choosing Medium and Low instead. Notice that the percentage of compression is displayed in the Quality box and on the image itself. You can tweak the percentage by entering a number in the Quality box, or clicking the arrow and dragging the slider.
The Progressive option, when selected, will save the file in such a manner that the image will be downloaded in several passes with the image quality improving with each pass. This option is most useful for visitors with lower-speed Internet access.
Below the Settings are the Color Table and Image Size. If you want to change the dimensions of the image, click the Image Size tab. Enter the desired width or height in pixels, and make sure the "Constrain Proportions" box is checked. Then click Apply. The Color Table is not applicable for JPG compression.
GIF Optimization Options
After taking the Save for Web option, click on the 4-Up tab. The original image is in the upper-left. Click on the upper-right image and select GIF under Settings. Under GIF click the dropdown arrow to view the Color Reduction Algorithm selections. If your image contains less than 256 colors, then this setting is not very meaningful unless you want to constrain yourself to only using web-safe colors. Otherwise, if your image has a few more than 256 colors, then Adobe needs to know what 256 colors you want it to use. Your choices are:
- Perceptual: Adobe will choose the 256 colors from the image that the human eye is most sensitive to.
- Selective: Adobe will choose the 256 colors from the image that are the most prevalent and favor web-safe colors. This is the default setting.
- Adaptive: Adobe will choose the 256 colors from the image that are most commonly seen in the image.
- Web: Adobe will use the 216 web-safe colors for the image.
If the image being compressed does not appear to have the same colors as the original, try the Perceptual and Adaptive algorithms in the other images in the 4-Up window and compare. There can be a huge difference depending on the image.
Dithering: The concept of dithering is that the system displays alternating pixels of two different web-safe colors in an attempt to trick the eye into seeing a third color that is not supported. If you are using only web-safe colors, you need not be concerned about dithering. If you are not using the web-safe palette but don't care how perfectly your images display on the old systems, forget about dithering. Even when images are dithered in an attempt to enhance their quality of display on the old systems, the effort is often not worth the end result. In the 4-Up window you can choose the web-safe palette and turn on dithering to see what the images look like.
How to Make Images Blend Seamlessly on a Webpage
If you want the background color of an image to blend seamlessly with the background color of a webpage, you must do two things. First, make sure you created the background color of the image with the exact same 6-digit hexadecimal code that you have specified for your webpage background color. Secondly, you must you must optimize the original image using GIF compression. GIF compression is "lossless" - the color in the image retains the exact color you specified. Just make sure the Lossy value is set to its default of 0 (zero) on the "Save for Web" window in Adobe Photoshop.
This same solution applies if you want the background of an image to blend seamlessly with the background of other media, such as a Microsoft PowerPoint slide.
We hope this tutorial has been helpful. Cheers!
Please link to this tutorial using the following HTML:
<a href="http://www.keynotesupport.com/optimizing-web-graphics.shtml">How to Optimize and Compress Images Using Adobe Photoshop</a>
Return to the top of How to Optimize and Compress Images Using Adobe Photoshop