Graphic Design

GIF is your best Web option for images with flat, solid colors — the sort of images you normally create in vector drawing programs such as Illustrator. Of course we’d love to put our Illustrator images on the Web in their original vector form, but for the most part that’s not possible (but see SVG lower down in this table). So we export our vectors to raster formats like GIF or PNG for the Web. GIF is rarely a good choice for non-Web use.

Technically GIF and its LZW compression algorithm are “lossless,” but since it supports indexed color only (8-bit or less), you often have to permanently throw away image data prior to (or in the process of) exporting your master file as a GIF. Don’t be confused by Photoshop’s Save for Web options for GIF, where you’ll see a “lossy” checkbox: that just rearranges the pixel patterns slightly, prior to exporting the GIF, to enhance the compression. GIF being a “lossless” format means that, unlike with JPEGs (a lossy format), you could possibly open a GIF repeatedly, edit it, and re-save it back out again without necessarily degrading it. That’s not ideal, unless you really know what you’re doing. It’s generally best to go back to the master file — often a PSD — for editing, and then re-export the GIF.

For Web, digital camera storage, and stock photo dissemination. (By the way, this latter use is counter-intuitive, since it’s a lossy format and stock photos are often intended for high-end prepress work; but in this kind of use the files are so huge, and the compression applied so minimal, that there’s no significant data loss.) But for everyday use — which generally means in Web development — the lossiness is a major issue. The tradeoff is between file size and quantization artifacts. Typically JPEGs are 24-bit RGB files. There are many variants and choices to be made in exporting JPEGs. Many people save JPEGs from Photoshop’s built-in “Save for Web” dialog, but there are lots of other programs — including Web-specific graphics applications like Fireworks — that can save JPEGs. Each has its own vagaries. Be aware that the JPEG “quality” scales (0–10, 0–100, or whatever) in these programs have no universal meaning and are not standard across programs; they’re only meaningful for comparisons within the same program. Also be careful not to edit JPEG files if at all possible; go back to the original master file (PSD, TIFF, or whatever) for editing and then re-export a new JPEG with your changes. JPEG compression always involves data loss and degradation; editing JPEGs is just corrupting the corruption — it’s degrading!

Portable Network Graphics. Relatively recent substitute for GIFs (and some JPEGs) online. Many technical advantages, such as…

• Lossless compression (which means you could use it as an editable format, although you probably shouldn’t in most cases).
• Multi-bit transparency map (alpha channel), even for photo-type images.
• Metadata for color management (gamma and ICC color profile), although this is something of a tease since most browsers don’t support those things.
• Can hold either RGB data (like a JPEG) or indexed-color data (like a GIF) — but not CMYK, since that’s designed for the Web, not for print.

Unfortunately, there are still a fair number of older browsers in use that don’t support PNG’s alpha-channel transparency; and most browsers don’t support color management at all, or have it turned off by default. This makes the use of these features by Web creators problematical. By the way, the Web-graphics creation program Fireworks uses a kind of PNG as a native file format; but it may contain vector and animation data, which browsers can’t read from a PNG. Web creators should be careful to distinguish between that master-file format and the program’s Web-export “flat PNG” format. PNG’s use is growing slowly over time, especially as newer browsers come into play. It’s already a reasonable replacement for many GIFs (but not for animated GIFs); but for photo-type images, JPEG will usually be more efficient.

Scalable Vector Graphics. Wouldn't you love to put flat-color or other simple graphics (like logos and diagrams) online in compact, scalable vector form? The W3C has approved this Adobe-sponsored XML derivative. Not really usable yet in most real-world projects, because browser support is still spotty — but improving. Because vector-based images are not made up of a specific number of dots, they can be scaled to a larger size and not lose any image quality. If you blow up a raster graphic, it will look blocky, or "pixelated." When you blow up a vector graphic, the edges of each object within the graphic stay smooth and clean. This makes vector graphics ideal for logos, which can be small enough to appear on a business card, but can also be scaled to fill a billboard. Common types of vector graphics include Adobe Illustrator, Macromedia Freehand, and EPS files. Many Flash animations also use vector graphics, since they scale better and typically take up less space than bitmap images.

Vector graphics are computer graphics images that are defined in terms of 2D points, which are connected by lines and curves to form polygons and other shapes. Each of these points has a definite position on the x- and y-axis of the work plane and determines the direction of the path; further, each path may have various properties including values for stroke color, shape, curve, thickness, and fill. Vector graphics are commonly found today in the SVG, EPS and PDF graphic file formats and are intrinsically different from the more common raster graphics file formats of JPEG, PNG, APNG, GIF, and MPEG4.