The main Web graphics formats are GIF , JPG , and PNG. It's important to know the differences and choose the best format for each image, so that pictures look good and are as compact as they can be so they appear quickly on your site visitor's screen.
GIF - Graphic Information Format
GIF graphics format is best for images with only a few colors: charts, graphs, or text set as graphics. The fewer colors you use, the more efficient GIF files are. GIF files ...
- can contain up to 256 colors.
- support a feature called transparency , in which one color out of the 256 colors is set to be transparent. This keeps your graphics from looking as if they're in boxes, because the background of the file is invisible, letting the Web page's background show through.
- can be animated. Inside a single file is stored many picture frames and an index telling how long each frame should be shown. Animated GIF is treated as a standard image file, so it is loaded with the standard <IMG> tag.
- are lossless , which means the image quality is not degraded by the compression process.
- can be interlaced so they appear to fade in, from lower to higher quality, while loading. This gives your visitors something to look at while they're waiting.
- are not good for photographs - you lose quality and the files won't be compact. Use JPG graphics format for photos.
JPG - Joint Photographic Experts Group
JPG graphics format is best for images with many colors, such as photographs or scanned artwork. JPG files ...
- can contain up to 16 million colors.
- support variable compression. You can apply more or less compression to each individual image. The more compression you apply, the more quality you lose. While file sizes can be made quite small with this graphics format, you often have to compromise between file size and picture quality. Newer graphics software gives you a preview before you save - this allows you to experiment with various levels of compression to choose the best compromise between quality and file size.
- come in three types: baseline or standard, baseline optimized or standard optimized, and progressive. Baseline was designed for browsers that we'd consider to be ancient these days (such as Internet Explorer version 1). Baseline optimized offers more compression over standard baseline, and practically every browser today can read such an image. A progressive JPG , like an interlaced GIF file, builds as it downloads, going from a crude representation of the image to its finished look. While this is a nice Web graphics format, older browsers don't all support this format.
- are not good for images with only a few colors, such as text set as graphics or images with areas of flat colors. If you use JPG for these graphics, they will be larger than necessary, and look "mottled."
PNG - Progressive Network Graphics
PNG is the newest Web graphics format. PNG files ...
- are only supported by newer browsers. These files will not appear in older browsers, so using this graphics format will cause some of your Web site visitors to be unable to see your images.
- are compact and versatile and can combine the best features of GIF and JPG, such as the ability to have transparent backgrounds or the ability to contain images with millions of colors.
- are still not widely used , mostly because they're not supported by older browsers. While it's an efficient and useful Web graphics format, you may want to hold off using it until fewer people use older browsers.
When to use which?
Choosing the right Web graphics format can ensure that your images look good and appear quickly on your visitor's computer. Choosing the wrong format makes your images look bad and take forever to download.
The most common graphics mistake people make on the Web is to use the wrong graphics format for their images. But the choice is really quite simple...
- If your graphics have a lot of colors (such as a photo), choose JPG.
- If your graphics have few colors , choose GIF. When using GIF, try optimized palettes that contain only the colors used - they can cut file sizes in half.
Here's the least you need to know before choosing the most appropriate Web graphics software...
Vector and Bitmap
When you want to create original Web graphics, you can use either a vector drawing application or a bitmap painting program. Here are the basic properties of vector images and bitmap images...
What is a vector image?
Vector images are defined mathematically as a series of graphical elements that are called objects. Each object is a self-contained entity, with properties such as color, shape, outline, size, and position on the screen included in its definition. Vector programs also allow you to incorporate bitmaps into your drawings.
Since each object is a self-contained entity, you can move and change its properties over and over again while maintaining its original clarity and crispness without affecting other objects in the drawing. These characteristics make vector-based applications ideal for illustration, in which the design process often requires individual objects to be created and manipulated.
Vector-based drawings are resolution independent. This means that they appear at the maximum resolution of the output device, such as your printer or monitor. As a result, the image quality of your drawing is higher if you print from a 600 dots per inch (dpi) printer than from a 300-dpi printer.
Unfortunately, vector images aren't really very practical to use on a Web site because Web browsers can't display these kinds of images unless a plug-in or helper application has been installed on your visitor's computer. But that doesn't mean you should avoid designing your Web graphics with a vector-based program since major vector graphics software can export your work as GIF or JPG images.
What is a bitmap image?
Bitmap images, also called raster or paint images, are made of individual dots, called pixels (picture elements), that are arranged and colored differently to form a pattern. When you zoom in, you can see the individual squares that make up the total image.
Bitmaps have a fixed resolution so a bitmap looks best when you display or print it at its original size. Increasing the size of a bitmap has the effect of increasing individual pixels, making lines and shapes appear jagged. Reducing the size of a bitmap distorts the original image, because pixels are removed to reduce the overall image size.
The color and shape of a bitmap image appear continuous when viewed from a greater distance. Because each pixel is colored individually, you can create photorealistic effects , such as shadowing and intensifying color.
However, because a bitmap image is created as a collection of arranged pixels, its parts cannot be manipulated (e.g., moved) individually.
Up-to-date, graphics-capable Web browsers can display graphics saved in the following bitmap-based file formats: GIF, JPG, and PNG, without the need for special browser plug-ins. Older browsers only supported GIF and JPG file formats.
Newer bitmap painting programs support vector graphic editing. They let you create text and other objects that can be freely distorted without losing image quality.
Vector-based programs such as Illustrator, CorelDraw, and CorelXara are the best Web graphics software for creating custom text and illustrations.
Photo-editing programs such as Microsoft Paintbrush, CorelPaint and Photoshop are the best Web graphics software for working with photorealistic images acquired from digital cameras and scanners.
See Resources: Graphics Editors for a list of the most popular Web graphics software.
The best balance between depth, ease of use and price is...
 |
Ulead's PhotoImpact |
PhotoImpact is an all-in-one solution for Web page design, graphics and image editing. It offers features usually found only in programs costing 5-8 times as much...
- Edit images and create complete Web pages.
- Full array of imaging and painting tools.
- Vector 2-D and 3-D graphics.
- Over 60 exclusive special effects and filters.
- Visual Web page layout and one-click HTML output.
Whether you want to edit photos and put them online or create original bitmap images and animations, this economically priced Web graphics software offers an appealing mix of power, with an interface that's truly easy to use.
Good picture is always a compromise between how good it looks and how long it takes your Web visitor to download and see it. For more information on creating images that look good and are as compact as they can be, see Web Graphics Tips .
And a few words about banners - those graphic advertisements that you see at the top of so many Web pages. They are not so popular now as they were 4 years ago. But if you want to do some banner advertising or simply swap with another site, see Free Web Banners for information on creating your own banners from scratch or by using free Web banner generators.
| 
