Images from the Web: Optimization and Resolution
It is really not a good idea just to download whatever you like from the Web and use it. If you do, you may find yourself on the receiving end of a lawsuit. Before going ahead, make sure you have permission from the owner of the copyright. Otherwise it could be a very costly mistake.
Assuming you have received the go-ahead, you should also use the opportunity to request a better copy of the image you want to use. Otherwise, what you are left with will only very rarely be suitable for printing. This is for several reasons: Web images are always RGB or “indexed color” (the GIF format); they have always been saved as JPEGs, GIFs, or PNGs; and their resolution is usually described as being 72dpi—much too low to be of use unless you shrink the image to a smaller physical size in order to increase resolution. Besides that, if it is a JPEG it has probably been saved at a lower-quality setting, rather than through optimization, in order to make the file size smaller.
It is a common misconception that “72dpi” is so-named because it is the resolution of our screens. In fact, PC screens have had a resolution of 96dpi for ages, and Macs, which used to be 72dpi, have now caught up. However, the wheels of the graphics industry are slow to turn and we are likely to be referring to Web resolution as 72dpi for years to come. This means that if you want an image to display at 4in (10cm) wide on a website, you will need to make sure it is 378 pixels wide and not 283, which was the number required for a 4in (10cm) image at 72dpi. If you do not do this, the image will appear smaller than you intended on all PCs, and most Macs.
Optimization
Optimization is not yet a universal practice, so you might be lucky enough to find that the image you want to use is actually fairly high quality. If not, an optimized image is a better starting point than if someone has tried to decrease the file size merely by saving the JPEG at a lower quality level. When that happens, the image is seriously damaged. Optimization, on the other hand, decreases the file size by a much greater amount, but—oddly enough—leaves the image appearance much closer to the original.
Think of it like this: your image has a surface, which you can see, and a depth, which you cannot see. If you save at lower and lower quality levels, you are removing detail from the surface and leaving distortion (“artifacting”) in its place. If you optimize it instead, you are whittling away at the unseen depths and leaving the surface more or less undisturbed. As an example, let us take the image that I used previously to demonstrate the effects of JPEG compression. Clearly, the image saved at quality level 10 was far superior to the one saved at level 0—and yet in terms of file size, the level 10 image was 13kb, while the level 0 image was only 11kb. Not a huge difference—certainly not a very useful difference. The optimized image, on the other hand, was 3kb, and not visibly different. I have resaved it as a TIFF file in order to be able to print it, and here it is next to the original (fig. 7.27). Both have been enlarged so that seeing any differences between them should be easier. Can you tell which is which?
7.27 The one on the right is the optimized image.
Obviously, if you have to use a Web image, you are going to be much better off if you can use an image that has been carefully optimized rather than one that has been damaged through being saved at a low quality level.
How to optimize an image
There is no need to optimize an image if you intend to subsequently place it into a page layout for print. However, when you need to save an image for a website, or to e-mail a good-quality on-screen proof to someone, it is extremely useful.
After you have saved the high-resolution image as a TIFF or EPS file in Photoshop, but while the image is still open on screen, choose File > Save for Web & Devices. On the window that opens, click on the 2-up tab at the top. This displays the original image on the left, and to its right a copy. At the foot of the image is information telling you the current format and file size. You should only trust the size shown beneath the right-hand image, as the other is more likely to reflect what the image would be if it were saved as a TIFF—not very useful! The copy also displays the download time at various modem speeds.
In the Settings section on the right, you can choose JPEG, GIF, PNG-8, or PNG-24 as the file format.
7.28 The Optimize window showing settings for an 8-color GIF.
If you are optimizing a logo, or an image with few colors (such as a headline with a drop shadow), try GIF (fig 7.28). This is a particularly useful format for anything that will look good with 256 colors or fewer. Additionally, one of the colors can be designated as being transparent, allowing you to delete a background.
If your image is continuous tone, i.e. like a photograph (which needs many more than 256 colors to display well), choose JPEG. The default quality setting is 60, which typically means that you will either not see any difference at all between the optimized preview and the original, or almost no difference. If you need the file size to be smaller, you can try reducing this setting—but keep an eye on the quality of the image while doing so. As you make adjustments to the quality settings, the file size and download time are recalculated and the information below the copy image updates. At the same time, the result of the new settings is applied to the copy, which you can therefore compare to the unchanged original next to it. When you are happy with both the file size and the appearance of the copy, choose Save. You will then be prompted for a name and a location for the new file.
JPEGs cannot contain transparent areas and insist on being opaque rectangles. A PNG-24 file, however, can contain the entire spectrum of 16.7 million colors available to an RGB JPEG as well as multiple levels of transparency. (A PNG-8 can display only one transparency level, and 256 colors—so it might as well be a GIF file.) So, a PNG-24 image can have a feathered edge that then floats on a previously colored background in Dreamweaver, for example. The downside is that because it contains the most options, it results in a bigger file size.
Resolution
Before discussing the specifics relating to the resolution problems with Web images, it would probably be useful to detail briefly the different kinds of resolution terminology that designers encounter.
Let us start with your computer screen. It has a fixed resolution of 72dpi if it’s an older Mac, and 96dpi if it’s a newer Mac or a PC. That “dpi” refers to the viewing resolution only, and is the reason why images placed on websites are usually described in terms of being a particular size at a resolution of 72dpi, i.e. the lowest common denominator between the two possibilities.
If you have assembled a page layout comprising 300dpi images—i.e. 300 pixels-per-inch images—and vector text, your screen can show you nothing better than a 96dpi (or possibly 72dpi on an older Mac screen) image, though of course you can view the page at different levels of magnification by using the Zoom controls.
If you print the same page on a laser printer, it is most likely generating a 600dpi print. That means that the blobs of toner it lays down are approximately 1⁄600 in across. This figure has nothing to do with the resolution of the elements you have placed on your page. It merely limits the detail possible in the print.
Similarly, inkjet machines typically print at resolutions of 1440dpi or greater. Again, this refers to the size of the tiny droplets of ink that they spray out in order to create the print, and has nothing whatsoever to do with the digital resolution of the images and text being printed.
Finally, the imagesetter that produces either the final film or plates from which the job will be offset printed might have a resolution of 2400dpi or greater. This allows it to generate variable dot sizes within the halftones it makes from the 300dpi images in the page layout. The resolution of these halftones is described as either lpi (lines per inch) or as a “line screen,” which refers to how many rows of halftone dots there are to the linear inch.
If you found that confusing, well, you have lots of company. Resolution is a confusing area for most graphic designers, and it takes a while for the information to sink in.
Web images are normally saved at 72dpi—even though most monitors are now 96dpi—but for commercial printing you need them to be 300dpi at the size they are required to print (for more about this, and optimum scanning values, see Chapter 8).
If you have a downloaded image that is 72dpi and 4in (100mm) wide, and you want to print at 2in (50mm) wide, it is easy to think that you have already got roughly half the resolution you need—because 72dpi over a width of 4in (100mm) requires the same number of pixels (288 of them) as 144dpi over a width of 2in (50mm), and 144 is roughly half of 300. (Digital images are generally believed by graphic designers to need a resolution of at least 300dpi in order to print using offset litho. This is not quite accurate, but is good enough for now. See Chapter 8 for more detailed information.) Actually, that is the view of the optimist. As an example, let us take an image that measures exactly one inch by one inch. If its resolution is 72dpi, how close are we to what we really need if we want to print it at that size using offset litho?
Before looking at the numbers involved in this question, I would like to mention an extremely important use of the Image Size window in Photoshop (fig. 7.29). The default settings for this show the width and height in terms of pixels in the upper area, below which are width and height measured in the units currently selected in Preferences. Below that is the resolution field. Right now the width and height fields in both areas are linked because the Constrain Proportions box is checked. However, the resolution is not linked to width and height.
If you want to find out what the true physical size of an image of, say, 72dpi really is, uncheck the Resample Image box in the lower left corner of the window. When you do so, the top section of the window becomes locked, which means that the number of pixels in the image cannot be changed, and the resolution field becomes linked with the width and height fields in the middle section. Therefore, if any one of them is changed, the other two will change accordingly. If you highlight the “72” showing in the resolution window and type “300” in its place, the width and height will change to show you what physical size of image you have at that resolution (fig. 7.30).
72dpi means 72 pixels for each vertical and horizontal inch of image dimension. That is a total of 72 x 72, or 5,184 pixels per square inch. At 300dpi, it is 300 x 300. That is 90,000, which is 17.361 times as many pixels. That means your original contains slightly less than 1⁄17 of the detail you would have if you had been able to start out with an optimum-resolution scan instead. Small wonder that very few Web images are worth more than a cursory glance if you are offset printing.
However, what if your image could be fairly convincingly enlarged to, say, 150dpi? In other words, a method that does a better job than merely spreading the original information over a larger number of pixels?
I have successfully taken images that, at first, seemed completely impossible to work with and ended up with images that not only printed without pixelation or color casts, but were very convincing. It does not work all the time, but even having it work once can make it worthwhile. Find out more over the page.
7.29 The Image Size window in its default state, i.e. resolution is not linked to width and height, which are linked.
7.30 The Image Size window when the Resample Image box is unchecked: width, height, and resolution are all linked to each other.