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
