Graphics and Images
By: Aaron B. Copyright AaronOutpost.com

Back to Web Design Tutorials

The internet was once known as the great wait. Waiting for WebPages to load. One of the important keys I learned when designing pages professionally for businesses is, people don't want to wait around for a page to load. If it doesn't load quickly, then sometimes people will think the site isn't working and/or poor construction. Graphics can be a big contributor to this cause. Although, graphics are a great key to excellent websites. You need to keep in mind how much is too much and how to compress files to load quickly.

Graphics for the web are usually in 72 pixels per inch. Also know as 72 dpi (dots per inch) You can create graphics with higher resolution, but for web use, it is usually not necessary.

JPG - Is a glossy, 24-bit color, compression format. You can create small to large files sizes by saving at different compression levels.

Depending on what image editing program you use will determine what kind of compression jpg files will have.

GIF (Graphic Interchange Format) - A gloss-less compression format that allows you to select a palette of up to 256 colors.

GIF compressions are standard 256 and you can most normally choose how you want the palette. I use Paint Shop Pro 8.x by Jasc Software. I most generally choose the Optimized Octree. This generates a palette with the colors needed to display the image close to the original and very high compression. Standard / Web-Safe is actually the better option. This guarantee your image will be show the way it was designed. It appears the same on almost all machines but has poor quality.

Helpful Graphic Hints

• Larger graphics download slow, not everyone has high-speed internet

• Make highly compressed images

• Use thumbnails when possible

• Use ALT tags, If the user is reading and sees an image, they will at least know what kind of image is loading. The ALT tag will display a text alternative for the visually impaired or users that have a text only web browser.

Example: <img border="0" src="Image.gif" alt="Here is the Alt Message If image fails to load or for impaired users.">