Purpose of this job aid: Understanding the basic differences between print and web images will help you understand why files must be edited in a certain way.
Print materials (books, flyers, anything sent to a professional printer) are specially created and maintained using specific software; these materials are generally referred to as press-optimized or prepress files (often also referred to as press-ready, print-optimized, camera-ready, or print-ready).
Press-optimized means that every image (photo or illustration), font, and ink color is specially formatted for print so that they’ll display correctly on a printed page.
Prepress specifications (or specs or job definitions) are configured in various settings throughout a software program (such as Adobe InDesign and Photoshop). These specs usually relate to ink, crop marks, bleed, and other print-related settings that the prepress department determines based on the type of material being created.
Webpages are specially created and maintained using specific software that allows you to write and edit HTML code. You can create a webpage either in a web design program (which is basically an HTML editor such as Adobe Dreamweaver or Ultra Edit) or within another program that contains an editor for creating webpages (such as WordPress). Any file that is specially designed for the web is often called web-friendly, web-ready, or web-safe.
Web-friendly means that every image, font, and screen color is specially formatted for the Internet so that they’ll display correctly on a webpage.
The Differences between Vector, Raster, and Bitmap
The differences between the terms vector, raster, and bitmap are the basis for computer graphic design in both print and web world. Images are divided into two types: vector and bitmap. An image is either a vector or bitmap depending on how it was created, not on its final output. (This is explained more later.)
Vector images are images that are created using many individual, scalable objects; these objects can be lines, points, curves, or shapes. They’re defined by mathematical equations rather than pixels, so they always render, or display, at the highest quality. Some examples of drawing programs used for vector illustrations are Adobe Illustrator, Corel Draw, Inkscape, Sketchup, and CAD programs. This original robot image (right) is a vector; it was drawn in an illustration program. However, to place it here in an online environment, it had to be saved as a .png file, which is a web-ready file format.
Bitmapped (also called rasterized) images are made up of pixels (on screen) or points of ink (on paper). Bitmap and raster are used interchangeably in the industry; they mean the same thing. The term rasterization means the process of turning a file into a bitmap.
Digital photos and scanned images are bitmapped images. Photos are automatically rasterized because they’re pixel-based; there’s no such thing as a vector photo.*
*NOTE: You can vectorize a photo, but that means turning the photo into an image of lines and shapes; the final result will look something like a digital painting. To convert a photo or other bitmapped image into a vector, graphic artists use a tracing option and other tools, combining XML and other sophisticated methods.
Examples of pixel-based programs used to edit bitmaps such as photos are Adobe Photoshop, Corel PaintShopPro, Cyberlink PhotoDirector, GIMP, and the dozens of free online photo editors available now.
Images Rasterized for Output
Before an image can be rendered, or displayed, it has to be rasterized. All final images must be rasterized for output, which means what you see on a computer screen or printed out (even on a plain, old desktop printer) is rasterized. The rasterization process for print involves ink (dots on a page); the rasterization process for web involves pixels (pixels on the screen). So, what you see in a printed book and what you see on-screen is technically a rasterized image. Again, on final output (on screen or in print), all images are bitmapped images.
Even if your original file is a vector, it has to be rasterized for output. A vector is a vector up until you save it for print or web; in other words, the working file is vector, not the final image. This is why many graphic designers use the term vector-based; a vector image saved for print or web becomes vector-based. A vector in print is only a true vector if its final output is rendered in lines, curves, etc. For example, plotter printers are true vector printers because they print by moving a pen or other instrument across the surface of a piece of paper, unlike modern printers, which use drops of ink (dots). Because the plotter pen actually draws lines, curves, etc., the printed image is a true vector.
Again, images have to be rasterized to be printed or displayed on a webpage. At a printer, the prepress department rasterizes all files, such as PDFs or InDesign files, by sending them all through what’s known as a Raster Image Processor, or RIP. When you’re designing for web, you rasterize by saving your image files generally as JPEGs, GIFs, or PNGs.
Image Filetypes Generally Used for Print and Web
|EPS, TIFF, AI, PDF|
|Web||PNG, JPEG, GIF|
What’s Considered an Illustration?
This seems like an obvious question, but the term now means more than just traditional hand-drawings. An illustration is any image that is drawn either by hand and then scanned in or drawn using illustration software. In simple terms, it is anything that isn’t a photo.
An illustration doesn’t automatically mean it’s a vector, and vice versa. Illustrations can be either vector or bitmap, depending on the program used. Using a vector-based program such as Adobe Illustrator is the ideal way to create illustrations. In fact, you should never use Photoshop or any photo editing program to draw line art; it’s best to do all drawings in a program specifically designed for vector drawing.
If an illustration is bitmapped, then you do have to use Photoshop or another pixel-based editing program to edit it.
How Can You Tell if an Illustration Is a Vector or Bitmap?
The short answer is, you can’t tell. It’s nearly impossible to determine whether an image is a vector or bitmap just by looking at it, especially if the quality is high.
The easiest way to find out is to open the file in an illustration program. If the image is made up of lines, points, curves, etc., you’ll see the various paths, endpoints, and anchor points, indicating it’s vector-based. If the image is just a square or rectangular with no paths, endpoints or anchor points, it’s made up of pixels, indicating it’s a bitmap.
That being said, though, right off the bat when you see a photo, you’ll know it’s bitmapped because photos are always bitmapped, right? Well, maybe not. How do you know that what you’re looking at is a photo in the first place? You’d be surprised at the photorealistic images out there, ones that could fool even the most trained artistic eye. Some photorealistic images are vectorized images created from bitmapped images.
DPI, PPI, and Everything Else in Between
DPI means dots per inch; ppi mean pixels per inch. It refers to the resolution on print and on-screen, respectively. DPI refers to the dots of ink per inch on paper; ppi refers to the number of pixels per inch on a computer screen. Unfortunately, most image editing programs nowadays interchange the terms dpi and ppi, which is confusing. Don’t worry over whether it says ppi or dpi in the program. All you need to be concerned with is the number before it.
For print, 300 is the ideal number, although a bit below is ok, depending on the quality of the image. Don’t go below 200, and below 180 is unthinkable for print.
For web, 72 ppi is the standard, but why such a low resolution? Because a higher resolution means a bigger file size, which in turn can cause long load times for images on a webpage, depending on the user’s Internet connection. Keeping the file size low ensures that most people will be able to see the webpage load quickly.
Resampling an Image
When you try to increase the ppi of an image, Photoshop will require you either reduce the print size or resample the image to keep to the size you have it at.
Resampling means adding pixels to the image. This is usually done when you want to increase the size of the image, from a lower ppi to a higher ppi. To add pixels, Photoshop “manufactures” pixels by emulating the pixels already present in the image—it is generally not a good way to go for print because photo editing programs aren’t sophisticated enough (yet) to reproduce pixels. In fact, designers avoid it unless there’s no other choice, especially for print. Here is a good article describing resampling.
Increasing the pixel depth—in other words, scaling up—rarely does anything for quality for print. Resampling photos often produces horrific print results, even though people try to do it all the time. When you see a fuzzy, poor quality photo in print, resampling is likely the culprit. (See the pixelated image below, which was caused by resampling.) That said, however, if the photo is very simple, with little differentiation in shapes and colors, resampling might work. “Might” is the operative word here, though. You might have to play around with it to see if resampling will work ok or not.
Resampling for web works much better than it does for print. Again, though, it’s best to play around with the image.
IMPORTANT NOTE: When working with JPEGs, save separate copies each time you work with the image. Every time you open and save a JPEG, there is some loss in quality; the reason for this is that it reduces the size on a webpage, making loading on a page quicker.
Optimizing for Print and Web
Every image has to be optimized for either print or web.
|Optimizing images for print||Photos – save as TIFF, 300 dpi
Vector illustrations – save as EPS , 300 dpi
Bitmapped art – save as TIFF, 300 dpi
Color: grayscale for black and white images, CMYK for 4-color, spot color for 2-color.
|Optimizing images for web||Photos – save as JPEG, 72 ppi
Vector illustrations – save as PNG (or PNG-24) , 72 ppi
Bitmapped art – save as PNG , 72 ppi
Color: Use Web colors only in photo and illustration programs. Web colors are automatically RGB. However, the good thing about using the Save for Web and Mobile Devices option is that the program automatically converts any CMYK or print-related image data to web-only—so a print color gets automatically converted to RGB when you use PNG, GIF, or JPEG.
- Use a photo editing program to edit the pixels in bitmapped images.
- Use an illustration program to edit vector art.
- Use a photo editing program to edit photos.
- Do not use word processing programs or layout programs to do drawings. Any drawing should be done in a program specifically designed for illustrations.
- Keep your original illustrations as EPSs, then export/save them to whatever file format is necessary for your purpose.
- Be sure to talk to the friendly neighborhood graphic designers or prepress techs at the vendor with whom you’re working. Ultimately, they will advise you on the best ways to optimize images for high-quality, save files, and make the overall process a lot more headache-free for both teams.