Team3S Logo, 5k jpg
New York - Munich - Portland - San Francisco - Seattle - Stockholm - Vancouver - Zurich





Imaging Tips


How to create great images
that make your web pages load
F-A-S-T-!


A short 'Imaging Primer' :
How to prepare your photographs and artwork
for use on your web page.

by Bob Forrest

Red Gradient Line, 1k GIF


Overview:


Images, color, motion and sound provide the 'sparkle' to websites, for the simple reason that the web is an audiovisual medium. No matter how interesting the content may be on a web page, without some visual 'diversion', reading a page of plain text is not only boring, but also tiring to the reader. Photographs and illustrations or other artwork break up that monotony and make your pages exciting to the person viewing your site.

Unfortunately, the use of images (or sound, java effects, etc...) comes with a 'price'-- pictures, video, audio, and effects have large file sizes which can take a long time to load. The viewer has to wait until the entire file loads before they can go further. Many people just don't want to wait. In research, it has been determined how 'impatient' the average 'net surfer' is-- they are a fickle lot, and will click off a page to another site rather than wait for a slow-loading page. The recommended download times for whole pages (including HTML code, images, other files...) are a function of the download speed. Since most folks use 28.8 and 56k modem speeds, here are the figures: your page should take no longer than 30 seconds to load at 28.8k, or 15 seconds at 56k. This translates to 50k of TOTAL file sizes. Obviously, if the HTML code on your page is 5k and you use three 20k images (total 65k), your page will take a bit longer than normal to load. No sweat. You can work around that by making sure that the top of your page has fast loading images, and possibly a paragraph of copy that takes a few moments to read. While they read the copy, the rest of the page is loading before they begin scrolling down. Pages that are 'image heavy' and are primarily 'picture pages' will invariably violate the 50k rule, but by being smart in your page design you can keep even the most impatient 'netsurfer' busy just long enough for the rest of your page to load. But if you expect to keep folks on your site waiting for 60k of java applets, 200k of real audio, and 500k of image files to load, you've got a serious problem with reality. :-)

Note: This entire HUGE page, complete with code, still images, and animation totaled only 103k.

With the advent of high-speed cable modems (ADSL, etc.), these numbers and limitations will seem silly within a year. To those of us who stay current with state-of-the-art systems, anyway... You're welcome to wait for 'everyone' to have the newer technologies..., but if you want to put a page up today, below are some real suggestions for working with images to keep their file sizes small and make your pages as fast-loading as possible. As a general rule when designing pages, I think clean and slick is the way to go for a 'money' site. The award-winners violate the good business rules with frames and piggy java junk, but the money-makers (Ford, Yahoo, Eve...) get right to the point with nice small graphics for sparkle, and a clean, b, simple design. It's the "KISS" rule (Keep It Simple, Stupid), and I'm a believer. Yahoo loads in 9 seconds-- something to aspire to. Use tables instead of frames, GIF animations instead of Java, midi instead of WAV sound, etc... I may touch on these other technologies throughout this piece, but I'm primarily an imagist, so I'll concentrate on what I know best...



Red Gradient Line, 1k GIF


Primer:


First of all, before you do any work with either photographs or artwork, it's important to make sure what you see on your monitor is what everyone else sees when they look at your photos on the web. In order to do this, you'll have to "calibrate" your monitor. Most modern monitors come with a setup file or reference on how to do this when you first hook it up, but over time, those settings may change. Set up your new monitor correctly when you take it out of the box, and check it every few months. Try to set it up at the same time of the day or night when you will be spending most of your time on the computer; the ambient room light will have an effect on how the image appears on the screen. If your monitor doesn't come with a setup program, your video card software probably does... Find the help file on calibration. Read it.

As a general test of your monitor, I've set up two detailed charts of the 256 "internet-friendly" colors that should be discernable by your monitor. If you can't see a difference between similar colors, that's usually (but not always) an indicator that your monitor is not set up correctly. The same is true if the darker colors all look black, or the lighter colors all look white. These are large illustrations, so either will take a while to download... On both charts, the colors are marked in both hex value and RGB values, so they're pretty handy for deciding what colors you'll use for page background or type colors for the web. You may want to bookmark one or both of these chart pages (or this one so you can choose which chart is appropriate for the colors you're referencing). The left chart is based on similar hues, and the right one is based on increasing values. Take a peek and see how your monitor fares:

Hue-based Chart, 13k GIF
nhue.gif

1033x895, 229 Kb
            Value-based Chart, 13k GIF
nvalue.gif

1074x940, 239 Kb


Now let's get a little 'theory' out of the way-- If you want great quality, digital images from scans or digital cameras are best saved and manipulated in the 'lossless' formats, such as .BMP, .TIF, and .TGA. In these formats, every pixel has a specific brightness and color value. No matter how many times it is saved and resaved, unless the color has been intentionally changed, the pixels will remain identical to those in the original image. But these formats' file sizes are too large for use on the web, so a council of professionals was formed to standardize the .GIF format and the .JPG format 'compressed' image file types. JPG and GIF are known as 'lossy' formats, because varying amounts of visual information (detail) is lost when converting to these formats; the loss becomes greater as the compression gets greater. These 'compressed' formats were designed to be usable on any computer platform, from mainframes to Unix to PCs and MACs.


I've made these paragraphs brighter so you'll notice and remember them, because they are the most important ones on this entire page. People who are new to digital imaging make the mistake of 'working' with these compressed image formats (JPG and GIF) during various steps of image manipulation (scanning, cropping, brightness or contrast or color correction, resizing, dust-spotting, retouching...). In fact, these compressed formats should ONLY be used to convert an existing 'finished' image file to a reduced file size for use on the web and for emailing photos. Do ALL your work in TIF or TGA and forget you ever heard of JPG and GIF until you're ready to send the image via email or publish it to your web page!

For example, if you have a JPG photo that's 300x200 (pixels) but it's too large for your web page, if you resize it to a smaller 270x180, the new JPG image will get a little 'fuzzy'. If you do the same thing with the same image as a TGA file, the smaller image looks SHARPER! When you have an image that you are ready to put on your web page or send via email, THAT's when you should convert that image to the appropriate compressed JPG or GIF. And NOT before!!!

Here is a quick visual comparison for you, in the following two images-- This is the '3Si' Logo that I designed in 1995... The copy on the left is resized from the original high-resolution TGA file, resaved 20 times as a TGA file (really!), then converted to a 70% JPG for use on the web. The copy on the right is from the same original high-res TGA converted to a JPG, then resized to a medium-sized JPG, then resized to this small version (only 3 steps!), also a 70% JPG. If you can't see the huge difference in quality, it's time for new prescription lenses or a new monitor! :-) Notice that the one on the right is falling apart-- the Mitsu Diamonds are rounded and starting to look like fuzzy leaves, the Dodge Ram Logo is muddy and the red color is less bright, the smaller letters like in 'international' are choppy and breaking up, etc... Please note that these files were only 16k each, since they were saved at 70%. But the one on the left looks fine, because we 'worked' with TGA files, not JPGs.


TGA saved 20 timesJPG saved 3 times


All About GIF files:

The .GIF standard is most often used for illustration or artwork with a limited number of colors, or where a transparent area is necessary. It also allows for several frames of images to be included within one file, for an animation effect. A GIF file of an image with lots of colors is usually larger than the same file saved as a JPG, and a GIF file of an image with few colors is smaller than the equivalent JPG file size. But GIF files can only contain 256 colors, which can give a "chalky" look to photographs with many colors. For a piece of art with 20 colors, a graph, or line-art diagram, GIF would be the right choice. For a photo of a person, a mountain, a car..., JPG is better.


All About JPG files:

The details of the .JPG standard are unimportant, but the main features are as follows: JPGs are used for photographs with continuous color, where gentle blending must be preserved (say, from a bright sunset horizon to a dark sky above...). JPG files are capable of displaying all 16 million colors in the digital spectrum, the way the human eye sees them. The council decided to allow these JPG files to be compressed over a sliding scale of 1% to 100%, with the pixel characteristics "averaged" to save on file size. So some pixels, when using this format, would be changed during the file reduction or "compression". 100% quality means that ~100% of the pixels are "unaffected" by compression (no averaging = high quality = large file size) while 50% quality means that 50% of the pixels are "unaffected" by the compression algorithm (medium averaging = medium quality = medium file size).

This averaging results in proportionally smaller file sizes-- for example, a JPG file that is 100kbytes in size at 100% quality will only be about 10kbytes in size at 50% quality. That means that ANY file that can be saved as a 50% JPG will load TEN TIMES faster than the same image saved at 100% ('high quality' setting, in some programs). What is important for our purposes is that you have an understanding of the relationship between quality and file size: High Quality = Large File Size, Lower Quality = Smaller File Size. The following tips will help you determine the right combination of quality and file size that is right for your intended use of the image. There are some overall rules of logic that apply as well. What follows is what you need to know to get started using scans and photographs that you can include on your web pages.


A Quick Comparison of GIF and JPG:

As I wrote earlier, JPGs are used for photographs with continuous color and gentle blending of tones, as in light to dark, for example -- particularly in large open areas of the image. GIFs are best left for artwork with few colors and no gradation of tone..., solid and distinguishable tones with no blending, as in a pie chart, for example. Below is a side-by-side comparison of a link button I created for a restaurant website. First, the JPG image, which is compressed at 50% quality, but looks smooth and sharp because it contains all 16 million colors - the full visible 'digital' spectrum. It is the largest file size, at just over 6k. Second is a GIF image at maximum quality, which is a slightly smaller file size, at just under 6k; even at 256 colors, you can see the 'steps' between the various levels of grey behind the lettering. Third, a GIF image using only 64 colors, which is only half the file size of the JPG image, at just over 3k; the 'steps' are even more noticeable. I'm sure it's obvious that neither GIF image would be acceptable on a website. In this case you need the continuous-tone capability of a JPG, even though its file size is larger, to give you an image of acceptable quality.

6k JPG, 50% quality

6k GIF, 256 colors

3k GIF, 64 colors

6k JPG, 50% quality 6k GIF, 256 colors 3k GIF, 64 colors



Red Gradient Line, 1k GIF


Imaging Tips:


01.   Whenever possible, scan at twice the resolution that you need for your intended purpose. ("dpi" = dots per inch). For the web, since 72 dpi is your monitor resolution, scan at 144dpi, or the next closest setting. If you're putting a 3" wide by 2" high picture on your website, that scan would result in an image that's: 3" x 144=432 pixels, 2" x 144=288 pixels. So your scan will be 432 x 288. After you've done any color correction or retouching or spot removal, THEN resize the double-size image to 50% of that size (216x144) for placing on your page. (The reason to work 'large' is that it's easier to make "repairs" on images at higher resolution-- imperfections show up less since you're working more accurately).

02.   Save the original scanned image in a "lossless" format (TGA or TIF). (If you must save a JPG which you plan to work on or resize later, save it at 100% quality, then convert it to a TGA file later, so you can work with it.) Do all your color correction, manipulation, cropping and resizing from the original TGA file-- do NOT resize JPG's or GIFs, it creates ugly "artifacts" (smudges), and softens and degrades the entire image. JPG's discard important visual information; if you discard details on the same image twice (by re-saving a JPG), it begins to visibly deteriorate. After you've done all your image adjustments on your original TGA or TIF file, save it under a different name, so in case there is an error, you still have the untouched original TGA image file to work with. THEN save your final file AGAIN as a JPG, at no more than 70% setting (50% is often sufficient). Only turn a file into a GIF or JPG at the very LAST step. This will be the image you actually put on the web. To put it in other terms (and it bears repeating): NEVER re-save a JPG if you can possibly avoid it. It doesn't take a pro to see that most of the pictures on the web have been 're-saved'. Multiple JPG re-saves turn great images into mush!

03.   Do not use huge (or tiny) photos on the web; there's no point to either. Use a tiny photo only as a thumbnail that links to a larger image or page. The maximum file size for any image should be no more than 50k for a large one (~640x480), about 30k for a medium size (~400x300), and 15k for a small one (~320x240). Any image file size that's substantially larger than those file sizes is not optimized correctly and sucks up bandwidth. And by the way, showing an image on a web page that is larger than 640x480 is generally regarded as a bit rude, unless you can keep the file size small. (You might go as high as 800x600 for something REALLY spectacular, if it can be optimized to a reasonable file size). Remember, a 50k image takes 30 seconds to load at a 28.8k modem speed. Anything larger, and visitors to your site will click off and go elsewhere. Friends that know better will stay and wait, and just be annoyed at your lack of consideration...

04.   Don't embarrass yourself by showing clumsy or badly exposed photos. Get a good imaging program and learn how to use it - at least to crop out unnecessary protions of your photo, or to make a photo brighter or darker. The whole world may be looking at your photos, so if you care anything of what people think of you, put quality images on your web pages. Neatness counts! There are a number of recommended programs out there, with a range of prices. At the top end, I always recommend QFX for Windows (all you'll need unless you want to do 'pro' work is their 'light' version, QFX-LE). It's available as shareware at their website, www.qfx.com. Most people think PhotoShop is the only good one out there, but I don't even use it anymore - it's serious 'bloatware' and ponderous beyond belief. Consider PhotoShop the automotive equivalent of the Rover- reliable, but big, heavy, and slow. QFX and even Corel Photo-Paint are smaller, faster, and smarter. QFX also has a built-in vector draw program - it's like PhotoShop and Adobe Illustrator combined. I used to teach QFX, so if you are willing to spend the money for the program, you can always email me privately with questions and get quick answers. With the rest, you're on your own. For middle-quality, the best are probably, (IMO), PhotoImpact, www.ulead.com, CompuPic, www.photodex.com, and Paint Shop Pro, www.jasc.com. For just a simple program that will 'get you through', I would have to recommend PolyView www.polybytes.com . Give them all a test drive, and choose the one you're comfortable with.

05.   Use a utility program that does all the image optimization work (image resize, crop, and GIF & JPG size reduction) for you. I recommend SmartSaver for the PC, DeBabelizer Pro for the MAC (it has recently been ported to the PC, but I still prefer SmartSaver). PhotoImpact Smartsaver is available as shareware or purchase at: www.ulead.com (in the WebTools section).

06.   Don't assume that everyone out there surfing the web has a computer as fast as yours. There are lots of people still using 486's and earlier MACs that only use an 800x600 desktop, and download at 56k. Don't create huge pages with huge images on them. Be considerate and don't be a bandwidth hog!

07.   There are a couple of important websites that automatically check your pages for problems, both HTML code and image sizes. Both sites are maintained by students, and are free, unless you want to make a small donation to them:

---'Bobby' gives you an almost instantaneous printout of your image "violations", improper HTML code, and if your page takes an unacceptably long time to load. It offers corrective suggestions and links to "chapter and verse" areas on how to correct your errors.

---'Meta Medic' checks your Meta Tags to make sure you're seen on the web and are "findable" to the various search engines and web robots and spiders. Do yourselves a favor and check each of these sites at least once.



Red Gradient Line, 1k GIF


FAQ:



Q.>>>: One detail I remember from your posts was that all image processing should be done in TGA, not JPEG format. So, if I have a file already in JPEG format, I should first translate it to TGA, do my color-correcting and resizing of the picture, then re-convert it back to JPEG when I'm ready to put it on my web page?"

A.>>>: Ideally, yes, you should convert it to the TGA format. But you should save that corrected, resized TGA file first (under a new name, so you still have the original), before converting it to JPG. This way, if you forgot to do something else to it, you don't have to start with the larger TGA original. You shouldn't work on the JPG image and resave it... Every time you save a JPG file *at any quality*, there is a loss of information. If you start with a 90% JPG file, and crop it and save it again at 90%, that is the equivalent of cropping the original scan and saving at 81% quality (.90 x .90 = .81). On the other hand, TGA and TIF are known as "lossless" formats. You can change the file and save it several times without affecting the unedited pixels. With our fictitious 81% JPG file from above, if after cropping and saving we suddenly realize that we have to lighten the image and save it again at 90%, our 'real' quality would be .81 x .90 = .729 or 73%! An even worse example-- Resaving a 50% JPG (again) at 50%, yields a 'real' (and unacceptable) 25% quality! If we did our changes to a lossless format TGA or TIF, saved it 50 times, and THEN saved the final version at 70% JPG, that's exactly what we'd get-- 70%!


Q.>>>: But why is it so important that my photos look perfect? I'm not a photographer, I just want to put up some pictures of my Stealth on my website!

A.>>>: These cars are works of art, and photos of them should be good enough show that accurately. A lousy JPG will make a car's finish look mottled. Photos with smooth open areas next to hard lines, (exactly what we have in car pictures, since the edge of every door and hatch is next to smooth metal), most easily show the flaws of a poorly-done JPG. Since on the web we often redo our pages, create thumbnails, and resize photos to fit new layouts and posting requirements, saving a manipulated image many times is just a fact of life. The best way to prevent the 'deterioration' of a good digital scan of a photograph is to use TGA images throughout the adjustment process. Here's a scenario of how you can do that to preserve the original quality of your photograph:

Start by saving your scan as "PhotoA-original.TGA". Once you have adjusted the color & brightness, save that version as "PhotoA-colorcorrected.TGA", (or "PhotoA-CC.TGA"), for example.  [If you are happy with your corrections, you can delete the 'original' file].  If you then crop out unwanted edges of the photo, save it again as "PhotoA-colorcorrected-cropped.TGA" (I use "PhotoA-CCC.TGA").  Every time you need a new size of the photo, start with the cropped, color-corrected TGA scan, resize to the new dimensions, and save as another TGA, "PhotoA-resized640x480.TGA" or "PhotoA-resized300x200.TGA" (use whatever pixel dimensions you have made the new image). If that image is the one you will be placing on your page, NOW is the time to convert the image file to the JPG format, using a shorter name, of course.  Since you started with an uncompressed scan with ALL of its original visual information, you can use a lower 'quality' setting for the JPG than if it had been compressed previously. This will result in a much smaller file size, so your page will load a lot faster AND the image will still look great.



Q.>>>: Why will people supposedly only wait for 30 secs for a web page to load if they have a 28.8k modem, but only wait 15 seconds if they have a 56k modem? Are people with 56k modems more impatient?

A.>>>: In a word, yes! People who buy 56k modems want and expect their pages to load twice as fast. In other words, they're only willing to wait half as long while a web page loads. You've got roughly 15 seconds to show them what they came for, or they're gone.


Q.>>>: But when I save all those TGA files it takes up so much room on my hard drive - what can I do?

A.>>>: If saving relatively large TGA files starts taking up too much room on your hard drive, WinZip them. Naturally, if you're not working with them very often, it makes even more sense to move the WinZipped files to either CDR or Zip Disks for storage.


Red Gradient Line, 1k GIF

Questions about your car???
Ask the other owners--
On our FREE mailing list!
Click HERE

Red Gradient Line, 1k GIF


3D & Ram Logo anim, 6k GIF


Team3S FAQ Page


Team3S HOME



All Images 1995-2004 Bob Forrest, All Rights Reserved.