SAMS Teach Yourself Adobe® Photoshop® CS2 in 24 Hours [Electronic resources] نسخه متنی

File Formats and File Size

The first thing you need to learn about preparing web graphics is the type of file format to use. There are two standard choices: GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). There's also a third format known as PNG (Portable Network Graphics). It's actually been out for several years and promises to be the best choice of all three, but it has never really caught on. Use it if you like it, but be aware that there might still be a few folks out there whose software can't read PNG files.

The most important thing to remember, regardless of the file format you decide to use, is that the Web has limited bandwidth. This means that if you create an absolutely beautiful image and it weighs in at something like 4MB, it will take forever to download on a 56K modembetter than 10 minutes. This is not to say that you

can't create images with as large a file size as you want. I am just suggesting that few Web surfers out there will have the patience to sit and wait while your 4MB image downloads. If you know that your primary audience is surfing from home with slower modems, you might want to keep your web page images under 30KB apiecea size that a 56K modem can download in a comfortable six seconds. This is an area where ImageReady can be a big help. It lets you decide how small you can save a file without sacrificing quality.

Can You Think Big? If you have some big files that you want to publish on the Web, don't fret. There are ways around the big file issue. Most surfers won't mind the wait for a big file if they have a warning. Give them a thumbnail version of the image and tell them how big the file is. This way, they can decide for themselves whether they want to spend the time waiting for the download. A little courtesy, as in all aspects of life, goes a long way on the Web.

JPEG (Joint Photographic Experts Group)

Depending on your needs, JPEG could be the best file format for you. It is great for photographs and other continuous tone (full-color) images, primarily because it lets you use 16 million colors. JPEG maintains color information but does, however, employ a

lossy compression scheme, which means that you can adjust and reduce the file sizeat the expense of the image quality.

If you're creating JPEGs for the Web, you need to work in RGB mode within Photoshop. This is reasonable because RGB is the "monitor" viewing mode, and Web images are going to be seen on, guess what: an RGB monitor. ImageReady has only one mode, RGB, which is all it needs. (You can't print from ImageReady.)

When you're working in Photoshop, choosing FileSave for Web will open the dialog box shown in Figure 24.2. I selected JPEG Low from the Preset pop-up menu in the upper-right corner. I could have chosen GIF or PNG, as well. After a short calculation, and because I had clicked the 4-Up tab at the top of the window, I can see my original image, plus the image with three different JPEG settings. The file size and download time are displayed for each image.

The original Photoshop file for this image was 1.43MB. As a low-quality JPEG, it's 29.35KB and will take about six seconds to download on a phone modemand much less time to download on a broadband connection. At medium quality, the file size increases to 50.47KB and the download time increases to ten seconds. At high quality, it's a 114.4KB file and loads in about 22 seconds. Is the quality difference worth the download time?

On the other hand, we've gone from 1.43MB down to 114.4KB. That's a tremendous difference with a relatively small loss of quality.

Once Is Good, Twice Is Not Each time you save the file as a JPEG, you lose some data to compression. This can create artifactsblocky areas or color bands in your picture. Never save a file as a JPEG a second time. If you make a conversion to JPEG, and then decide to make changes, go back to the original Photoshop file. Don't make changes and resave the previously saved JPEG. And if your digital camera produces JPEG files, be sure to resave them in Photoshop format before making any changes.

To save your file, click on the version you want to save, then click OK. The usual Save As dialog box will open, enabling you to name your document and save it where you want it, presumably in the same folder with other web page items.

Opening your file as a JPEG in ImageReady opens a similar window and the Optimization palette (see Figure 24.3). After you've selected a JPEG quality level and your other settings, click the version of the image you want to save and choose FileSave Optimized.

If you are saving a JPEG file directly from Photoshop with the FileSave As command, the first thing to remember is this: Don't. Save for Web gives you much more power and control. However, if you're in a hurry and determined to just save and go, choosing JPEG in the Save As dialog box gives you a second dialog box, like the one in Figure 24.4.

This box will prompt you for format options:

• Baseline (Standard)This is the default option, if you leave the others unchecked.

• Baseline (Optimized)This option optimizes the colors in the file. It creates a smaller file.

• progressiveExcept for very small JPEGs, this is almost a must for web work. Progressive means that your file is visible within a web browser faster and it is then refined by subsequent passes, or

  scans, as more file information is downloaded. If you select a progressive JPEG, it will automatically be optimized.

See What's Happening Always keep your web browser open when you are creating web graphics. Doing so lets you take a look at them in context. Don't be fooled by how quickly FileOpen File in your browser opens one of your files. These files are on your hard drivethey're local. When a viewer has to go out on the Web to get your pages, the process slows down quite a bit.

GIF (Graphics Interchange Format)

GIFs are another option for web file formats. Because they're limited to 256 colors, they're not as good as JPEG for continuous tone art, but they're great for line art, logos, and anything with limited color. The GIF format also lets you save files with transparent backgrounds, which is extremely useful when you are creating buttons and other round graphics. Furthermore, you can animate a GIF.

It's Okay to Peek A good way to select the file format that's right for you is to visit web sites that have graphics similar to what you want to publish. To find out what kind of file format an image is, simply click the image. On a Macintosh, Ctrl+click or click and hold the image (depending on your browser) until a dialog box appears. On a Windows machine, right-click the image. In the dialog box, choose to save the image. When you are prompted for where you want to save the image, note the file extension.jpg for JPEG, .png for PNG, or .gif for GIF. Click OK to save the file or click Cancel if you are just looking.

In Figure 24.5, I've created a simple button that I'll be saving as a GIF. Notice how much the file shrinks (from 190KB to 1.78KB) when I limit the colors in the GIF.

PNG (Portable Network Graphics)

There are two kinds of PNG: 8-bit and 24-bit. The PNG-8 format uses 8-bit color, which means that each image can contain only 256 colors. Like the GIF format, PNG-8 compresses solid areas of color very well while preserving sharp detail, such as that in line art, logos, or illustrations with type. The PNG-8 format uses a lossless compression method, with no data discarded during compression. However, because PNG-8 files are 8-bit color, optimizing an original 24-bit imagewhich can contain millions of colorsas a PNG-8 will degrade image quality. PNG-8 files use more advanced compression schemes than GIF, and they can be 10%30% smaller than GIF files of the same image, depending on the image's color patterns.