Related Web Works

[Image] [The Newsweekly for Macintosh Managers] [Image]

NOVEMBER 6, 1995 / VOLUME 9 NUMBER 44

Optimizing graphics for use on the Web

By Pauline Ores

Designers face new challenges in producing or converting graphics for display on the World-Wide Web: They must ensure that images offer a consistent appearance and display speedily -- regardless of the Web browser and platform being used by the viewer.

Several mainstream graphics-application vendors have recently added Internet capabilities to their products, supplementing the small handful of freeware or shareware tools that Web designers have had to rely on.

Adobe Systems Inc. of Mountain View, Calif., last month posted on-line a new Adobe Photoshop plug-in that supports more elements of GIF (Graphic Interchange Format), and Version 4.0 of Aptos, Calif.-based Fractal Design Corp.'s Painter, due this month, will let users embed URLs (universal resource locators) in their bit-mapped images. Strata Studio Pro from St. George, Utah-based Strata Inc., available now, lets users embed URLs in a 3-D image or save images in the Virtual Reality Markup Language (VRML) format used for 3-D display on the Web.

File formats face off Most browsers support two 2-D graphics file formats: GIF and JPEG. Eight-bit GIF files are as much as 50 percent larger than JPEG graphics and therefore take longer to download. However, GIF files can be interleaved, allowing browsers to display a low-resolution image that appears immediately and continually redraws until it reaches its highest resolution, offering users instant feedback. GIFs can also be made "transparent"; one of the eight-bit GIFs is displayed selectively, enabling an image to appear silhouetted or float on the page.

GIF89, Adobe's new Photoshop plug-in, supports interleaving as well as transparency. In addition, according to David Biedny, principal at Idig, a multimedia and production company in San Rafael, Calif., GIF89 "allows you to use the alpha channel to define the transparency, dropping the mask/alpha channel down to one bit and avoiding having pixels within a complex image drop out." Photoshop can also bind a Photoshop caption to a GIF-formatted file, something Biedny said "could be used to help copyright an image across the Net, especially if it could be encoded."

JPEG can support selective lossy compression and greater bit depth than GIF, but it doesn't offer transparency or interleaving. Furthermore, the additional colors in JPEG images are relevant only to users who have 16- or 24-bit display cards, and designers have no control over what a 24-bit image will look like on an eight-bit system. Netscape Communications Corp. of Mountain View, Calif., has announced that Version 2.0 of its Navigator browser will support progressive JPEG, which has not been widely adopted. Progressive JPEG provides an interleaved effect, but no current Mac applications can save files in the format.

Not surprisingly, designers' adoption of a graphics file format is influenced more by their choice of browser than the availability of Internet-savvy graphics applications. Aaron Sugarman, New York-based editor of Conde Nast Traveler Online, said he uses GIFs for maps and JPEG for pictures at his site. "The art directors want as many bits as possible, and we try to keep it down to four, five or six bits per pixel," Sugarman said. "This gives us problems with blends and also causes pixelation.

"Furthermore, users sometimes get errors with JPEG images on the commercial services, despite the fact that they claim to support that format," he said. "Our problem is that the site is so big, going back and converting all our JPEGs to GIFs would take months, and by then [the commercial service providers] have assured us that they will have resolved all of these issues."

Choosing tools Sugarman said he uses PhotoGIF, a Photoshop plug-in from BoxTop Software of Starkville, Miss. "We've set up some macros and scripts for production, but bringing Illustrator files into Photoshop does inconsistent things that can't be scripted out. Type sometimes flops and reverses, and you have to hand-tune these files.

"You also need some human calculation on the colors," Sugarman said. "Given the number of files we regularly need to process, we'd really like to be able to automate these processes. Right now we feel like monks working on illuminated manuscripts. We're hoping that [Adobe] ScreenReady will work for us."

Version 1.6.5 of DeBabelizer from Equilibrium of Sausalito, Calif., also now has interleaving and transparency support in its GIF formatting options. According to Philip Dzilvelis, producer with Novo Media Group Inc. of San Francisco, which is responsible for Toyota Motor Sales USA's Web site, "Like everyone else, we're using a combination of Photoshop for fine image manipulation and DeBabelizer for processing images.

"DeBabelizer supposedly uses the same algorithms as Photoshop," Dzilvelis said, "but we've found that it does a better job of dithering down to eight bits."

As far as getting images to load more quickly, Dzilvelis said, "it's more of a question of design than technology. We're in the process of optimizing our site, and while we think JPEG looks better at various color depths, we'll wait until all browsers can support it. Right now we're concentrating on redesigning our GIFs to use less than 256 colors."

Idig's Biedny cautioned that "excessive dithering will cause files to load much more slowly. GIFs use LZW compression, and large color fields compress efficiently with LZW."

According to Ron Meckler, principal of Re:Design of New York, "In terms of optimizing pages, I try to use what's available within HTML (Hypertext Markup Language), such as background color, and lean toward using small images.

----------------------------------------------------------------------------

Design tools for Web graphics

COMMERCIAL PRICE COMPANY FEATURES DeBabelizer $399 Equilibrium Batch processing; interleaved, transparent GIF; progressive JPEG Adobe $895 Adobe Image editing, saves Photoshop Systems Inc. in GIF and JPEG formats

SHAREWARE PRICE COMPANY FEATURES PhotoGIF $25 BoxTop Creates GIFs from Software Inc. indexed gray-scale, bit-mapped images WebMap $20 City*Net HTML map-making tool GIFConverter $45 Kevin A. Converts other image Mitchell files formats to GIF

FREEWARE COMPANY FEATURES GIF89 Plug-In Adobe Exports GIF89-formatted files from Photoshop JPEGview Aaron Giles Lets users view JPEG images without a browser Transparency Aaron Giles Creates transparent GIF images

----------------------------------------------------------------------------

HOME | NEWS | REVIEWS | FEATURES | OPINION | ENTERTAINMENT | RESOURCES | INFO

----------------------------------------------------------------------------

Copyright © 1995 Ziff-Davis Publishing Company. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of Ziff-Davis Publishing Company is prohibited. MacWEEK and the MacWEEK logo are trademarks of Ziff-Davis Publishing Company.

Maintained by Mark Simmons, msimmons@zmac.ziff.com