(@) Main | About The World | Web Hosting | Help | Memo | Login | WebMail login


(Article reprinted from "Today On The World", our daily newsletter. Warning: may contain an opinion.)


PREPARING IMAGES FOR THE WEB


1.  TWO FORMATS -- GIF & JPEG

There are two types of images which are supported by "normal" Web browsers: GIF and JPEG. (Most Web browsers also support the old XBM format, but there's no reason anyone would want to use XBMs; some browsers may also support additional formats such as the potentially useful PNG, but you'd better stick to GIF and JPEG right now. Web browsers do not normally display BMP, PICT, TIFF, etc. pictures.)

So a lot of what I'm going to say here boils down to one piece of advice:
USE GIFs FOR SOME THINGS, USE JPEGs FOR OTHER THINGS.

If you're too lazy to read to the end, let me spell it out now:
USE GIFs FOR THINGS WITH SOLID COLOR OR HOLES.
USE JPEGs FOR PHOTOS OR THINGS WITH SOFT SHADING.

GIF files should have names ending in .GIF (or .gif -- remember that The World is case-sensitive, so whether you name your files .gif or .GIF be sure to spell the filename correctly when you make a link!) and JPEGs should have filenames ending in .JPG (or .jpg). Note that you may also see JPEGs with filenames ending in .JPEG, which may also work, but not all browsers are set up to know what to do with .JPEG files as opposed to .JPG files.


2.  INDEXED & RGB COLOR MODES

There are two ways of storing color (or brightness) information inside an image. Here I'll refer to them as indexed color and RGB color.

"indexed color" aka "palette mode" means 256 OR FEWER COLORS.

"rgb color" aka "true color" aka "24-bit color" or "32-bit color" means MILLIONS OF COLORS.

The biggest difference between GIF and JPEG is that GIF stores an indexed color images (and is thus limited to 256 colors) while JPEGs store RGB images in millions of colors. In other words, the two types of image will look the same (more or less) on a computer that is limited to displaying 256 colors, but on a computer that can display millions of colors the JPEG will look much better.

In image-editing programs like Adobe Photoshop, you may have to convert the image to the right mode (look under "Image->Mode" on the Photoshop 4.0 menus) before you can save it as a GIF or JPEG. Usually you'll do your "painting" on an RGB image, and then convert to indexed color mode if you need to save it as a GIF. (Whether your destination format is GIF or JPEG, save a copy of your image as an RGB TIFF or PSD file before you convert it to GIF or JPEG so that you'll have a "clean" version in case you want to edit it later.)


3.  GIF COLOR PALETTES

I said that GIFs can contain up to 256 colors. Normally when making an indexed color image in a program like Photoshop, it asks you how to select what 256 colors to use. Usually you will see a choice along the lines of "Adaptive", which will use the 256 most common colors (or approximations thereof) in the image. There will also be a "System" palette, which will be Mac-specific or Windows-specific, and a "Web-Safe" (or "6x6x6" or "Web 216") palette. In general, you should use the "Web-Safe" palette. Although it has only 216 colors, these colors are guaranteed to be available in any browser (Internet Explorer, Netscape Navigator, etc.) running on any sort of operating system (Mac OS, Windows) displaying any number of colors (256 or millions.) In other words, "Web-Safe" is the lowest common denominator. If you use other colors (with the "Adaptive" palette, for example) those exact colors will not always be available on other peoples' computers, and the browser will display the image with dithering (speckles of two different colors mixed together to simulate the one you're trying to use.) If your image doesn't look good when reduced to the 216-color "Web-Safe" palette, you should probably consider using a JPEG instead of a GIF.

(Don't put a sign on your Web page saying "Your computer should be set to millions of colors for best results." NOBODY is going to buy a new graphics card or switch display modes just to view a Web page. Just make your images easily viewable by everyone. If you need lots of colors to do soft shading, use JPEGs.)

An even better idea regarding GIFs is to have the computer limit the palette to as small a size as possible. For instance, if your GIF icon only has 16 colors in it, using only 16 colors from the Web 216 will result in a much smaller file than the same image saved with the full Web 216 palette. You can do this (in Photoshop) by first converting the image to indexed color with the Web palette, then back to RGB color, then convert to indexed color again with the Exact palette (i.e. first you change all the image colors to Web colors, then you build a new palette from only the colors that are in the image now that they're all Web-safe.) A small icon with only 4 or 16 or 32 colors in it will often be under 1K! (You want the icons on your Web page to load really fast, so shrinking the file sizes down as much as possible is a good idea.)


4.  ARTIFACTS IN JPEGS

The limitation with GIFs is that they can only contain 256 colors (216 if you're sticking to the Web colors) and so, as a result, tend to look cartoony. (They're best for things with solid areas of color, line drawings, icons, that sort of stuff.) JPEGs can contain any color you can think of, which means that they can do photographs and subtle shading very well. Of course, the fact that a JPEG contains thousands of times as many colors as a GIF means the picture contains more data -- and so the data must be tightly compressed to keep the file from being huge.

This is accomplished via "lossy" compression: the image data is slightly altered (via the introduction of "artifacts", which look like fuzzy areas around edges of things) to enable the computer to store less data by reproducing the image less faithfully. This isn't as bad as it sounds -- you can control the degree of compression (highly compressed files look fuzzier, but less compressed files look less fuzzy) and photos still look better, and compress better, as JPEGs than as GIFs.

So JPEGs look better, and compress better, than GIFs for images with lots of colors (photos, etc.). And you can vary the tradeoff between image quality and file size by changing the degree of compression.

(Because JPEGs have trouble with sharp edges, GIFs are better for line drawings, icons, and cartoons.)


5.  SPECIAL GIF FEATURES

GIFs can do some tricks that JPEGs can't. For instance, a GIF can have one color designated "transparent", so you can poke holes in your image (or have an icon with an irregular outline.) Also, GIFs can be used to make animations (although they tend to play back at different rates in every browser you try them in, because GIFs were never intended for animations -- the official GIF specification actually says not to use them for animation, but everybody does anyway because it's the only way to put animated elements on your Web page that all browsers can display without plug-ins.)

So if your image needs to have holes in it, or to blink on and off, use GIF instead of JPEG. A discussion of how to make animated GIFs is beyond the scope of this document, but let me just warn you: making transparent GIFs and animated GIFs is easy. Making an animated transparent GIF is more advanced: you need to understand how to use "disposal methods" to keep things from leaving trails or disappearing as they move. If you make animated GIFs, test them with every browser you can find on every computer you have access to, and note the wide range of speeds they play at.


6.  INTERLACED GIFs / PROGRESSIVE JPEGs

Images normally load from top to bottom as they are transmitted from the Web server to the browser. GIF supports an "interlaced" option that causes them to load in stripes (first every eighth row of pixels loads, then every fourth, then every second one, then all the rest) and JPEG supports "progressive" (first it loads at one-eighth resolution, then at one-quarter, then one-half, then full.) However, there are some good reasons not to use these options all the time:

  1. Interlaced GIFs generally are slightly larger files that take longer to load than non-interlaced ones (because the data is stored out of sequence, it doesn't compress as well.)
     
  2. In many browsers, interlaced GIFs look weird when they load -- just a bunch of stripes that don't tell you very much. Some browsers smooth out the stripes to make it look more or less like a progressive JPEG, but not most. Usually I find it easier to tell what a picture is going to be from the top half of it rather than thin stripes of it.
     
  3. Some programs can't display progressive JPEGs. Not many, but there are a few out there that only take sequential (non-progressive) ones.
     

7.  DO's & DON'Ts

  1. DO use GIF for line drawings and icons. DO use JPEG for photos. DON'T use GIF for color photos. DON'T use JPEG for line drawings.
     
  2. DO always include WIDTH and HEIGHT in your <IMAGE> tags. Why? Because while a page is loading, Netscape Navigator can't draw the part of the page that is below a graphic which hasn't loaded and whose size isn't specified. And because in Internet Explorer and Mosaic, the text may hop around as the images load. In other words, you should tell the browser how big the images are so that it knows how much space to leave for them so it can display the page before the images are transmitted. Trust me, pages will load more rapidly and/or more neatly if you spend a couple seconds adding WIDTH and HEIGHT.
     
  3. DO include either descriptive ALT text ("My house") for a picture of your house or a null string ("") for icons that don't serve any purpose other than decoration (such as bullets.) The ALT is the description of the picture (think of it as a caption) that people see before the image loads, or in browsers that do not display pictures (such as lynx.) Some browsers (such as some Windows versions of Internet Explorer) show the ALT text popping up when you point to any image. DON'T include ALT text along the lines of "Image" or "Tell your browser to load images to see this picture."
     
    <IMAGE SRC="filename.gif" WIDTH="128" HEIGHT="40" ALT="Me smiling.">
     
  4. DON'T use interlaced or progressive images without a good reason.
     
  5. DON'T convert your existing GIFs to JPEGs or vice versa without a lot of care. That way you could get both kinds of artifact: the fuzzy edges of JPEGs and the dithering of GIFs.
     
  6. When making a JPEG, DO try saving your image at several different compression levels to see how large the files are versus how good the images look. Note that the tradeoff is different for different images, so some experimentation might be worthwhile whenever you make JPEGs if you want to shrink the files as much as possible.
     
  7. DO test your Web page on different computers, with different browsers. Also try switching to 256-color ("8-bit") and millions of colors ("true color", "24-bit", "32-bit") and then restarting the Web browser to see how the graphics change when viewed with different numbers of colors available. Also, you'll be surprised how different every version of every browser is.
     
  8. DO be aware that different people have different size screens -- someone with a 640x480 screen might have a Web window about 600 pixels wide. WebTVs have 544 pixels across, and a printed page usually accommodates about that many 72dpi pixels. I recommend staying under 540 pixels wide to ensure that your designs fit on paper and in people's windows. DON'T say "You must be in 32-bit color mode at 1600x1200 to view my Web page." People aren't going to upgrade their computer just for you.

In other words, what I'm beating you over the head with is "Hey! Other people have different setups than you do. You need to make your design accessible to everyone instead of just ruling out the people who don't have computers as good as yours."

</RANT>

Also,if you're building your Web site on a Mac -- do NOT include Mac icons or QuickTime preview images when you upload your GIF or JPEG files. Mac FTP tools support two kinds of binary transfers. The first kind, which Fetch calls RAW DATA (sometimes called DATA FORK ONLY) is what you want for .gif's and .jpg's and so on. The other kind, MACBINARY, preserves the Macintosh file icon, the QuickTime preview image, and so forth--the Mac-specific stuff which shouldn't be included with your .gif's and .jpg's (even Mac browsers expect to see the picture's raw data without the Mac icon or preview.)

So we suggest that if you're making graphics on a Mac, and they have preview icons, either configure Fetch to upload them as RAW DATA, or else use a utility like ResFork Killer to eliminate the Mac-specific stuff (the resource fork).

    ResFork Killer (for Mac OS):
    http://hyperarchive.lcs.mit.edu/cgi-bin/NewSearch?key=resfork

(kibo)



(@) THE WORLD Comments? Questions? Problems? Contact us.
Page last modified September 5, 2003.
Web site contents & design Copyright © 2014 Software Tool & Die.

Legal information. | Privacy policy.
Spammers are crooks! Don't do business with crooks!