Since images can be very large in terms of kilobytes or megabytes, they must be optimized, or compressed, for use in webpages. We'll use the terms optimize and compress interchangeably. There are big differences between JPG compression and GIF compression. The original image can be a JPG or GIF, and the optimized file can be in JPG or GIF format. For a good discussion on the difference between these two image types, see our tutorial All About JPG and GIF Image File Formats at KeynoteSupport.com.
JPG Optimization Overview
As the JPG format supports 16.8 million colors and GIF supports 256, most photographs and images with continuous color, such as gradients, are stored and optimized as JPG files. 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. (See our blog post How to Make Images Blend with the Background.)
JPG file compression is "lossy" - meaning that some of the image purity is lost during compression. Also, some edges that were sharp may be slightly blurred. When optimizing a JPG file in Photoshop, you can select the quality by percentage. If you want to change a file that has already been optimized, start with the original file! Make a duplicate of the original, make the required changes, optimize the file, and save it. Do not begin with the compressed file or the quality will continue to degrade due to the "lossy" nature of JPG compression.
GIF Compression
Images that are flat, with limited colors and crisp detail, are ideal for GIF. Compression of GIF files is "lossless" because colors retain their true values. However, as the GIF format only supports 256 colors, only certain images should be compressed into the GIF format. If your original GIF file contains transparent areas, then you must optimize the file as a GIF as GIF supports transparency and JPG does not.
Compressing a File in Adobe Photoshop
To compress a file for the web in Adobe Photoshop, open the file, and click File / Save for Web. On the Save for Web window opens, choose the 4-Up tab. Photoshop will display the original image, and three optimized images using different compression criteria. This can help you create as small a file as possible by comparing viewing quality and size. When you are happy with your compressed file, click Save. Enter a file name that is different than the uncompressed file, and then close the original file without saving it.
If you would like more detailed information regarding optimizing JPG. GIF, and PNG in Adobe Photoshop, please see Optimizing Web Graphics Using Adobe PhotoShop software at KeynoteSupport.com.
► Take a look at some of our other interesting posts, such as Easy Way to Create GIF Transparency in PhotoShop.
2 comments:
This is a very good discussion of the topic. I thank you.
I really needed to know this! Good writeup. Pauline
Post a Comment