Using Graphics Effectively

Your graphics are an important part of your layout design. Pages with nothing but text are boring and uninviting. Graphics pull the user in.

The are two different types of graphic images:

Bit-mapped
Vector or raster

You need a separate editor for each of these types.

In a bit-mapped image, the image is represented by thousands of pixels. Examples include photographs from a digital camera, and images produced from a scanner. A scanner, for example, scans a photograph and sends the pixel image of the photograph to the bit mapped editor you are using, such as Adobe Photoshop(TM). You can then edit the pixels adding a wide variety of effects.

With a vector graphic, the image is represented as a collection of objects. There may be hundreds or even thousands of objects in the image. You can select any object and edit the object, or you can add or delete objects. A circle, for example, is represented by defining its center point, radius, outline thickness, outline color, and fill color of the circle. Other typical objects include rectangles, lines, and polygons.

Vector objects need to be edited by a vector graphic editing program, such as Adobe Illustrator or Corel Draw. The most common examples are good clipart libraries. The clipart is edited in a vector editing program and essentially has infinite resoultion in this editor. You can resize easily - something you can't do too well with a bit-mapped image. In addition, a vector editor may support a something called rendering in which the two-dimensional image is converted to a 3D image using a mathematical process - something you can't do with a bit-mapped image, which isn't expressed mathematically. For Web pages, however, you generally want bit-mapped images. The vector image is then converted to a bit-mapped image and exported and saved in a bit-mapped format. If you are using Flash, this program can take a vector image and process it to a static or animated image you can use on a Web page - and save space as well!

Let's look at the difference between the two graphic image formats:

Bit-Mapped Images Vector Images
Image stored as pixel definitions Image stored as collection of objects with object definitions
Generally large files Generally small files
Resizing image generally causes lost of resolution Resizing image causes no loss of image quality
Pixel drawing tools Object drawing tools for lines, rectangles, circles, polygons
Edit pixels or groups of pixels Edit objects
Bit-mapped file formats include BMP. GIF, TIF, PSD, and JPG Vector Graphic file formats include AI, CDR
Uses bit-mapped editor, as Adobe Photoshop(TM) Uses vector-graphic editor, such as CorelDraw(TM) or Adobe Illustrator(TM)
Best for photographs and scans Best for clipart in vector format.

Here are summaries of the bit-mapped file formats used on the web:

GIF Colors are reduced to only 256 (lossy in this sense)
Compressed, but generally larger than JPG or PNG
GIF89a supports transparency of a single color
Cross-platform support
Best for clipart, drawings
JPEG (JPG) 16.7M Color support
Lossy
Variable control of loss and file size
Small file size
Best for photographs
PGN 16.7M colors
Smaller than GIFs
Not supported well at present
Lossless

GIF Clipart, 2.4K GIF photo, 15K (256 Colors only)

JPG Clipart, 13K JPG Photo, 14K (16.7M Colors)

Notice the photo is higher quality as a JPG, while the clipart is a small file and has great quality as a GIF.

Tips for using graphics:

To use vector graphic images on web pages use one of these methods:
- Resize as necessary, then convert to bitmaps by pasting it into a bit-map editor, such as Photoshop.
- Or use vector graphic web tools as Adobe's LiveMotion(TM) or Flash(TM) to import the vector graphic, convert it to a symbol, and save it as a Flash SWF. You will only have a single frame in your Flash file. You could, however, make the graphic as a button with a link.
Specify the size of the graphic using WIDTH= and HEIGHT= in the tag. This insures the text for the page loads first (leaving room for the graphic), after which the graphic loads.
Keep graphic files small unless your client has broadband. In general use JPG for photos, GIFs for clipart.
Keep the number of colors in a GIF file as small as possible, specifying the number of colors when saving it to minimize file size.
If you want the user to see detail or a larger image, use a link from a thumbnail so they can click on the thumbnail to get the larger image.
You can also import a photo JPG to FLASH, convert it to a symbol, and then make it a button. Then save the single-frame symbol as a small SWF.
Honor the copyrights of the images you use, both clipart and photos. Get permission or pay royalties for the images you use. Just because it is easy to download an image from someone's page doesn't mean you have a legal right to use it.

Let us Help You with Your Web Site Design or Analyze Your Current Web Site...

Let us Help You Get a Great Position in the Search Engines...

Do Your Own Search Engine Positioning and Save!....

Get the
e-Book and
Sky-Rocket
Your Traffic!