This page provides a brief tutorial in summary form of Web Graphics information.
Proper format for images -- yes there is a difference
 | Original images are saved in a "bitmap" format - this provides for maximum quality and preservation. Typical file formats include windows bitmap (.bmp) and many commercial product formats. |
| A bitmap is a solid, one layer image. Do not confuse with a layered image in Photoshop or PaintShop Pro format. |
| The table below illustrates the proper way to save images for web pages... |
For each of the following images, click on the image to see the original quality image (and file format) displayed in the browser (use your back button to return).
| All linked images are 640X480 pixels | ||
 16 million colors, 901KB |
 256 colors, 231KB |
 16 million colors, 20% compression, 57KB |
| Bitmap format | GIF (Graphics Interchange Format) | JPEG (Joint Photographic Experts Group) |
 16 million colors, 901KB |
 256 colors, 17KB |
 16 million colors, 20% compression, 64KB |
| Bitmap format | GIF (Graphics Interchange Format) | JPEG (Joint Photographic Experts Group) |
| Native format, too large
for web use; not supported by all browsers. 16 million colors is also called a 24 bit image. |
Limited to 256 colors; capable of transparent and animation effects. | Up to 16 million colors; capable of variable compression. |
| Best for: | Cartoons, data graphs; flat, limited number of colors | Photographs; scanned images of paintings, multi-tone images. |
Cutting images down to size - cropping, shrinking, compressing
There are three main things to consider when cutting images down to size:
- Cropping
- Shrinking
- Compressing
Using the "bird" image from above, consider the following...
For each of the following images, click on the image to see the original quality image (and file format) displayed in the browser (use your back button to return).
|
|
|
||||||
 |
|
||||||
 |
|
||||||
 |
|
Some things to keep in mind:
| Keep the original so that you can start over. |
| Experiment with cropping and shrinking to get the desired effect. |
| Experiment with variable compression in JPEG (does not apply with GIF) to achieve best look and smallest size. |
What image tags really do -- and mostly what they don't do
This is an easy one...
Consider the following image...
The tag to display this is...
<img border="0" src="birdprepfinal.jpg" alt="Bird Picture" width="250" height="140">
Note the width and height properties. In this image, they reflect the actual size of the image as it is stored. In fact, if you omit these properties, the image would look the same.
Now consider...
The tag for this is...
<img border="0" src="birdprepfinal.jpg" alt="Bird Picture" width="112" height="65">
The height and width have been adjusted to "shrink" the appearance of the image -- not the actual image file size.
Lesson: Do not use the image tag properties of height and width IF you think you are changing the original image file size - you are only changing the appearance size.
What tools do for you -- web editors v. graphics tools
Many commercial web page development tools such as FrontPage and Dreamweaver have some built-in tools to support web page graphics. These tools include:
| Resizing |
| Cropping |
| Adjusting color, contrast |
| Rotating, flipping, etc. |
Unfortunately, they often lack the finer capabilities of true graphics editing software such as:
| Photoshop - the "professional tool" used by graphic artists. Very powerful. Takes a significant learning curve to become proficient. Relatively expensive. |
| PaintShop Pro - a good tool for graphics amateurs; imports/saves to a large number of formats; has own internal format (layered). Inexpensive (<$100); relatively easy to learn; 30 day free trial available. Includes tools for creating animated GIFs. |
Considerations:
| Spend some time to learn the tool. |
| Understand how the tool works (image format, color depth, etc.). |
| Make sure you know what you are doing -- don't depend on the tool to do it for you. |
Backgrounds -- use them wisely
Background images are often abused and misused.
Thoughts for backgrounds...
| Keep them simple. | ||||||||
| Look for:
| ||||||||
| Large backgrounds can be used (check out the background at http://dhillman.com/deepspace - the background is actually quite large (800X813 pixels) - but is only 16KB in file size. Be careful these do not get too large. |
Neat tricks...
|  Crumple
a piece of paper and scan it. The gray image on the right is from a
digital camera picture of a crumpled piece of paper. It is in JPEG
format and takes up 3KB. You can adjust the brightness, contrast, and
even color to create various effects. |
| You can create colored edges by placing a long border on the right side of an image with a repeatable design. Total image size should be about 900X50. This creates the effect of a side border. |
Buttons and other effects -- don't overdo or overwork!
Creating your own buttons is easy.
The following shows you a process for creating buttons. It assumes that you are using PaintShop Pro -- although other tools provide similar capabilities.
 Saved as a bitmap (18KB) |
Create a master blank ...
|
||||||||
 GIF version - 5KB
|
Save to the best format...
|
||||||||
 12 point Arial text (no bold) |
Set the font...
|
||||||||
 |
Create your buttons...
|
||||||||
 |
Creating rollover buttons...
|
Part of the key to creating buttons is to know how to use your graphics tool.
There are also tools and web resources for automatically creating buttons.
Image Maps - make them meaningful
I'm not going to describe how to do image maps here (go here for that) -- but I would like to discuss "good" use principles.
| Make the image meaningful -- menu bars, maps (geographical, etc.). | ||||
| Avoid general pictures or elements that are "navigationally" vague -- in other words, the image does not indicate that you are going somewhere if you click on it. | ||||
| The image (or supporting elements such as text) should provide some
indication that an image map is present. For example..
| ||||
| Keep the image map file size reasonable. | ||||
| Whenever possible, use image map tools to set up the coordinate structures. These tools are built into products such as FrontPage. |
Slideshow graphics -- too much is too much
Click for an example of a slideshow demo.
There are a variety of techniques for implementing slideshows. But there are some basic points you should consider...
| Keep the image size (width and height) consistent for all images. This means adjusting perspectives by adding borders to create consistent sizes. |
| Keep image file sizes as small as possible. Most slideshows operate by downloading all the images when the page initially loads -- the total number of images and their file sizes will add up. |
| Try to associate text or other information to EACH of the images. |
| Make sure any controls are self-explanatory and easy to use. |
Scanning and digital cameras -- they only capture, you have to edit.
Some thoughts on scanning and digital cameras...
| Capture/save to the maximum resolution that is reasonable to create
master images. For web use...
| ||||
| With cameras...shoot multiple pictures when possible. | ||||
| Avoid cropping and shrinking while scanning -- save this for later. | ||||
| Graphic editing tools that come with scanners and digital cameras are often limited in capability (e.g., the ability to convert or save to GIF or JPEG). | ||||
| Therefore...use commercial tools such as PhotoShop or PaintShop Pro. |