Web Graphics Tips

Here are some Web graphics tips and techniques that will help you create images that look good and are as compact as they can be…

Choose the right graphics format

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.

For more information see Web Graphics Formats.

Optimize GIF files

When saving your work as a GIF file, use optimized palettes that contain only the colors used – they can cut file sizes in half. Newer graphics software gives you a preview before you save – this allows you to experiment with the number of colors to choose the best compromise between quality and file size.

JPG compression

Compression and quality will vary from image to image, so when saving your work as a JPG file, experiment with various levels of compression to choose the best compromise between quality and file size. For example…

Quality: 80 Size: 4260

Quality: 30 Size: 2026

Quality: 10 Size: 1077

Raising the JPG compression from 80 (the first image) to 30 (the second image) cuts file size in half, yet the loss of quality is not too obvious. The third image is saved with JPG compression set at 10, and while the file is only 1K, there’s a clear loss of image quality.

Different programs use different numbers for JPG compression, but generally, the higher the number, the higher the quality and the bigger the file size.

Web safe colors

One of the biggest ironies in Web development is that most of us creating Web sites have better systems than our audience has.

Some visitors to your Web site are using computers that can only display 8-bit color (256 colors). Others have newer systems that include 16-bit or 32-bit video cards, but they don’t even know they can check or change their settings from 8-bit! This means they can’t see every color in the spectrum like you can, and that’s where the Web safe colors come into play.

Web safe colors are also colled the browser-safe palette, the Web palette, the color cube, or the 216-color palette. Regardless of the name used, it always refers to the same set of colors. This palette is composed of 216 fixed colors that are universally recognized by browsers and operating systems, even on 8-bit systems.

The Red, Green, and Blue settings of Web safe colors are always some combination of the values 0, 51, 102, 153, 204, or 255 (00, 33, 66, 99, CC, or FF in HEX). An 8-bit browser can’t display any colors outside of the safe palette, but it doesn’t simply shift the colors to the safe palette, it uses dithering.

Dithering is the process of sprinkling two or three browser-safe colors to simulate the non-safe color in your graphic. When the dithering process appears in a solid color, it will cause your images to look unprofessional, and unattractive. Here’s an example…

The first image shows dithering on non-safe colors. The second image was created using Web safe colors, and even in 8-bit mode, the browser displays it without dithering.

Dithering only looks bad on solid colors; it is actually necessary on continuous tone images displayed on 8-bit systems.

Anti-aliasing

Because images are created using pixel, gridded squares, curved lines and text can appear jagged. The distinct division between pixels is called “alias,” so many graphics programs use a technique called “anti-aliasing” to create the illusion of smoothness.

Curved shapes and text should always be anti-aliased to maintain a clean and presentable look. Note that more colors are required to create the smooth look. In the image below, you can see the difference between aliased (left) and anti-aliased (right) text…

“Halo effect”

GIF files support a feature called transparency, in which one color out of the 256 colors is set to be transparent. If your GIF has a background that is much different from where it will appear on your page, making the background transparent after anti-aliasing will leave what is known as a “halo effect” around the object.

To prevent this, design your graphic objects over a background color close to your Web page background, and then define the background color as transparent.

IMG tag

Allways use WIDTH and HEIGHT attributes to declare the dimensions of the image. This will allow the browser to allocate the proper space on the page for the image to load in to, allowing text below the image to be rendered while the picture is still downloading.

Use ALT tags on graphics. ALT text appears before the image does, or in place of the image for users who have turned graphics off for speed. If you don’t use ALT text, then users may just see a bunch of boxes with no explanation of what they are.

If you use graphics as link anchors, adding a BORDER=”0″ attribute will make the border invisible instead of colored as a normal link would be.

Web Graphics Format

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 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.

From : buildwebsite4u

Web Graphics

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. For more information on this, see Web Graphics Formats. 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.

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.

From : buildwebsite4u