An Introduction to Images for
Web Publishing by Nancy Shaw - OutFront
Moderator
The old cliché, "A picture is worth a thousand
words", is very applicable to web pages. However,
before you get carried away with putting images on your
page, remember they can take up a lot of space which
may cause a page to load slower. If photos and graphics
are done properly and file size kept small, they will
add spirit to your page, and won't have an adverse
affect on load time.
There is much more to preparing an image for web
publishing than meets the eye. File size is critical,
and quality is essential. Currently there are two main
graphics file types used on web pages, GIF and JPG.
GIF - pronounced jiff or giff (hard g) stands for
graphics interchange format, a bit-mapped graphics file
format. GIF supports color and various resolutions. GIF
files use 256 colors or less, can be animated, and
generally display edges, lines, and details more
clearly than JPG files. Use GIF files for images where
edge clarity and overall sharpness are needed, for
small size images such as buttons for navigation, black
and white images, animations, and transparent images.
Note: This last feature alone can create some very
interesting visual effects on a web page.
JPeG - Short for Joint Photographic Experts Group, and
pronounced jay-peg. JPEG is a lossy (it loses quality
as it is compressed) compression technique for color
images. Although it can reduce files sizes to about 5%
of their original size, some detail is lost in the
compression. JPG files should be used for photographs,
images that should be natural looking, when a large
number of colors is needed or great detail, or for
images with large dimensions.
In preparing a graphics file for use on a web site,
there are several things to keep in mind. How an image
is scanned to begin with will help control the overall
size of the file. For a photo that will be used
strictly on a web page, scanning at 150dpi is
sufficient. The higher resolutions only make a
difference when printing. Also cropping anything on the
edges that isn't essential to the image will make the
image smaller in dimensions and file size. Compression
when saving the file will also decrease the file size.
You may need to experiment with the amount of
compression. Note: Save your original image with no
compression, and give subsequent tests a new name.
Also, remember that each time you make changes and
re-save a JPG, additional compression is applied,
eventually resulting in very poor quality.
Next take a look at art work or simple graphics. These
can be logos, clip art, or combinations of art and text
that can be made into a graphic image. Usually these
files are GIF images. When wanting to reduce file size,
remember that GIF images are saved in horizontal rows.
A GIF image with horizontal stripes is generally
smaller than one with vertical stripes. So when
possible, have the image run horizontally.
When using Front Page remember that dragging the image
smaller with the handles only changes display size, NOT
file size. You must click on resample to change the
actual file size.
There are several image editing programs available, in
a wide range of price. Most will allow you to enhance
your image with a variety of special effects and
deformations, add text, change colors and add drop
shadows. But regardless of which program you use, the
most effect web graphics, follow an ABC rule -
Appropriate, Brief (in loading) and Clear (in quality).
