File Formats

There are several different file formats used to present images on the Internet. Each has advantages and disadvantages. The best file format is the one that gives you the best image quality at the smallest file size.

Graphics Interchange Format (GIF)

GIF is by far the most popular type of image file found on the Internet. GIF files can be compressed to a very small file size and can be used for either color or black-and-white images. They can even be used to create crude animations. However, they are best used for black-and-white images. They can be used for graphics with flat areas of color, but they don't handle color gradients very well. Creating a GIF file for a black-and-white image is very easy. Follow these steps in Adobe Photoshop:

  • Assuming you're starting with a black-and-white image that has been processed for print, you'll need to change it to grayscale mode by clicking on Image in the menu bar and pulling down to Mode and then over to Grayscale.

  • Go to Image in the menu bar, click and drag down to Image Size.

  • Change the Resolution to 72 pixels and be sure Resample Image has been selected.

  • Go to File in the menu bar and drag down to Save for Web.

  • Along the right-hand side of your screen you will see a control panel with several options. You'll be focusing on the top area, labeled Settings.

  • In the upper left-hand corner toggle box, click and select GIF.

  • In the next toggle box down, click and select Selective.

  • In the next toggle box down, click and select No Dither.

  • In the upper right-hand corner of the Settings area, type 8 into the Colors field.

  • Do not select Transparency.

  • When you click OK, you will be asked to name the file and save it somewhere on your hard drive. Be sure to include “.gif” at the end.

  • Many Webcartoonists process their cartoons for the Web and never consider print. If your comic becomes popular, books and other print venues will become a valuable source of income. You don't want to be faced with rescanning hundreds of old cartoons. Process every cartoon for print, save a copy, then convert the file to low resolution.

    If you're using a GIF format for a simple color graphic, you'll find it necessary to increase the number of colors and some of the other settings. The change from each adjustment will be displayed on the screen. Choose the combination that looks best at the smallest file size.

    If you select Interlaced in the Settings control panel, it will save a GIF that loads on your Web site in multiple passes. The result is the illusion of a faster-loading GIF. The GIF will load immediately as a blurry image and become more and more sharply focused as the GIF loads — usually in three or four steps. Choosing an interlaced GIF will result in a slightly larger file size.

    Joint Photographic Experts Group (JPEG) Format

    With its ability to support the full 16.7-million-color spectrum, the JPEG format is best suited for photographic images. This format should be used for a cartoon only if the color illustration has a lot of gradation between colors. However, before committing to this format, compare file size and image quality with the same illustration processed as a Portable Network Graphics (PNG) file. Again, the image should be reduced to 72 ppi before you start any formatting whatsoever. As with the GIF, you can fine-tune your JPEG settings using Photoshop's Save for Web command. Use the upper left-hand toggle switch to select JPEG in the Settings control panel. Selecting Progressive has the same effect as selecting Interlaced for a GIF file. A lower number in the Quality field will decrease the file size but may visibly degrade the image quality.

    The display will show two versions of the same image. On the left is the original image. On the right is how the image will look with the settings you've chosen. Experiment with the Quality field as well as the toggle bar under JPEG. As you will see, Low yields poor results. For most images, you'll set your JPEG at Medium or High.

    Portable Network Graphics (PNG) Format

    The PNG format is a relative newcomer to the Internet. However, its excellent image compression and unique features are making it a very popular choice. A PNG format handles both black-and-white and color images well.

    As with the GIF and the JPEG, you can adjust your PNG settings in the Save for Web menu command. The settings are similar to the GIF. Select 8 colors for black-and-white images and 256 for color.

    The PNG format has a minor problem. It is not recognized by some older Internet browsers. As the years go on, this will have a smaller impact. If you find a large savings in image size without decreased sacrifice in image quality, you may want to risk alienating a few potential readers with older browsers.

    1. Home
    2. Cartooning
    3. Self-Publishing on the Web
    4. File Formats
    Visit other About.com sites: