Frequently Asked Questions

Images: Color Size and Resolution
Images: Formats and Preparation?
What is the difference between GIF and JPG? Which should I use?

Images: Color Size and Resolution

A quick guide to understanding and preparing graphics
Two of the most common problems I encounter as a multimedia developer are low-res and improperly formatted images. Frequently I will request a "high-resolution" version of a client's logo and, instead, I receive a small blurry graphic. By reading this article, I hope you will have a better understanding of how and why images for the Web should be prepared to certain specifications.

Images must be optimized if they are to appear sharp and clear in their respective media. And each medium (print, Web, or CD-ROM) has its own requirements. By optimizing each file as to color palette, resolution, and file size, we are able to keep the art looking its best in each situation.

Color
Two basic color formats are used in media production. CMYK is used for print media, including textbooks, magazines, brochures, and newspapers. CMYK stands for Cyan, Magenta, Yellow, and Black, which are the four colors used to create most color publications. Every color photo or graphic you see in a magazine, for example, is actually composed of some combination of these four colors.

The other color process we should be aware of is RGB. RGB stands for the three-color process consisting of Red, Green and Blue. RGB is most commonly used for computer and television graphics. Examples include CD-ROMs, motion pictures, computer-aided design, and the Internet.

Resolution
The next thing to know about image preparation is resolution. When preparing images, it's essential to consider where they will be used. Resolution is most commonly measured in DPI (dots per inch). Screen graphics (such as graphics for computers) are usually created at 72 or 96 DPI. Print graphics on the other hand tend to vary. 300 DPI is a common minimum resolution, though some publications may require as high as 2500 DPI or more. Larger prints (such as graphics created for tradeshow booths or billboards) may have special requirements, as they are created for viewing from a vastly different distance.

It's important to note that, if you are preparing graphics for someone, or are requesting graphics for someone else, and you are not sure whether the graphics will need to be optimized for the screen or for print, always choose the higher resolution. It's always possible to take a large graphic and successfully reduce it, but when you try to increase the size of a small image, you are beginning with fewer pixels with which to fill a larger amount of space. Thus the image becomes distorted as it attempts to compensate for the missing pixels.

Size
Size should never be confused with resolution. Think of resolution (or dpi) as an image's density. Think of it as though you were to look at an image and count the number of pixels in exactly one square inch. Size, on the other hand, is how big the image appears to us visually. A higher resolution will allow us to display with greater detail. A larger size may allow for something to be seen better from a greater distance.

Size on a computer screen is always measured in pixels, as width and height. Width is how many pixels across, while height is the number of pixels top to bottom. If a display is set to show the viewer 72 dots (pixels) per inch, an image measuring 72 pixels wide by 72 pixels high will display as exactly one inch across and one inch tall. However, if the display is set to show the viewer 96 dpi, that same 72 pixel square image will appear something less that an inch square on the 72 dpi display. Conversely, if an image was created at 300 dpi, and is intended to print at 1 inch wide on a 300 dpi printing device, on a 72 dpi computer display it will appear to be more than four inches across!

Although height and width are also the basis of measuring things for print pieces, when measuring for print we employ units such as inches or centimeters instead of pixels.

Now we've covered the basic attributes of an image:

Color: RGB or CMYK
Resolution: measured in dots per square inch (dpi)
Size: measured as height/width in centimeters, inches, picas, points, or other type of unit

I encourage you to read the follow-up article on image formats and preparing images. There we will go through the process of how best to save your images, knowing (or maybe not knowing) where and how they will be used in the future.

Images: Formats and Preparation?

In the previous article we covered the ins and outs of color size and resolution as they relate to preparing images on the computer. We discussed the relevance of each element in the preparation of images for print or for computer graphics. Now we will be moving on to image formats. What are some of the image formats and why would you choose one over another?

The number of image formats available for saving an image are almost as many as the number of programs there are to save them with. Still, there are a few image formats which may be considered "industry standard" or which are common to say the least. Some of these formats, with their file name extensions, are:

.PSD – Photoshop document
.AI – Adobe Illustrator document
.EPS – Encapsulated Postscript file
.TIF – Tiff file
.TGA – Targa file
.BMP – Bitmap image
.GIF – CompuServe Gif image
.JPG – JPEG image

Some of these file formats include information that is more detailed than other formats, which may allow them to be more easily updated in the future. Among all image formats there are two basic types, those which are composed of pixels and those which are composed of vectors (or mathematically described lines and shapes).

Pixel Based Programs
Pixel based images appear distorted when enlarged because they are composed of a series of dots called pixel s. Therefore, if you take an image that is 100 pixels by 100 pixels square and blow it up to 1000 by 1000 pixels, the new pixels must be extrapolated — guessed at. The results are never ideal, and often are disastrous. In the worst cases, the image suffers obviously from a bad case of "the jaggies."

Vector Based Programs
Contrary to pixel-based images, vector images are created by mathematical formulas and generally comprise geometric shapes. Vector-based images are ideal for such graphics as logos or text. The advantages of vector art include dramatically smaller files sizes and the ability to very easily make changes. Vector images may be blown up to 12,000% of their original size without any distortion. Were you to do the same with a pixel-based image you would most likely not even be able to tell what the original image ever looked like.

How does vector art work? Lets say you were to make a red square in a vector-based program. Instead of recording the position and color of hundreds, thousands, or even millions of pixels in the image, a vector-based program would instead create a formula for the image which would record a shape with four sides, while mathematically describing the corners and the color.

Pixel vs. Vector
So, that's pixel vs. vector. Which is better? It depends. If you're working with photographs or images with a lot of depth, pixel-based programs tend to be better. If you're designing something out of geometric shapes (logos, line drawings, or text, for example) vector tends to be better. That's not to say that you can't design something in one program and then bring it into another. You can always take a vector image and make it pixel-based, but you can't very well adapt pixel-based images to vector-based programs. Some programs will allow you to use pixel-based images as placeholders and may even allow you to convert the image to a series of vector shapes, but you never will have the same amount of depth or detail you would have had were you to create the design with a pixel-based program in the first place.

Now, let's discuss the various types of image formats.

.PSD
Adobe developed this format for its Photoshop application, which has become the industry standard for the design of pixel-based images. Advantages of Photoshop are that you can create your art in different layers, which vastly simplifies the task of editing individual portions of a composition. File sizes are usually fairly large though Photoshop offers the ability to save images in any resolution, color, or size. P The main disadvantage is that you need to have Photoshop on your computer in order to be able to read Photoshop files in their native format (although Photoshop enables you to read many other types of file formats). Photoshop also has a steep learning curve and is expensive. Nonetheless, .PSD files are preferred by many designers because they are by far the most versatile (provided they are not flattened, that is, as long as the individual layers are kept separate from each other.

.AI
Illustrator is Adobe's answer to the vector graphics creation. Though not as well established as .PSD's, .AI is a good format to use because it can save numerous layers in addition to being able to preserve vector shapes in their native format. Illustrator is used for both creating and editing .AI files though its strength is its ability to save files in .EPS format. (Illustrator can also export .AI files into various pixel-based formats.)

.EPS
.EPS (or Encapsulated Postscript) files offer us tremendous usability in the multimedia industry. Within a single .EPS files, one can include vectors, bitmaps, and text. It is the preferred file format of print professionals.

.TIF
Tiff files are renowned for how well they preserve the details of pixel-based images such as photographs or collages. Their quality level is high and they offer the added bonus of being a file format which transfers well from PC to Mac and back again.

.TGA
Targa files also are known for their exceptional cross-platform compatibility though they are most commonly used for images in video and are generally not used in print design. An added bonus of the Targa file is its ability to save a third layer which may be used as a mask to show only part of an image at a time. Assuming that the image size is correct, Targas are the best files to send a video technician.

.BMP
Commonly referred to as Windows bitmap, .BMP is not a very common format used by designers but it's a good file format to send to people who are using Windows-based machines. The reason for this is that Windows comes with its own image manipulation program called Paint which would allow any Windows user to open a .BMP.

.GIF
The .GIF format was actually developed by once dominant CompuServe. A company which has been around since the beginnings of the Internet's popularity, CompuServe fought hard to maintain a patent on their compression scheme and eventually lost. Nonetheless, .GIF files today are one of the two most popular image formats on the Web. It is a lossy compression format, which means that when you save a file as a .GIF there is usually some information from the original image which is left out. As a result the .GIF file format provides some of the smaller file sizes thus making a good format for the Web. After all, the smaller the file size the faster the image will download. Another advantage of using .GIFs is their ability to preserve transparency and then utilize this on a Web page. And of course we mustn't leave out its ability to save an animation sequence.

.JPG
Last but not least is JPEG. JPEG files are also a Web favorite because they too have the gift of small file sizes. Like the .GIF, the .JPG is a lossy format which will sacrifice detail in order to prevail a smaller file size. However, where the .GIF is good for images with solid color like logos, JPEG files are better at compressing photographs for Web use. Neither is ideal for a sharp print image, but both make for short download times when properly compressed for the Web.

In conclusion, there are all sorts of different file formats available to us and some are better for print while others may be better for video or the Web. Finding the right format for the job is key, and our hope with this article is to help you to do that better. After all, great imagery isn't worth anything if you can't see it at its best.

What is the difference between GIF and JPG? Which should I use?

A lot of people designing graphics for the Web aren't sure whether they should use the GIF or JPEG image format for their graphics, and aren't even sure just what they are. Here's a quick rundown.

JPEG and GIF are the two chiefly used image formats on the Web today. Just as there are Word documents and Excel documents, each offering a specific advantage, the same is true of GIF and JPEG files.

JPEG files tend to be best for things like photographs and other images with gradients of color. Due to the way a JPEG is compressed, JPEGs tend not to do hardline art well.

GIF files, however, tend to be better for flat-style illustrations, with large areas of continuous color. Things like logos and text treatments hold up well as GIFs because there is no blurring of the edges. The files remain sharp and well defined. Another feature that the GIF format offers is transparent backgrounds which allow you to see the background of a Web page. And finally, there is the option of animation. The most common application of Gif animation is banner ads.Overall, GIF files tend to be smaller than JPEGs when used properly.

So, which are better GIFs or JPEGs? That depends, what are you going to use them for?