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.

Color Psychology in Marketing

On the internet we don't deal with face to face selling. The internet is a visual and psychological medium. The words, or sales copy, on your website have by far the greatest psychological impact on your visitors and thus becomes your most important communication and sales tool.

But another important psychological aspect of your website that is often overlooked are the colors. Yes, that's right... I said colors.

Just as you use words to express yourself, colors can be used as an expression as well and are a language all on their own.

The background color of your website, the color of your header, the color of your text, headlines and sub-headlines etc. can all have a psychological impact on your visitors.

Here is a list of some of the common colors and what type of psychological emotion they invoke in people:

RED is associated with love, passion, danger, warning, excitement, food, impulse, action, adventure.

BLUE is associated with trustworthiness, success, seriousness, calmness, power, professionalism.

GREEN is associated with money, nature, animals, health, healing, life, harmony.

ORANGE is associated with comfort, creativity, celebration, fun, youth, affordability.

PURPLE is associated with royalty, justice, ambiguity, uncertainty, luxury, fantasy, dreams.

WHITE is associated with innocence, purity, cleanliness, simplicity.

YELLOW is associated with curiosity, playfulness, cheerfulness, amusement.

PINK is associated with softness, sweetness, innocence, youthfulness, tenderness.

BROWN is associated with earth, nature, tribal, primitive, simplicity.

GREY is associated with neutralality, indifference, reserved.

BLACK is associated with seriousness, darkness, mystery, secrecy.

You can use the above as a guide when choosing colors for your website. It really boils down to your target audience and what psychological message you want to convey in colors.

Blues and white backgrounds work best for business sites. Maternity sites should consider some pink. Golf or lawn sites sites should consider green. Food sites should consider red, etc.

There are also numerous shades of the same color that you can use too. Here a link that lists 216 colors that work in all browsers: http://www.geocities.com/webtvbeth/hexchart.html

It also boils down to common sense too. As far as using colors in text, black text on white backgrounds may be dull but it is the most readable and pleasing to the eye.

Yellow text on white background is not only unreadable, but causes eye-strain which will have people leaving your site quickly. Nothing will lose sales faster than eye-straining text.

Here's a link for a "color wheel" that shows which colors compliment each other, and which ones don't: http://www.saumag.edu/art/studio/chalkboard/c-wheel.html

In conclusion, not only can the sales copy on your website have a psychological impact with words but the colors you use can as well.

Use them wisely...

Colors that sell

Colors create emotions. This can sometimes mean the difference between loosing or making that sale. Color is a powerful psychological trigger. It creates strong emotions which can sometimes mean the difference between loosing or making that sale. So how do we know what colors to use?

The following are some associations people make with certain colors.

Reds: Positive associations: Love, warmth, excitement, passion, food Negative association: Danger, anger.

Blues: Positive associations: Power, professionalism, trustworthiness, calmness Negative associations: Boredom, sadness

Greens: Positive associations: Nature, life, money Negative associations: Decay, toxicity, illness

Oranges: Positive associations: Affordability, creativity, fun, youth Negative association: Lack of quality, cheap

Purples: Positive associations: Royalty, luxurious, fantasy, dreams Negative associations: Nightmare, craziness

Each color has negative and positive associations with them so you should use colors in your designs in a way that is not overwhelming and steers the mind of the viewer towards the positive associations rather then the negative ones.

Naturally you don't have to use one colour only to get a certain message across, you will most likely want to use a combination of colors or a color scheme.

Picking your color scheme.

You should be aiming to create a certain mood when picking your color scheme. Much of this is achieved by the color's saturation or in other words how bright your colors are. For example the blue you are using on a site for kids may be a lot brighter then the blue used on a site wanting a professional image.

Some tips to remember:

* Your page should have one dominant color, with other colours drawing the eyes to particular areas of the page.

* For a harmonious feel choose colors from the same family as your dominant color. Pick 2 or 3 colors in different shades of the same color.

* For a brighter image choose complimentary colors - colors opposite each other on the color wheel, for example blue and orange.

Other useful tips:

* Know who your target audience is. For example a site aimed at bargain hunters would want to use different colors to a site aimed at a wealthy luxury seeking audience, even if the product is the same one.

* Pay careful attention to magazines, particularly the advertisements in them. They were created by professionals and you can learn a lot from them.

Learn to use colors right and it may just give you the edge you need over your competition.