Web graphics tips for web designers

Here are some Web graphics tips and techniques for novice web designers which will help you create images that look good and are as compact as they can be... The main Web graphics formats are GIF, JPG, and PNG. It's important to know the differences and choose the best format for each images, so that pictures look good and are as compact as
they can be so they appear quickly on your site visitor's screen. Below I explain this three web graphics format. If you read this you will never make mistake to choose the right graphic format.

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 supported by all modern browsers. These files may not appear in older browsers, so using this graphics format may 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.

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.

I hope you understand now when and how you can use web graphics. If you still aren't too sure on which
format to use when see the chart below. Hope it will give you clear idea about web graphics.

    * JPEG:
          o Good:
                + Photographs
                + Game

screenshots
                + Movie stills
                + Desktop

backgrounds
          o Bad:
                + Windows

application screenshots
                + Line art and text
                + Comic strips
                + Anywhere

where fine lines or sharp color contrast is needed
    * PNG:
          o Good:
                + Text, line

art, comic-style drawings, general web graphics
                + Windows

application screenshots
                + When

accurate reproduction (lossless) is required (24 bit PNG)
                + When alpha

channel support is required
                + As a general

replacement for anything that is a non-animated GIF
          o Bad:
                + Photos,

in-game screenshots (only when quality is not important and you're looking for small files)
                +

Disappointing browser support for 32 bit PNGs from Microsoft and others
    * GIF:
          o Good:
                + Where

animations are required
                + Widespread

browser support
          o Bad:
                + Large file

sizes compared to PNG for the same quality
                + Often

limited to 256 colors (8 bit)