Hello!

Welcome to the St. Patrick's Day edition of Scribbles!. In our previous issue the discussion centered on improving your web site's search engine rankings by keeping text content updated and fresh. This time out we'll talk about image files — the photos and drawings that are on your web pages. We won't be talking about movies or animations; Flash, .wmv, and .mov files are the subject of a future newsletter.

In This Issue

• Web Graphics Made Easy
  Preparing graphics for a web site
  • Photographs
  • Drawings
• Alphabet Soup
  • JPEGs
  • GIFs
  • PNGs

Web Graphics Made Easy

Adding photographs or drawings of new products, pending or completed projects or new employees should be second nature to web site owners. We all have digital cameras, or phones with cameras or (for those die-hard film fans) scanners. So getting new material should not be a problem. Point and shoot away! Scan those line drawings! Then, using programs like Fireworks, Photoshop or online applications you can crop, adjust, resize and compress those files so that they load quickly in a visitor's browser.
   Certain file types lend themselves to certain types of graphics: photographs and the JPEG standard play well together, while line drawings and graphics that use solid colors and repetitive patterns can usually be found in GIF format. Both of these kinds of graphics may also be saved as PNG-24 and PNG-8 files, respectively.

Preparing graphics for a web site

• Photographs
  OK, so you used your shiny new digital camera and captured a whole slew of images of your latest products, or even spent mucho dollars and had a pro take the pics for you. Now you have edither a memory chip with all of your photos or a CD from your photographer. It's time to pick a few and add them to your web site..
     While you're at it, you want to avoid putting a three- or four-megabyte photo on your page. Even with a broadband connection a file that big is going to take a minute or two to show up on your visitor's screen. Nobody on the web has that kind of time...the average viewer waits between 8 and 14 seconds for stuff to appear on their screen.
     Enter an image-editing program. Whether it's a local or an online application, most of these programs will allow you to crop, resize, preview and compress your images so that they look good and load fast. Here are the basics to remember when you are preparing your photos:
• 
  
• Resolution
  Web page images are typically for onscreen consumption, so a nice low resolution (72 pixels per inch) works great. In fact, if you make the resolution higher the photo will only take up more room on screen...the browser will display it at 72 ppi and just make it bigger.
  
• Compression
  Image editing programs that are web-savvy will allow you to compress files. The JPEG format will actually throw away information in order to shrink the size of the file. Most of these programs will allow you to choose how much compression to use; with JPEGs the more compression the more degraded your final image will be. NOTE: Don't compress your original image. Either use a copy or use the application's "Save for Web..." feature and use a different file name so as not to overwrite your original image.
  
• Visual Size
  The display size of your onscreen image will greatly affect the file size. An image that is 200 pixels wide by 200 pixels high contains four times as many pixels (potentially quadrupling the file size) as an image that is 100 pixels wide by 100 pixels high.
• 
     Today's web site owners and operators have a plethora of image editing tools that they can use to achieve results that will look great and download quickly. Windows, Macs and Linux operating systems come equipped with basic photo editing and gallery building software. You can also purchase or download free trials of the following:


• Photoshop
• Fireworks
• Elements
• GIMP and other free image editors
• 
     Another option is to use online image editing software. These range in quality and usefulness from pro-level to amateurish, but as the saying goes "You get what you pay for."
  
  
  • FotoFlexer
  • Pixenate
  • ImageEditor
  • Online Image Editor
  
  
• Drawings
  The other major type of web graphic is non-photographic. These images are usually line drawings, solid-color graphics, text headings or other design elements. They can include logos, blueprints, product artwork and packaging.
     To use graphics that are along these lines you'll still want to use programs and online applications like the ones above to crop, resize, edit and compress. You will likely choose either the GIF or PNG-8 file format as outlined below.

Alphabet Soup

• JPEGs and GIFs and PNGs, Oh My!
  Your images are saved as graphic files in your camera, on your computer and on the Web. Let's look at the most common file types for displaying images on a web site, as well as the suggested uses for them.
  
  
  • JPEG - photographs; lossy compression
    The JPEG format (.jpeg, .jpg) can display millions of colors and is probably one the most ubiquitous file formats on the web, right behind .html. This compression scheme throws away information and changes colors in the image in order to reduce file size. Images that have been over-compressed will display noticeable artifacts, blurring and loss of dynamic range. For more about the JPEG format, please have a look at Gordon Richardson's excellent article on photo.net.
    
  • GIF - drawings, logos, design elements; lossless compression
    Use GIFs anywhere you need to put an image with solid colors, lines or broad strokes. Rendered type (images of letters and words) looks especially crisp. The GIF standard displays 255 colors and supports animation (albeit not very well) and transparency. Wikipedia has a page dedicated to the history and usage of this format, as well as details about colors and compression.
    
  • PNG-8, -24 - drawings, photos; lossless compression
    PNG can be used to store and display photographic and non-photographic images. It supports either single-pixel transparency or 255 levels of transparency for all pixels, but does not support animation. The PNG format was developed as an open source alternative to GIF shortly after the Unisys Corporation (owners of GIF patents) tried to collect royalties from software companies and developers who had incorporated the ability to create GIFs into their software. You can learn more about the pros and cons of PNG files over at mezzoblue.
• 
  

Parting Thoughts

In this issue we've explored how to prepare graphics for a web site and how file size, resolution and display size can affect download times. We've also looked at the most common Web graphics file formats and how to best apply them to your images.
    In our next issue will touch on common questions a business owner should ask their web designer and web developer.

Coming April 1

• How to Make A Million Dollars on the Web
  • Tips for Spam Chain Mail
  • Easy Phishing Techniques
  • Lousy April Fool's Jokes

Mise le meas!
Ed Moore
www.animai.com