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 websites have better systems than our audience has.

Some visitors to your website 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.

---

See also...

Web Graphics
The best Web graphics tools, usable by the beginner, but packed with plenty of higher-end features for the expert.

Web Graphics Formats
Main Web graphics formats - when to use which?

Free Web Banners
Creating your own banners from scratch or by using free banner generators.

• Overview
• Site Content
• Search Engine Optimization
• Web Design
• HTML Codes
• Web Graphics:
• Web Graphics Formats
• Web Graphics Tips
• Free Web Banners
• Domain Names
• Web Hosting
• Online Website Builders