|
Web Graphics 101
Which Format?
|
If you've done much surfing you've noticed web graphics can
enhance the experience or make it a nightmare depending on
how they are used. As an effective web designer you need to
be very careful about your graphics decisions.
One of your first and most basic decisions is choosing the
right graphics format. In this article we are going to
cover 4 common graphics formats (BMP, GIF, PNG and JPEG) and
their place in the world.
BITMAPS (BMP)
Bitmaps have a place in the world just not on your web page.
Bitmaps are uncompressed which means they are much larger
than their compressed counterparts. The larger size
translates into slower loading graphics when placed on a web
page. You may want to use bitmaps for your master copy of a
graphic (especially if you will be editing it) but you
should save it in a web friendly format before unleashing it
on the Internet. Fortunately most web designers know enough
to stay away from bitmaps, however, deciding what to use
instead is the real obstacle.
Graphics Interchange Format (GIF)
The GIF format is one of the fundamental building blocks of
web graphics (the other is JPEG discussed later). GIF works
best on images with limited colors and large blocks
containing the same color. Drawings or cartoon images for
example work well in this format. GIF files are compressed
resulting in graphics that are smaller and faster than
bitmaps. As long as you have a small number of colors
(say < 256) the GIF format uses a lossless algorithm which
retains high quality. However, if you have a large number
of colors (like in a photo) the GIF format is usually not a
good choice since it will need to reduce the number of
colors used.
Portable Network Graphics (PNG)
PNG (pronounced ping) was born to replace GIF due to
licensing issues. I only mention it in case your graphics
package does not support GIF, however, I do not recommend
using it. The PNG format itself is fine and some would
argue it is better than GIF. The problem however is it
might not be fully supported by your visitors web browser.
Many Internet users will have a browser (maybe not the
latest version) that does not support PNG or only supports
it partially (ex. doesn't handle transparency right). If
you have an e-commerce web site then it is not worth the
risk... use GIF instead. If you are just putting up a
family web site or are on a corporate Intranet where you
know the exact browser and version used then PNG may be an
option.
Joint Photograph Exchange Group (JPEG)
JPEG is the other staple of web graphics. It works best
with photos where millions of colors may have been used.
The JPEG format uses a lossy algorithm which means smaller
files are achieved by leaving out (losing) some of the data.
This works great in real world photographs since colors in
nature tend to change gradually. For example, a picture of
the forest may have several shades of green. Although, your
digital camera and computer may see the difference between
millions of colors, the human eye is not quite as picky. If
two adjacent green pixels are just 1 shade different, then
changing them both to the same shade (loss of quality) is
not noticeable to the eye but will make the file smaller.
This is a very simplified and technically inaccurate
explanation but the bottom line is that the JPEG format is
designed to exploit the characteristics of photographs and
the human eye to achieve amazing compression results.
Quality / Compression Settings
If you made the right choice between JPEG and GIF then you
are off to a good start. The next thing you should learn is
how to adjust the quality level in your graphics program.
This is the topic of a whole other article so I am just
going to quickly mention it here. By reducing the color
palette in GIF files or using a more aggressive compression
setting in JPEG files you can often get a smaller/faster
file without a noticeable loss of quality.
Copyright 2001 Rob Yaggie ** Our FREE Cover Art Tutorial **
uses a powerful combination of GIF and JPEG graphics with
layering. See it as an example of optimized graphics use
and learn how to create covers that will explode your sales.
http://coverartguide.com/art1
|
Free Insider Report
Receive free monthly marketing updates, tools, tips and strategies to help your online business succeed. Get immediate access to our bonus ebooks AND 150+ back issues.
|
TOP
Site Navigation Guide
Site updated daily
 |
PRODUCT OF THE WEEK |
|
|
Copyright © 2000-2006 by Startup Internet Marketing Services* All rights reserved
58 Porteous Ave. Kirkland Lake, ON, CA P2N 2N9 705.567.5850
This site is powered by Host4Profit.net
|
|
Free Stuff
