Present It! Photography and Graphics

Getting Familiar with Web Graphics

The three primary image formats for the web are GIFs, JPEGs and PNGs.

In converting an image file into a GIF or JPEG or PNG, some data is always lost. Usually, it’s the number of colors in the image's palette. By compressing an image and removing some of its data, you get a smaller file size and a quicker download speed.

All web images — whether photographs, graphic treatments of text or illustrations —must be saved in either GIF or JPEG format. You can use any graphic editor to create those images. Some of the most common software applications are Adobe Photoshop, Adobe Photoshop Elements, Adobe Illustrator and Paint Shop Pro. Many others are available, but these four give you a wide range of flexibility and can create web-ready files. Throughout this discussion of photographs, we provide directions for using Adobe Photoshop to create and edit images.

GIF

GIF stands for Graphic Interchange Format. A GIF can use up to 256 colors and no more. You can save a GIF as a smaller and smaller file by decreasing the number of colors used in the palette. Because only 256 colors are available, the GIF compression technique is more suitable for images and graphics with fewer colors and large areas of solid color.

JPEG

JPEG (Joint Photographic Experts Group) images use thousands, even millions of colors, and are better used for photographs and images with lots of shading, gradients and blending.

PNG

Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF as an image-file format not requiring a patent license. It is pronounced "ping."

Quality

Quality is determined in part by resolution. Resolution is measured by pixels, a tiny unit of measurement used by computer monitors. Did you ever notice that web graphics don't always look great when you print them? This is because the computer screen only displays 72 pixels per inch (also referred to as dpi), whereas a good quality print image is usually around 300 dpi. So, if you try to take an image off the web and make it larger, the quality will be poor.

There are some exceptions to this rule. Simple graphics, such as bullets and text treatments (enhanced text boxes in a nav bar, for example) are almost always best created at the resolution you need for web display. Text tends not to resize very well, and it’s also easy to misjudge readability when handling text at a large resolution.

If you used a higher-resolution, print-quality image on your site instead of one that is the standard 72 dpi for web graphics, you image would look very large on your screen. In fact, it will look bigger than it would actually be when printed. So, always be aware of an image’s resolution so that you don’t accidentally create web images much larger than you intended.

As a general rule, you should create high-quality images and then down-sample, or decrease, that quality for web use. Creating original artwork at a higher-than-necessary resolution is useful because, in the future, you might need to enlarge it for another use or print it on a business card or brochure. For instance, you should create a high-resolution version of your logo because you can expect to use it in several different sizes and for different purposes.

For photographs, edit the photos and correct the colors at the higher resolution. Once you’re satisfied, resize the image and decrease the resolution to create a web image.

> READ NEXT ARTICLE: Preparing Images and Photos for the Web