Before you even start creating that killer graphics for your site, make sure that the color your using will show up the same as in the browser. Unless your using the latest version of Photoshop, Fireworks, PaintShop Pro or any image editing software, you will need to use a color swatch that match the 216 color range of most browsers.

These are the 216 colors that the usual browser uses in its palette. By using these colors on your web pages, you can be assured that the viewer will see your images exactly as you intended. If you don't use the same color, the browser will use it's default color.

Loading the color cube into Photoshop's  color picker:
กก

back to top

Anti-aliasing smoothes out the jagged edges between solid colors. Because the process adds more intermediate colors, the image becomes much less compressible.

If you use any other angle or curve, anti-aliasing becomes a necessity.

anti-aliased	non-aliased	anti-aliased	non-aliased

back to top

The use of tables to control the layout of page elements is another workaround that designers must use to obtain the results they want. By pouring text and images inside tables with borders turned off, you can better control where everything is on your page.

Almost all of the sites on the web today utilizes tables in their image and page layouts. Most of them use nested tables for even more layout control. Even this site uses tables to layout it's contents.

Be careful when editing nested table in HTML. Hit the wrong tag and your page will go haywire, and that can drive you mental just trying to find out which one.

back to top

Pixel spacer-

Because of current HTML limitations, site designers must resort to all sorts of workarounds in order to have control over the layout of pages. The single-pixel GIF is probably the most significant of these workarounds.

They are usually used to give a space in between images or text. They can also be used repeatedly as an image fill if your graphics contains the same color as the pixels in between the other graphics. This will not only make loading the image faster but will also save you on bandwidth use.

back to top

When working with photographic images on your web site, it's best to use the JPEG format. Remember that, unlike GIF, JPEG is a lossy process. The image will not look the same as the original after compression. On the Web, you want to use the highest compression to keep file sizes down.

One thing to remember, when you're rendering you're images, try not to use the sharpen filter or tool too much. This will increase your image file size. Also, keep away from the color RED as much as you can if your planning to save your images in JPEG. The color red is the hardest color to compress. If you compress it too much, the color edges will wash off, on the other hand if you want to keep it clear, you may have to opt for a higher file size for your image.

SAMPLE JPEG COMPRESSION VALUES
100%	75%	50%	25%

back to top

It's a good idea to have an understanding of the GIF format's compression algorithm before creating your images. If your using a big image like a portrait or a landscape image, you're better off with jpeg. On the other hand if your graphics demands sharpness and contains a lot of lines, then GIF is the better choice. Check out the samples below.

SAMPLE GIF COMPRESSION VALUES
216 color	64 color	16 color	4 color

back to top

It's simple to add animation to your web pages. While this may spice up the look of your pages, it's important to pay attention to file size.

No matter how cool you think it is, your visitors probably won't hang around to see your 200k animation. Keep the image size small by working with as few frames as possible.

back to top