Designing
Graphics
General tips to consider when you
are designing images for your web pages
Make sure your graphics are
consistent with both the tone and the look and feel of your site.
For creating and manipulating images, get a graphics program, like the
excellent shareware Paint Shop Pro, or the more expensive but industrial
strength Adobe PhotoShop.
Many sites provide free graphics and elements to use.
Bandwidth Conservation:
All the graphics on a page should ideally come in under 30K-40K. Many users
won't wait for much more than that.
Use graphical elements such as
illustrations, bullets, dividers, etc. only when they truly add value. And
reuse the same components, they will be cached and your next page will load
quicker.
Always use HEIGHT=, WIDTH=, and
ALT= tags to speed up loading and to make sure your layout stays the same, and
if the users has "image loading" turned off.
Making use of the height= and width= elements will let the text information
load quicker, showing the text before the image has loaded completely.
Since photos are often bandwidth
hogs consider providing a small thumbnail or clipart link to the larger photo
on its own page.
Using image maps? Use client-side
processing, make the clickable areas clear, avoid wasted space, and provide a
text menu for those without "images turned on".
Small buttons in a table may load faster as a navigation device than an image
map will.
Use the same palette (range of
colors) for all the images on a site. A 'browser-safe'
palette of 216 colors will look the same on PCs and Macs.
Backgrounds: Use the smallest
tiles possible for your backgrounds. A highly compressed .jpg of simple
background patterns with the right match of text color to assure readability.
Set your background color to a similar color so that those without
"images turned on" will still see your text.
Interlaced Gifs. An image which
appears at low-res., and slowly becomes more detailed is most likely an
interlaced GIF file. Interlacing allows a user to get an idea more quickly of
what an image will look like.
Other formats, such as progressive JPEG files, can support this feature but
are less common.
Interlacing should be avoided with transparent gifs If when viewing a
transparent GIF file, it appears "messed up" check to see if it has
been interlaced. Some browsers are known to have problems displaying
interlaced transparent GIF files. To prevent this problem, simply use the
non-interlaced option when creating transparencies in your GIF images.
Controlling image file size. Large
images are bandwidth hogs, There are many people who will not stick around
waiting for a large image to load, preferring to move on to a faster loading
page. If you don't want to scare off viewers (and who would?) avoid these
large files, or use a small thumbnail image and link to allow viewers a choice
in whether or not they want to spend the time to download and view the large
image file.
Shrinking image files. A scanned
image will have a dark region which appears to the naked eye to be
"black." However, the actual file contains a thousand graduations
between "jet black" and "raven black" and all those
colors have to be saved in the file. This is for all colors in the image not
just black. By reducing the "colors" in a image you can actually
make it smaller and load faster.
Image formats. Currently, there
are two main types of image formats on the web. To use them most effectively,
it is important to know the features and limitations of each.
GIF
Limited to 256 different colors, support for features like interlacing,
animation, and transparency, good for clipart, text, lineart.
JPEG
Lifelike color, Variable compression, Good for photographs and picture quality
images.