A Graphics Primer

 

---

 

 

 

Even if you are not creating or editing your own graphics, it is helpful to be familiar with a few basic terms relating to Web graphics.

 

 

 

Image File Formats

 

Images may be saved in a wide variety of file formats, but there are only two types that should be used for Web pages: GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). Both formats are supported by a wide range of browsers and both offer a combination of small file size and high quality. A third format called PNG (Portable Network Graphic) is not supported by all Web browsers without a plug-in, so it should not be used at this time.

 

 

GIF (Graphics Interchange Format) offers something called lossless compression, which means that it normally loses no image quality. However, because of the way it compresses data and the fact that it only supports 256 colors, it should only be used for line art, logos, or graphics with broad flat areas of solid color. It is not the best format to use for photographs or artwork with subtle color variations. GIF if also used for graphics that have areas of transparency or for those used in animations. Files saved in GIF have the file extension .gif.

The JPEG (Joint Photographic Experts Group) file format was developed specifically for photographs and other high-color images. JPEG is a lossy format, which means that some image data is discarded when it is compressed. However, image data can sometimes be discarded with little difference in quality. Because it supports millions of colors, JPEG is the ideal format for compressing photographic images and other images with subtle color variations or textures. It is not the best choice for images with areas of broad flat colors. Files saved as JPEG have the file extension .jpg. Images Copyright 2007-2008 Technically Easy Used under Creative Commons License

 

 

 

If you are working with a scanned image, or have acquired an image that is not in one of these two formats, you will need to optimize the image and save it in one of these formats before you can put it in a Web page. We will address how to do this later in this lesson.

 

Common graphic file formats that you may encounter include: TIFF, PSD, PNG, PICT. Generally, these formats can be imported into a graphics editing software program and optimized as a .gif or .jpg.

 

 

 

RGB

 

When you are working with images in many image editing software programs, you will have choices as to the color space you are working in. Typical color space choices include

 

 

• black and white or line art
• grayscale
• CMYK
• RGB

 

Red, green, and blue are the primary colors of light and are the ones your computer display monitor uses to make up all the other colors of the spectrum. It is the color space you should work in when creating any color graphics for the Web. The printing industry uses CMYK, so if you have artwork that has been used for print publication, you may need to convert the file into RGB before you can save it to GIF or JPEG format for the Web.

 

 

 

Bitmapped Graphics

 

Bitmapped graphics store data as a map of individual pixels. GIF and JPG formats are both bitmapped formats. Bitmapped graphics when resized -- especially when enlarged -- will lose quality and look jagged.

 

 

 

Optimizing Images

 

When we talk about optimizing images, we mean that we are preparing them for Web display. Using Web image editing software, you may reduce an image's color palette, resolution, and dimensions. You will then generally preview the image in a range of file formats and compression settings before making a final selection and saving the image.

 

 

 

Anti-Aliasing

 

Anti-aliasing is a process that adds gray pixels around the perimeter of an image's edge to give it a more smooth appearance. Most often you will see options for anti-aliasing text used on graphic images. It is important not to apply anti-aliasing to text smaller than 14pt, as it makes the text less legible.

 

 

 

 

Resolution

 

To the human eye, resolution refers to the amount of detail we can see in a graphical image. On a computer screen, it is the density of pixels per inch (ppi) in a given image. (In print, it is the number of dots per inch or dpi.) The higher the resolution, the greater the detail. Typical office laser printers offer 600 dpi. Computer monitors render images at 72ppi -- a very low resolution. It does no good to save images at a higher resolution than this for the Web because the quality will not be increased, and the file size will be larger than is necessary. Images created for displaying on the Web should be saved at 72 ppi.

 

 

 

Download Time

 

Count on your 'average' user needing about one second to download each 1K of data. Thus a 30K image will take about 30 seconds to download. You can do several things to decrease the amount of time it takes your users to download images.

 

 

• Limit the size of the image. Larger images make larger files.
• Crop any unnecessary white space or borders around an image.
• Use the smallest color palette possible. Fewer colors will reduce the file size significantly.
• Compress the image to its smallest size. Always use the best file type (.gif or .jpg) for the kind of image you are optimizing.

 

 Create your own educational wiki!Help Privacy Policy RSS