ET Productions logo

What We'll Need to Get Your Site Up Fast and Minimize Costs

    ET's Home    
  ET's Services  
 Web Presence
   Our Portfolio  
    Contact Us    
            Helpful Tips          
 
 Image Errors--AKA Mini, Heavy, Jaggy, Halo, ...
Great graphics are vital to Web performance. Unfortunately, there are numerous ways to fall short of delivering great images. First, let's look at why images deserve so much consideration. Then we can touch on the major pittfallls that often sabotage unwary webmasters in their quest for excellence.
 Why Quality Images are Essential for Websites
In a brick and mortar store, all the senses come into play.Your competition is often brick & mortar retailers. In a physical store, a customer can pick up the product, see its every detail, sense its texture, its weight, its smell. In a virtual store on the Web, you have only the image and text description. Those two tools must be exceedingly good to match the physical store's sales appeal. And if you can't compete in sales appeal, low price is generally where you have to outclass your competition. Not an easy contest to win when you are up against mass merchandisers like Walmart and Target.
 Aliasing, AKA Jaggies
Computer screens are made up of thousands of tiny dots, AKA pixels. If I paint a red line vertically up the screen or horizontally across it, each successive pixel that is lit up red is directly adjacent to the borders of its neighbors, and I have no problem with jaggies. But when I paint an angled line, i get a staircase effect. It's not so noticable with today's high resolution monitors, but anyone familiar with early home computers or computer games will remember that images often looked like come sort of cubist art. Even today, we use something called anti-aliasing to smooth out the staircase effect.

Angled line without antialiasing  Closeup of angled line without antialiasing  Angled line with antialiasing  Closeup of angled line with antialiasing
Without
Antialias
 Closeup
Without
 With
Antialias
 Closeup with
antialias
 One other note about angled lines and antialiasing. Note that the Antialiased line center right looks a bit lighter than the one to the far left where no antialiasing was applied. In designs where you mix vertical, horizontal and angled lines and they must all be the same line weight, antialiasing makes it extremely difficult to deliver pleasing results. If the designer really cares and has good eyes, it's a matter of tweaking the antialiasing by hand. I know of no software that will automate the process.
  When Halos are NOT Holy
Halos around Web graphics are a result of poor planning coupled with the need for anti-aliasing. THey occur when we antialias an image into one color of background, then turn the background color transparent in a GIF file. The easiest way to see what's happening is to look at an actual example.
      Let's draw a red star on a nice white background--left. Looks great. Now let's save it as a transparent GIF and set the transparency color to white--center left. Still looks good because it's on a white background. Now let's see what happens when we switch the background behind the transparent GIF to black. All of a sudden, we see this ugly white glow almost like stitching around our nice red star--center right. Magnifying our star--far right--we see what's going on. When we antialiased our star into a white background, we got a series of increasingly lighter pink pixels to smoth out its jaggies. No problem so long as the background color remains the same as (or very near) the color we antialiased the image into. So the solution is very simple. Consider the background color before producing an antialiased transparent GIF. If your image has to work with multiple background colors, either avoid antialiasing or make multiple images antialiased into each unique color.

Red star antialiased into white field  Background color (white) made transparent  What happens over a black background  Closeup of halo effect
Star Plus
Antialias
 White to
Transparent
 Background
Black
 Closeup
of Halo
 
 Meet Mini
Image too small to see wellImage problems go by many names (aliases) but Miss Mini is probabaly #1 on the Most Wanted list--the most active, prolific offender out there. Perhaps it is because so many "best practice" disertations date from the days of 14.4K modems. Perhaps it's because product suppliers hate sales--so much hassle shipping products and the like. But it is not at all unusual to find sites trying to sell things like inscribed tee shirts--where the look IS the sale--with postage-stamp-sized images like that shown above right. If that's all your supplier offers, do yourself a favor and get your own images. If you are a shutterbug and already know tons about lighting, shaddow and hot spot elimination, backdrops, etc. then get a good digital camera and do it yourself. If you're not already a talented photographer, recognize that product photography may well be the most challenging of all branches of the art. Hire a good product photographer and launch your site with images that will sell.
      The biggest surprise to most first time store owners is that we actually want big, beautiful, high-resolution images for their site. How big is too big? If you have an 8 megapixel digital camera we'll take them in full out-of-the-camera resolution if possible. We want to end up with all product images at least 800 pixels in their larger dimension. We'll res down to 72 DPI but if we need to prepare something for print advertising, we must have the original art in at least page size and 300 DPI.
      We can always downsize an image that is too big, but we cannot get decent results by rezzing up tiny images. Let's say your product is an Internet Secure Data Center and you want to show people what a high-tech solution you offer. Here's a link to a high-res image. It is JPEG compressed, but at 3307 pixels wide X 2717 high and at 300 DPI (Minimum dots per inch for print advertising and dead tree publishing), it weighs in at a very healthy 8,944,200 bytes. It will take minutes to download over a dial-up connection, and even after download, you will have to scroll both vertically and horizontally to view it on all but the most incredibly high resolution displays. Not what we want for the Web. But it is a great starting point. From it we rezzed down the 800 pixel, 72 DPI image shown here.
      If you had a data center to sell and were proud of its technology, the image above certainly would convey that pride. Whatever you are selling on the Internet, big crisp graphics like that in Figure 2 will help your sales.
      Now, let's take that image down to the postage-stamp size you often find offered by manufacturers as a product photo. Figure 3 shows a 140 x 115 image. It's still barely discernible as a data center, but it sure doesn't sell like the image in Figure 2 above. Without knowing what it's a picture of, you'd be hard pressed to guess when it's reduced to this size. Which would encourage you to buy? And look at the hideous results we get in figure 4 below when we try to "rez up" or add resolution to the small image form Figure 3.
Helpful Tips to Get Your Site Going Fast
  Quick Startup Tips           
  Best Design Practices     
  Cost Control Tips             
  FAQ                                  
  Send-a-Friend                 
  Links                                
 Points to Consider
Main Design-Tips Page.
  bullet Remember that your monitor is not everybody's monitor.  
  bullet Image errors have many aliases.  
  bullet Watch out for disappearing fonts.  
  bullet Remember 3 words, Show and Tell.  
  bullet Avoid needless distractions.  
  bullet Keep formatting in reason.  
  bullet Pardon our construction, or don't.  
  bullet Splash no splash in search engines.  
  bullet SEO gone in a Flash.Turn Sound Down First!  
  bullet Music to my ears may not be music to every ear.  
  bullet Keywords? Start with the contents of Webster's.  
  bullet Don't be a Copy Cat.  
  bullet Do be a Copy Writer, or hire an expert to write good copy.  
  bullet Don't be selfish. Share the Wealth.