Crossing The Great Graphics Barrier

One of the first hurdles in learning Web design isunderstanding the use of graphics. The greatest of programmers can comeup against the graphics barrier and sometimes just fall flat. Evenprofessional 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 thecosts. If a graphic is too large, text cannot flow around itgracefully. Most reading widths should be in the area of 480 to 600pixels across, and if you have a photo you want to mix into an articlethat's 400 pixels wide, guess what? You'll either squeeze the text intoan 80-pixel area (less Hspace), or just have to make the graphic takeit's own row! Plus larger graphics as we all know take awhile todownload. Let's not forget about those poor blokes who are still ondial-up! My rule-of-thumb is: experiment with the image and try it atvarious sizes... don't fall in love with the larger version! See whatit looks like at 200 pixels across. Give yourself a moment and get usedto the image 50% reduced. Also... never change image sizes of a fileafter it has been made into a jpeg. Make your edits and changes firstin a hi-res format such as png, psd, or bmp, being careful to changewidth and height proportionally. Then and only then, optimize for theWeb. Also, to make the text flow around the image, use align="left" oralign="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 oktoo 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 havea file that's only 10k in size! For example, take a look at Lynda.com - that background image is 1280 by 1024 in size, and weighs in at only15k. Why? Because it only uses a total of 4 colors! Gif is a great"bang for the buck" format, but photographic images look like somethingout of Blair Witch Project when reduced to 16 or fewer colors. You'llneed 128, even 256 colors, and still gifs will pixelate a photographicimage. No sweat... Jpegs excel at making these images look great whilekeeping the file size low. Gifs therefore, are a sneaky way to creategreat Web graphics of fewer colors, with incredibly low file sizes. Andby 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-talesquare borders around that jpeg you hoped would match your backgroundcolor.

3. Animation How To?

Ever hear of an animated jpeg? Nope. Using several frames ofgifs that all use, say 2, 4, or 8 colors, you can piece together afairly long animated gif while keeping the file size under control. Buthow is it actually accomplished? Well that depends on the program youuse, but the principle is the same. In Macromedia Fireworks, a quickway to make an animated gif is to "duplicate frame" about 8 times, andas you go to each successive frame, you can alter the image slightly.In Adobe ImageReady a lot can be accomplished quickly by going frame toframe and making various layers visible, invisible, or by changing thealpha settings, adding layer effects, and more. But before you go crazycreating things remember... your final image will be equal in size toapproximately the size of the original image (e.g. frame 1) times thenumber of frames. So a 6k image seems small enough until you multiplythat by 9 frames, and suddenly you're at 54k! That's way too big! Yourfinal HTML page in total should be 54k or less... are you going todouble 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 totown animating that! You could have 16 frames and still be smallenough.

Related Articles

• Website Accessibility
  How can good accessibility help you? Having a site that is user friendly is not only good for the visitor its very good business sense. Its not just about achieving the highest accessibility rating you can its about making sure your site meets all of your visitors needs.
• Easily Design Your Own Graphics for Your Business
  Perhaps you have a website, but youre just not totally happy with the graphics, or you havent any graphics at all. How do great looking graphics improve my business? Arent professional graphics expensive? How do I create graphics myself?
• Your Graphics- Are They Really Working For You?
  It
• The 3 Musts for Running Your Web Design Business Efficiently and Effectively
  To run a Web design business efficiently, you need to know a whole lot more than just design. This article will initiate you into the management side of design industry.
• Make It Snappy!
  Surfers get irritated with slow sites, so learn how to optimize your images to make your site lightning fast. A common mistake in web site creation is to become soooooooooo excited about the creation, and add so much great detail and care to your graphics that you forget that...
• Make your Web Page Loading Fast
  This article will tell you everything you need to know to get your webpage loading at maximal speed. The author gives you nine ways to increase your speed, and he tells you how to make the necessary changes to get very fast load times.
• Optimize Your Graphics For The Web
  Heavy graphics cost you money and traffic. They cost you money because heavy graphics require both significant storage space and bandwidth. Since your web host will usually give you a limited amount of storage space and a maximum data transfer allowance, heavy graphics can cause you to exceed tho...
• Making Your Website Load Faster - A Few Tips
  Your web pages have great content, a nice design. So why arent people clicking through to other parts of the site? In many cases, the problem is the load time. People are abandoning your site for the simple reason that it just takes too long for the thing to load!
• Is Your Site Too Slow? Why Image Optimization Is Critical When You Create A Web Site
  Graphics are fun, but if you put in too many bells and whistles when you create your web site, you may lose a potential audience whose Internet connection can
• Flash Intros On Websites - Why It's Time To Ditch The Flash Intro
  The designer who wrote this article makes some very good points about Flash Intros. After he explains the pros and cons of Flash Intros he gives great advice in deciding for yourself, with new understanding.

Contact Web Design Outsource and get started today

Need Website Designing, Development, Redesigning, Maintenance and SEO services or help growing your company's web presence? Request a free Quote Now.