Exporting Images for the Web






Exporting Images for the Web

The images that appear on Web pages are almost always stored as one of two main types of file: GIF or JPEG. Sometimes, they’re stored as PNG files, a new and improved type of file, but that type is still rarely used. To make your image viewable on a Web browser, all you have to do is make sure to save a copy of the image as one of these file types.

To create a Web file from your image, you can go either of two ways:

  • Save the image as a particular type of file (choose File→Save As or File→ Save Copy As, as we describe in Chapter 1).

  • Export the image to a particular type of file.

Exporting takes you immediately into an optimizer dialog box for that type of file, where you choose features and tradeoffs.

Remember 

Always store your image as a Paint Shop Pro file before you create Web image files from it. Paint Shop Pro files retain lots of features that are lost when you store an image as a Web image.

Choosing Features And File Types

Each file type has its own advantages and features. Figure lists attributes you may want, and the file type or types that are generally best to use. Best considers both image quality and speed of downloading (file size).

Figure: Images, Image Features, and What File Types to Use

Image Attributes

File Type to Use

Notes

Is (or is like) a photograph

JPEG

Color photographs are much smaller in JPEG than in GIF.

Uses patterns or textures

JPEG or GIF

More complex patterns or textures are better as JPEG.

Uses mainly solid colors

GIF or PNG

Solid-color images, like cartoons or text, often have thin or sharp edges, all pixels of which are entirely preserved in GIF or PNG.

Has transparent areas

GIF or PNG

Transparency lets the page background show through (see Figure).

Fades in during loading

GIF, JPEG, or PNG

Fade-in (progression) is an optional feature.

Click To expand
Figure: Transparency, a popular Web feature, allows this slanted-text image to float over a Web page’s background image.

Creating GIF Files

GIF files are the most widely used graphics files on the Web. They offer certain popular features, such as transparency, but are also limited to 256 colors. To export a GIF file from your image, follow these steps:

  1. Choose FileExportGIF Optimizer.

    The GIF Optimizer dialog box (the optimizer) appears, containing five tabs of settings that we cover throughout the next few sections. The optimizer has before and after preview windows (left and right, respectively) that show what effect your choices have. To zoom in or out, click the Navigation icons. Click the magnifier with the + to zoom in, or the one with the – to zoom out.

  2. Click the OK button.

    The familiar Save As dialog box appears.

  3. Choose a filename and folder for the file and click OK.

Tip 

You can (and should) make image files smaller so that they download faster; see the section “Reducing download time,” a little later in this chapter.

Creating Transparent Areas

To prepare an image to have transparent portions on the Web, first save your image as a Paint Shop Pro file. Then choose any one of the following alternative approaches to mark a transparent area — whichever approach seems easiest to you:

  • Color: If all the pixels in the area you want to become transparent are roughly the same color (a white background, for example), you don’t need to do much more in preparation. Just make sure that your chosen color does not appear in any pixels where you don’t want transparency, such as the whites of people’s eyes. If the color does appear elsewhere, try one of the two following approaches instead.

  • Selection: Select either the object that you want to be visible (opaque) or the background that you want to be transparent.

  • Transparency: If the object (your logo, for example) that you want to be visible (opaque) isn’t already on its own layer or layers, select it and promote it to a layer. On the Layer palette, turn off the visibility of the background layer and any other unwanted layers, and the transparent portions of the logo layer are apparent (display a checkerboard pattern).

Tip 

To have edges of a selected area blend gradually into the Web page’s background, contract the selection by a certain number of pixels (4, for example). Then feather the selection by that same number of pixels. (Refer to Chapter 12 for help with contracting and feathering a selection.)

A tab in the GIF Optimizer dialog box lets you translate your chosen area into a transparency. In the GIF Optimizer dialog box, click the first tab, Transparency. This tab asks “What areas of the image would you like to be transparent?” Your choices are shown in this list:

  • None: Choose this option if you want no transparent areas whatsoever.

  • Existing image or layer transparency: Choose this option if your image already has transparent areas (appearing as a gray checkerboard pattern) that you want to remain transparent on the Web page. This is the Transparency approach in the preceding bulleted list.

  • Inside the current selection: Use this option if, using the Paint Shop Pro selection tools, you have selected the area (the background, for example) that you want to become transparent (the Selection approach in the preceding bulleted list). If you have selected instead the area that is to remain opaque, choose Outside the Current Selection.

  • Areas that match this color: Choose this option (the Color approach in the preceding bulleted list) if the areas you want transparent are all the same color. If the color that is already displayed in the adjoining color swatch is not the one you want to make transparent, move your cursor outside the dialog box, over the image, and click any area of your chosen color. The result appears in the right preview window. Increase the Tolerance value to make a wider range of similar colors transparent or decrease it to narrow the range of colors made transparent.

Choosing Image Fade-In

As GIF images download, they build gradually onscreen. You can choose whether they build from top to bottom or fade in from fuzzy to increasingly detailed. For small images that download quickly, the choice doesn’t matter much. To choose a method, click the Format tab.

On the Format tab, choose Non-Interlaced if you want the image to build from top to bottom. Choose Interlaced if you want the image to fade in. Leave the option labeled What version do you want the file to be? set to Version 89a unless someone specifically requests a file of Version 87a.

Reducing Download Time

For GIF files, you can reduce download time in two ways: Reduce the physical size of the image, and reduce the number of colors in it. (We tell you how to resize in Chapter 11.) Removing unused colors saves time, which makes sense — why send 256 colors across the Internet when you can send only 40?

To reduce colors, select the Colors tab of the GIF Optimizer. You have several options:

  • How many colors do you want? The lower the number of colors, the quicker the file downloads. Take out too many colors, and the image may start to look grainy or choppy. Experiment with this value, setting it as low as you can until you find something acceptable in the preview window.

  • How much dithering do you want? It sounds like if you set this option high, Paint Shop Pro would just waste your time, saying “Oh, I don’t know — what do you want?” In reality, though, if you have removed a bunch of colors, this setting controls how much Paint Shop Pro attempts to simulate those removed colors by filling them in with the colors it does have. That helps to make a low-color image look smoother, but at high values it may add weird moirй patterns or make it look spotty. Again, experiment to find the right value for you.

  • What method of color selection do you want to use? There are only two you need to be concerned with:

    • Existing Palette: Uses the colors in the original image, although they may not look right on other computers.

    • Standard/Web-safe: Ensures that the image looks the same on all computers, although it may not look quite like what you originally created.

When you’re done selecting all these options, you can select the Download Times tab to see a chart of how quickly your image loads at various speeds. People with modems are generally running at 56 Kbps; unless you know for a fact that the people who will be viewing these images have something other than a modem, assume that they use a modem.

The GIF Wizard

Alternatively, you can choose to click the Use Wizard button at the bottom of the GIF Optimizer dialog box. The GIF wizard asks you five questions dealing with palettes, backgrounds, and quality, all of which we detail earlier.

Creating JPEG Files

JPEG files tend to be smaller than GIF files for many kinds of images, so they download faster. The main tradeoff is that JPEG files are lossy. They lose some detail in your original image, and the clean lines of text can look fuzzy. You can choose how much detail to trade off for a reduction in file size, however.

The second tradeoff is that JPEG files can introduce artifacts: blurs, spots, and rectangular blocks that weren’t present in the original image. Again, however, you can choose how many artifacts you’re willing to live with to get a smaller file.

To export to JPEG, follow these steps:

  1. Choose FileExportJPEG Optimizer.

    The JPEG Optimizer dialog box appears. It has three tabs. It also has before-and-after preview windows (left and right, respectively) that show the effect of your choices. To zoom in or out, click the magnifier icons. Click the magnifier with the + to zoom in or the one with the – to zoom out. To view different parts of your image, drag in a window.

  2. Click the Quality tab to trade off file size for quality.

    Adjust the Set Compression Value To __ value box to a value from 1 to 99. Higher values make the file smaller, but give it lower quality. You can see changes in the file size under the right preview window, in the line Compressed: __ bytes. As you can see in Figure, you can save lots of time with comparatively little loss in image quality.

    Click To expand
    Figure: The original image of William’s lovely wife, Gini, took 3 1/2 minutes to download at modem speed; after some compression, it can be seen in 7 seconds, and she remains as cute as ever.

    Technical Stuff 

    A menu offers Chroma Subsampling options. This is deep juju that tells Paint Shop Pro when to average the color information for any given block of pixels, and the best subsampling approach is a subject of debate among graphics professionals. To make things simple, we just say that you should go with the default value (unless you feel like experimenting).

    To see estimates of how fast your file downloads, depending on the viewer’s Internet connection speed, click the Download Times tab. A table there gives estimated download times for various connection speeds. Unless you have specific knowledge that the people who will view this image have anything faster than a modem, always assume that they’re running at 56Kbps.

    Tip 

    If you can’t get your image to download fast enough, don’t forget that resizing, as shown in Chapter 11, saves lots of time. Do people really need to see a poster-size picture of your baby?

  3. Click the Format tab to control how the image fades in.

    JPEG files normally assemble themselves from top to bottom as they download to a Web browser. If you would rather have your image fade in from blurry to detailed, choose Progressive on this tab. Otherwise, leave the choice set to Standard.

  4. Click the OK button.

    The familiar Save As dialog box appears.

  5. Choose a filename and folder for the file and click OK.

The JPEG Wizard

Interestingly enough, the JPEG Wizard is available at the bottom of the JPEG Optimizer, but it involves clicking more times than the regular JPEG Optimizer. Our advice is to skip the wizard and just use the Optimizer, which allows you to see your download time in one click, as opposed to three.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows