New York - Munich - Portland - San Francisco - Seattle - Stockholm - Vancouver - Zurich
New York - Munich - Portland - San Francisco - Seattle - Stockholm - Vancouver - Zurich
How to create great images
that make your web pages load F-A-S-T-!
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...
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:
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.   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. 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. 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.
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.
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?" |
Questions about your
car???
Ask the other owners--
On our FREE mailing list!
Click HERE
