Adobe Training - Learn Photoshop and Adobe Creative Cloud
Melissa Piccone is an Adobe Certified Instructor with over 20 years of experience in Photoshop and Design
Creative-Training.com

JPG vs GIF & PNG

I originally wrote this article way back when (1995-96?), before the software that is around today was created. The basic concepts still apply, but the techniques have become obsolete. I highly recommend using Adobe's products for web development, including Photoshop, Image Ready and GoLive. They are my personal prefrences.

Quick Update and Overview:

JPG = good for photos, continuous tone images (gradients), millions of colors, lossy compression (each time you save, more quality loss) - small files - always save for web - don't use a jpg for print - too big

GIF = good for graphics, solid colors, logos, - one color can be transparent (not very useful), can be animated, between 2 - 256 colors, small files for graphics, larger files if using a photo

PNG = 8 bit and 24 bit - 2-256 colors for 8 bit, millions for 24 bit. 8 bit not helpful - lossless compression - 256 levels of transluncey - same as a Photoshop layer, so you can have a nice drop shadow with transparent backgound - large files - use only for necessary transparency

Jpegs and gifs are the most commonly used graphic formats on the web. Each has it's unique advantages and disadvantages. The material covered in this article will help you decide which format is more appropriate for your images. A general rule of thumb; use gifs for illustrations, clip art, and images with large areas of flat color, use jpgs for photographs and images with continuos tones.

Prepare Your Images
Your images should be RGB, 24bit when you begin. It doesn't matter where they come from, digital camera, scanner, clipart, custom illustrations, or from another document. Be sure to keep an original around for any changes you want to make later. I recommend keeping everything in Photoshop format, so you can retain all your original information, and layers you may have. If you don't use Photoshop, keep an original as a tiff, pict, or bmp. (For all you graphic designers out there, people really do use pict for something!) This will give you the most flexibility. I mention this, because I often use images on the web that were originally created for print. These images are usually CMYK, or 1bit (black and white). I immediately convert them to RGB, and change the DPI to 72. Creating images for the web is completely different from creating images for print.

DPI (Now it's PPI)
DPI is dots per inch. Images created for print usually have a dpi of 300 to 800. When receiving an image from an outside source, make sure you look at the dpi. Always keep web images, or any image that is for display on a computer only at 72 dpi. Your monitor can only display 72 pixels per inch, anything more is a waste of hard disk space. Occasionally you may want to scan an image at a higher resolution to remove a moire pattern, or enlarge the image. When you are finished manipulating it, you must still set the dpi back to 72.

Bit Depth
Your bit depth is the number of colors your image contains:

24bit = millions of colors
16bit = thousands of colors
8bit = 256 colors
4 bit = 16 colors

 

Bit depth is important when creating the smallest gif possible. Jpgs are always 24bit. See Optimizing Gifs.

Graphic File Formats
Different graphics file formats store data and compress it differently. TIFF format is one of the largest because it saves an alpha channel in the file. If you don't know what an alpha channel is, you have no reason to use TIFF, unless your using your images cross platform for MAC and PC. PICT files can be saved at any bit depth, and the file size will correspond accordingly. PCX is the PC version of PICT, and BMP files can be saved in 1bit, 4bit, 8bit and 24bit for Windows or OS/2. JPG and GIF files use special compression algorithms to reduce the file size of an image. JPG is a "lossy" compression, resulting in data loss. Make sure you have your original somewhere and just make a copy to compress. Once you compress the data, the information is lost and you can't restore the image.

Many WSYWIG HTML editors will take an image and convert it for you. I highly recommend that you control the process in an image editing program.

Using the Web Safe Palette
Mac and Widows each have their own custom system palette. The web palette is comprised of the 216 colors that are contained in both palettes. This guarantees your images will not dither, or shift colors. Dithering that you did not intend or do on purpose is a bad thing. It can be difficult to always use the safe colors, but it is becoming increasingly easier. MacOS8 has a new color picker just for the web safe colors. Photoshop allows you to save images in the web palette, and you can import the palette into your swatches for easy access.

Dithering
GIF supports images that are 256 colors or less. You can "dither" a photograph down from millions of colors to 256 or less. Dithering is an algorithm used by graphics software to decide which colors to keep, and how they are placed. Dithering is most effective (and desired) with gradients of color. Gradients tend to form bands of color which can often be seen by computers with only 256 color capability when viewing a photograph that is in millions of colors. There are pros and cons to dithering. Sometimes it is necessary to make the image look better. When saving as a GIF, dithering takes up more space. A gif saves 'blocks' of colors, making a dithered image larger. The more 'flat color' you have in a gif, the smaller it will be. If your image has several elements in it, like a textured background and flat colored text, you want the background to dither, but not the text. See How TO

Designers have some new alternatives: Dither Box and ColorSafe. Both are plug-ins for Photoshop, and extend your palette. You choose a color, and the plug-in will use colors from the web palette to create that color by dithering. The dithering is virtually invisible to user. You can only use this to fill an area, and file sizes will probably be larger.

 

 

Photoshop Dither
DitherBox Dither

GIFs
GIF was created by Compuserve as a machine independent file format. GIF files can contain one or more images with 256 colors or less. The images are compressed using LZW compression, reducing the file size by 30-50% or more. Gifs are flexible, and have capabilities that jpg doesn't, such as animation ( GIF89a) and transparency. There are interlaced gifs that load gradually, allowing the user to see parts of the image while it's loading. Interlaced files also take longer to decompress, and may actually take more time to download, although it may seem faster because the user has something to look at. It isn't worth the decompression time for small files. GIFs can also have transparent backgrounds to show the underlying background color or image.

If I am using original artwork that has only a few colors, like logos, bullets or clip art, GIF works better. JPG distorts edges where there is a sharp contrast in color.

32 colors GIF 11k
17 million colors JPG 22k

JPGs
Jpgs do not limit colors, making this format the preferred for photographs. Always save your original image in a format other than jpg so you can go back and make changes later. If you save a jpg as a jpg after altering it, you are compressing the image again, causing lots of icky (that's a technical term :) things to happen. Your jpgs can be highly compressed for really small files, or just a little compressed for larger files. You should experiment and save the image with the most compression, while still maintaining an acceptable image. If you save a jpg in Photoshop, you will not see the effects of the compression until you close the image and reopen it.

Netscape 4 and Mac
Netscape 4 for Macintosh will no longer use anything but the 216 colors to display images, making everything look really gross. This is a problem, hopefully they will fix it.

  

Copyright © 1995 – 2014 Cyber Element, Inc.
Creative-Training.com