Speedy online portfolios

Whether you’re fresh out of design school or a veteran creative professional, a great online portfolio can lead to jobs and clients. But don’t agonize over software choices (Flash? HTML?) while ignoring a crucial technology issue: how quickly your site downloads. Try these image-massaging techniques to shave seconds off its download time.

Set a Speed Goal

All online portfolio images, whether project artwork or interface designs, should be optimized—that is, transformed into a Web-readable format that balances image quality and size. The easiest way to optimize is to apply a preset in Adobe Photoshop’s Save For Web window. However, those presets may not compress the file enough, so you may also have to shrink your image’s dimensions. But you don’t have to accept postage-stamp portfolio images if you optimize your work manually.

A realistic speed goal is 10 seconds per optimized page. To gauge whether your site meets that goal, examine each portfolio piece and your interface design file in either Photoshop or Macromedia Fireworks. (I’ll refer only to Photoshop in the rest of this article, but Fireworks offers the same options.)

Open an image file. Select File: Save For Web, click on the arrow button at the top of the resulting window, and select 56.6 Kbps Modem/ISDN as your target for size and download time. (This may seem slow, but it’s a common speed for many prospective viewers.) Your portfolio images deserve at least half your speed goal, or five seconds.

Select the Best File Type

The optimization method you should use depends on the image’s ideal final file type. Files containing mostly solid-color objects are best saved as PNGs or GIFs; PNGs are usually smaller and have higher quality than GIFs. Continuous-tone files, such as photographs, are usually best saved as JPEGs, though you can save some as PNG files.

To determine the proper format quickly, open a file, go to Save For Web, and click on the 4-Up tab. For each optimized display window, select a different default preset from the Preset menu: JPEG, PNG-8 128 Dithered, or GIF 64 Dithered, for instance. Doing so immediately reveals the preferred format and gives the ballpark number of colors your image requires.

Optimize PNG and GIF Images

The more colors a PNG or GIF file contains, the larger its file size. When Photoshop optimizes a file, it decreases colors by determining how frequently each color appears (See screenshot). As you decrease the number of colors in the palette, the software throws out the least-used ones. The trouble comes when you have a print project with spot color. The standard optimization quickly eliminates critical colors. To keep the spot colors, you have to use a bigger-than-necessary palette. You can prevent this palette bloat by locking spot colors.

To lock a color in a palette, open the image in Save For Web, select the eyedropper tool, and click on a pixel of the critical color in the optimized version. Click on the Lock icon at the bottom of the color table. A tiny symbol will appear on the locked color. Repeat for all critical spot colors, and then decrease the number in the Colors box until you reach the minimum acceptable number.

Color artifacts—random color pixels caused by factors such as scanner dust or sharpening—can needlessly pad your palette. Examine the palette for artifacts and delete them individually by highlighting the color and then clicking on the trash-can icon at the bottom of the table.

You may need a few variations of a critical color for antialiasing purposes, or to delete a range of color artifacts that antialiasing created. To select a range of colors for locking or deleting, open the Color Table drop-down menu and select Sort By Hue. Shift-click on the range of colors, and then lock or delete them.

Weighty Alpha Channels

Some elements of a graphic may be more important than others. For example, when you optimize a two-page spread, there’s no need to maintain readability in running text. By saving an alpha channel of the important sections, you can use a technique called weighted optimization, which forces Save For Web to pay more attention to specific sections of the image.

In Photoshop, create a selection of the most important area and save it as an alpha channel. Now choose File: Save For Web. In the Preset section, the second drop-down list on the left is the Color Reduction algorithm. Next to it is a small mask icon. Click on this and select your alpha channel from the Channel drop-down list. Your color-reduction weighting changes to pull the maximum number of colors from the selected area, ignoring all but the locked colors outside the mask.

Optimize JPEG Files

There are fewer variables in optimizing a continuous-tone image, but you can still drop pixel poundage when you save it as a JPEG. Begin by downsampling (making the file smaller in resolution and dimension) before you optimize image quality. Caution: downsampling throws information away permanently.

To downsample, go to Save For Web, choose JPEG from the first drop-down menu, and click on the Image Size tab. Select Constrain Proportions, and under Quality, select Bicubic. Resize the image by typing a new width or height in pixels, or a fixed percent. Click on Apply.

Sixty percent is a good Web JPEG quality, but you can set Quality as low as 45 percent. Select Progressive to let viewers see the image build, and to slightly decrease the image size.

You can use weighted optimization for JPEGs, too. Say you’ve photographed a CD cover and inserts; the object quality is more important than the background. Save a selection of the artwork as an alpha channel. In Save For Web, choose the artwork’s preferred setting in the Quality input box. Click on the Mask button to the right of Quality. Then select the channel you saved. In the Quality bar, drag the arrows to set the quality range for the area outside the mask. Click on OK.

Optimize Your Interface

If you’re just beginning your site design, you can use preemptive strategies that guarantee a supermodel-slim interface. As you select colors and create your interface, open the file in Save For Web. Use the PNG optimizing techniques to build a master palette that contains the colors in your design. You’ll see immediately whether your design suffers from color bloat.

Save your master palette by selecting Save Color Table from the Color Palette menu, and you gain another optimizing benefit. When you update your portfolio site, you can load the master palette and select colors from it to build new artwork, maintaining color consistency and small sizes.

Optimizing a site’s interface is slightly different from optimizing portfolio samples. First, you slice the interface into smaller pieces so that it loads more efficiently. ImageReady, an application linked to Photoshop, has a slicing tool. Open it by clicking on the Edit In ImageReady button in Photoshop’s Save For Web window. Once sliced, the pieces must share colors to avoid color shifts, particularly at the slices’ seams.

To make several slices share a common palette, you use ImageReady. Use the Slice Select tool to choose the slices that should share a palette. Go to Slices: Link Slices For Optimization. Group-optimize the slices in ImageReady’s Optimization palette. If you change your mind (or change your colors), all the linked slices will change together.

Fast Equals Fair Shake

There’s no guarantee that your portfolio will land you a job. But with careful optimizing, you can be sure that a viewer will see enough of your work to judge you fairly.

Tip: Faster Flash

If you’ve built your portfolio site completely in Flash, you don’t need to optimize the interface. Flash creates vector art that’s already optimized. But you’ve probably imported your portfolio art as bitmaps. If you didn’t optimize that art before importing it, there’s no need to return to the original application and reimport each file—you can adjust JPEG quality right in Flash. Press Command-L to open the library, and control-click on a JPEG file to bring up the Properties menu. Deselect Use Imported JPEG Data, and a Quality input box will appear. Enter a level (from 0 to 100). Click on Test to see the visual result in the dialog box and to get a readout on the file-size result. Click on Update when you’re satisfied.

[ Cynthia Baron is the technical director for the Department of Visual Arts and the Multimedia Studies program at Northeastern University in Boston, and she is the author o f Designing a Digital Portfolio (New Riders, 2004). ]