Crossing the Great Graphics Barrier

One of the first hurdles in learning Web design is understanding the
use of graphics. The greatest of programmers can come up against the
graphics barrier and sometimes just fall flat. Even professional
desktop publishers when faced with a "design for the Web" task, can
make critical errors.

1. Size Matters --> Making your featured graphics too large is a web
design no-no. Yes, a graphic generally looks better when it's big,
but consider the costs. If a graphic is too large, text cannot flow
around it gracefully. Most reading widths should be in the area of
480 to 600 pixels across, and if you have a photo you want to mix
into an article that's 400 pixels wide, guess what? You'll either
squeeze the text into an 80-pixel area (less Hspace), or just have
to make the graphic take it's own row! Plus larger graphics as we
all know take awhile to download. Let's not forget about those poor
blokes who are still on dial-up! My rule-of-thumb is: experiment
with the image and try it at various sizes... don't fall in love
with the larger version! See what it looks like at 200 pixels
across. Give yourself a moment and get used to the image 50%
reduced. Also... never change image sizes of a file after it has
been made into a jpeg. Make your edits and changes first in a hi-res
format such as png, psd, or bmp, being careful to change width and
height proportionally. Then and only then, optimize for the Web.
Also, to make the text flow around the image, use align="left" or
align="right" and be sure to add Vspace and Hspace of 6 to 20 pixels.

2. Gif or Jpeg? --> In a nutshell, gif files love flat colors, and
stripes are ok too if they run horizontally. You can make a 2-tone
image that's huge -- 1600 by 1200, and save it as a gif with just 2
or 4 colors, and have a file that's only 10k in size! For example,
take a look at http://lynda.com -- that background image is 1280 by
1024 in size, and weighs in at only 15k. Why? Because it only uses a
total of 4 colors! Gif is a great "bang for the buck" format, but
photographic images look like something out of Blair Witch Project
when reduced to 16 or fewer colors. You'll need 128, even 256
colors, and still gifs will pixelate a photographic image. No
sweat... Jpegs excel at making these images look great while keeping
the file size low.
Gifs therefore, are a sneaky way to create great Web graphics of
fewer colors, with incredibly low file sizes. And by using a Web
Color Palette you can achieve exact color matches... which comes in
handy for matching up with a specific background color. Jpegs just
won't match exactly and your image will leave tell-tale square
borders around that jpeg you hoped would match your background
color.

3. Animation How To? --> Ever hear of an animated jpeg? Nope. Using
several frames of gifs that all use, say 2, 4, or 8 colors, you can
piece together a fairly long animated gif while keeping the file
size under control. But how is it actually accomplished? Well that
depends on the program you use, but the principle is the same. In
Macromedia Fireworks, a quick way to make an animated gif is
to "duplicate frame" about 8 times, and as you go to each successive
frame, you can alter the image slightly. In Adobe ImageReady a lot
can be accomplished quickly by going frame to frame and making
various layers visible, invisible, or by changing the alpha
settings, adding layer effects, and more. But before you go crazy
creating things remember... your final image will be equal in size
to approximately the size of the original image (e.g. frame 1) times
the number of frames. So a 6k image seems small enough until you
multiply that by 9 frames, and suddenly you're at 54k! That's way
too big! Your final HTML page in total should be 54k or less... are
you going to double that just to add in 1 little animated gif?
Rather, use the 4, 6, or 8 color method, create yourself a little 1k
image and then go to town animating that! You could have 16 frames
and still be small enough.

©Blaine Fallis, Managing Director - Friendlyweb.net
http://friendlyweb.net . Web hosting that's different
from the ground up. Our acclaimed Appies Web Site Manager
puts all the tools in your hands: phpBB, Photo Gallery,
Appies calendars, Appieshop, Superior email management,
Site Map Creator, Company Directory creator, web mail.
Affilate opportunity: http://portal.hostingscouts.com
call 866-437-3257 ext 811