lecture notes for Media Tech

File formats

I do not want to take up class time for lecture unless necessary. Thus, I may be sending emails from time to time to impart information you will need to master whatever application we are working on.

This discussion of graphics formats applies primarily to photoshop, but is relevant to all desktop and web publishing.

Resolution and file size
Graphics are delivered online at 72 dpi (dots per inch). That is, an inch of graphic is equal to 72 pixels. Obviously, this figure varies according to monitor size and screen resolution. But the standard is that 72 pixels equals one inch when viewed at 800x600 on a 15-inch monitor. Most of us are now using better monitors. So at 800x600, 72 pixels will be a bit larger on, say, a 17-inch monitor. (I’m not doing the math, but the 17-inch monitor’s picture will be roughly 17/15 of the 15-inch monitor’s picture.) On the other hand, if the resolution is higher, the images will be smaller, because on hi-res monitors, each pixel is smaller.

Graphics for print must be a good deal higher than 72 dpi. A mimimum is 144 dpi, or twice the online. If you want to use an internet graphic in print, you must find a picture that is twice the width AND twice the height of the size you want it to be in printout. If, for example, you want a one-inch printout, you must find a 2x2 inch internet graphic. The math: four square inches is 4 times the size of one square inch. Strictly speaking, then, you would reduce the 2x2 graphic to 25% of its original size to get a 1x1 graphic. Photoshop, however, gives you the percentages for height and width separately. So you would reduce the width by 50% and the height by 50%, yielding a total reduction of 25%.

Scanning and descreening
Photoshop's older versions were designed to import directly from scanners. Newer versions (CS6 and CC) do not. Before you scan, you must determine the final purpose of your art. If it is to go online, and the art is the same size you want it to appear on a 15-inch monitor set at 800x600, scan at 72dpi. If the art is smaller, by, say, half, scan at 144 dpi, and then increase the pixel dimensions by 100%, and reduce the resolution by 50%. If the art is to go to print, scan fat, say, at 600-1200 dpi. This makes an extremely large file, but it gives you many more options on final size, and other photoshop variables.

In the best of all worlds, you would measure the existing screen (or dpi) of what you plan to scan. This takes a special tool (which I have and you can find). Then you would command the scanner to descreen, or remove the effects of the existing dot pattern. If you do not do this, you can get a moire pattern, or a crosshatching on halftone material. Unfortunately, only a few scanners offer this feature. The workaround is to scan fat and then reduce the resolution.

File formats overview
You can save scanned or created images in several formats. The most stable of these is the TIF (tagged image format). If you are scanning for archival purposes, scan a fat TIF. Photoshop and all other image editing software respects and opens the digital TIF. These files can be manipulated and saved into any other format with no resolution or image loss.

Online formats
There are three basic formats for online work, the jpg or jpeg (Joint Photographic Experts Group), the gif (Graphics Interchange Format), and the png (Portable Network Graphic). The jpg works well for photographs because it handles color gradations well. The jpg is a LOSSY format: it throws away information when its file size is reduced. Once you've reduced or optimized a jpg, you cannot make it big again. This is a very useful file format, however. It is importable into photoshop, quark, indesign, powerpoint, word and most other applications. It can be sized to fit available file space, and is easily resized in most applications. Digital cameras save their images in jpg format. The difference between photo qualities with digital cameras is the difference in jpg resolution. The higher the resolution, the bigger the file size, and the fewer pictures you can get on your memory card. My solution is to buy extra memory cards. The disadvantage to this file type is that it will always have a background color, usually white. It also does not handle sharp contrast well.

The gif file is for graphics or line art. Its colors are crisp, and not lossy, so it will not start throwing away color information when it is reduced. It does not need a background color, and works well where transparency is required. The gif is a proprietary format, created by Compuserve. Some years back, America Online bought Compuserve; so now AOL owns the gif format. It is possible, if unlikely, that AOL could start asking a nickel for every gif on the internet. Because of this, Adobe created the png.

Adobe created a non-proprietary file format, the png. The png file does an adequate job with photos, though the jpg does better. It does well on illustrations, and can be saved as a transparency -- without a background color. Photoshop and illustrator offer the png-8 and the png-24. Some photoshop effects do not work on png-24s or on any other 24-bit graphic. So save as the png-8. You won't be able to tell the difference.

Print formats
The print formats include tif or tiff (Tagged Image File Format). This is the best format for non-proprietary (non-photoshop) file storage. It creates a large file, but it retains much detail, and is importable into most publishing packages. High resolution jpgs are also used for print graphics, as is the eps (Encapsulated PostScript) and the pdf (Portable Document Format). The value of the eps is limited to high end postscript printers, and is best used in magazine and newspaper shops. Most eps and pdf files will open in illustrator.

The jpg file is also commonly used in print for photos.

Text renders poorly in photoshop, becoming fuzzy when it prints. A good rule is to do all your photographic work in photoshop, and everything else in illustrator or indesign.

Vector vs. Raster formats

Raster images are what you get in photoshop: rows of pixels, each having its own color. Photo files are large because every part of the document MUST have pixels in it. Vector images are mathematical constructs. In a vector image, if you see nothing there, like white space, there is in fact nothing there. A circle, for example, is an imaginary dot with a color, say, eight pixels away from itself, and then another pixel eight pixels away, and another and another on around the center point. Thus, the only pixels are the circle itself -- not the white space inside, not the background upon which it rests. In general, vector images are smaller and cleaner-looking than raster images.