File Types and Optimization
by Jason Vaughn
This lesson is designed to help you understand file types and file optimization. In this lesson, you will learn about GIF, JPG and PNG file formats. This lesson uses Adobe's "Save for Web" feature, located in Illustrator and Photoshop. Adobe ImageReady offers the same features, but is set up a little differently. It is recommended that you attend the class lectures to get the full understanding of this lesson.
Choosing a file format for optimization
GIF files are the most common way to save your images for the Web. GIF files are low in memory and easy to make. GIFs and PNG-8 are mostly used for graphic elements such as line art or solid colored areas such as text. You can save photos as GIF files but most continuous tone images such as photos are saved as JPEG files. Depending on the quality you are looking for, GIF files are quality enough for most images, including small photos. If you are looking for a sharp quality, continuos tone photo, then JPEG is best. PNG-24 file format is suitable for continuous-tone images. However, PNG-24 files are often much larger than JPEG files of the same image.
Image appearances vary from browser to browser and from system to system. Preview your image in different formats and test them with different browsers and color settings.
More about JPEG files
The JPEG format supports 24-bit color and preserves a large range of color and subtle variations in brightness and hue, and other continuous-tone images. Most browsers support JPEG.
JPEG compresses file size by selectively discarding data. Because it discards data, JPEG compression is called lossy. A higher quality setting results in less data being discarded. You should always save JPEG files from the original image in order to keep the image quality at its best.
You can create a progressive JPEG file by selecting it in your palette window. This produces a low-resolution version of the image that appears in your browser while the full image is downloading. This allows the users to see the image and tells them it is loading.
The JPEG format does not support transparency. When you save an image as a JPEG, transparent pixels are filled with the Matte color. If you know the background color of the Web page where you will place the image, you can match the Matte color to the Web page background color to simulate the effect of background transparency.
More about GIF files
The GIF format uses 8-bit color and compresses solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type. Most browsers support GIF.
The GIF format traditionally uses a lossless compression method, in which no data is discarded during compression. You can save a GIF file multiple times without discarding data. However, because GIF files are 8-bit color, optimizing an original 24-bit image as an 8-bit GIF will generally degrade image quality.
In addition, Illustrator allows you to create a lossy version of a GIF file. The lossy GIF format includes small compression artifacts (similar to those in JPEG files) but yields significantly smaller files.
You can reduce the number of colors in a GIF and choose options to control the way colors dither in the application or in a browser. GIF supports background transparency and background matting, in which you blend the edges of the image with a Web page background color.
More about PNG files
The PNG-8 format uses 8-bit color. Like the GIF format, PNG-8 efficiently compresses solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type.
The PNG-24 format supports 24-bit color and preserves a large range of color and subtle variations in brightness and hue, and other continuous-tone images. Like the GIF and PNG-8 formats, PNG-24 preserves sharp detail, such as that in line art, logos, or illustrations with type.
1. Open Photoshop then open your poto.
2. Once your image is open, then select File / Save for Web... A new window opens showing your image with different palette selections. Select the "2-Up" tab at the top, so you can view your original image and your optimized GIF image.
3. The menu to your right is where you will optimize your image. Select the Selection tab at the top of the palette and choose GIF 64 Dither. This setting works best for most images. Notice how it fills in the settings for you. Experiment with the different settings for your GIF image and see what happens.
4. Notice the image to the right. The settings are the same as in step-3 above, except for the amount of colors displayed. Previously the amount of colors was 64, but now the color settings have been changed to 16. Notice the quality of the image to the right. Quality has been sacrificed, leaving the image in poor shape. However, notice the image size. It is considerably smaller than the original and somewhat smaller than the 64 colored image. Test these settings and see what happens.
5. When finished, click OK and save your file. This is how images are optimized.
Article posted with permission from:
Art Space Design
