Why Web Graphics Won’t Print
Monday 15 Jan 2007
Sure, any of us can open a web page in our favorite browser, go File>Print and print what’s on the screen to our desktop printer. It looks OK, you can pass it around to your friends, read it, admire the super saturated colors your uncalibrated inkjet gives and throw it in the shredder. All’s well and good.
Ever look closely at the pictures and graphics after they’re printed though? Notice the graininess of the photographs and logos, and in some cases even the text? Whatever, right?
But you really like the picture they used of the close-up of the model’s face and want to incorporate it into your next mail piece that’s going to be about a new type of makeup you’re promoting.
Uh-oh… Here’s where that next project starts to fall apart. Get a cup of coffee for this post, put on your thinking caps – and for those that may not be very technically inclined, this one could be a doozy.
Without fail, at least once a month or so, I’ll take on an assignment from a client who claims to have most all the artwork “ready to go” and all I have to do is do the final “sprucing up” to get the project ready for the printer.
So the client uploads the files and lets me know the project is “ready to go.”
It never takes long after opening files to realize that the “ready to go” artwork has photography and logos that have been plucked from a website. Any designer worth his salt knows that (in most cases) it’s not possible to repurpose artwork designed for web use to print. There are a couple of occassions where this isn’t entirely the case, but these aren’t the norm, we’ll get to those later. There are, however, many factors that make this task of repurposing fruitless; in this take, we’re going to discuss resolution:
Resolution
No, I’m not talking about the things you avoid making and end up not doing at the first of the year. This time we’re talking image size…
Artwork can be “measured” in a variety of ways. When talking about images displayed on your computer, an image’s resolution is described in PPI, or pixels per inch. A pixel is the smallest single complete sample of an image and is made up of three smaller color emiters; one red, one green, on blue… More on that later.
Most monitors display images at 72 ppi, meaning for every inch of image you see, there are 72 pixels of image in each line. Some newer monitors are capable of displaying images at 96 ppi or even up to 160 ppi. The vast majority, however, are only capable of reproducing at a lowly 72 ppi, which to the naked eye can appear jagged and gradients look choppy and not so smooth.
However, despite being not as good a reproduction, web graphics are made at 72 ppi in order to keep the file size to a minimum to keep you from waiting for them to load while you visit a website.
In print, images are measured in DPI, or dots per inch. Commercial printers will usually require that all art submitted for a print project be a minimum of 300 dpi at finished print size. This simply means that if you’d like a photograph printed at 8 x 10″, the file you submit needs to be at least 8 x 10″ big at a resolution of 300 dpi. Simple enough, right?
Well, it should be… Only problem is, that graphic you love on such and such’s website is 4 x 3″ at 72 ppi, which when coverted to you printer’s specs of 300 dpi shrinks to a measly .96 x .72.” Barely the size of a postage stamp!
Why is this? Print resolution is nearly quadruple that which is required for the Internet, so when you transpose an image for use from the web to a print media, it’s physical size is effectively quartered…
Here’s a 4 x 3″ sample of a web graphic like I mentioned above:
Now here is the same image after it’s been converted to print resolution:
Ok, surely a number of you are saying, “whatever Chris, all I have to do is stretch it out to fill the space I need.”
Sure you can do that, but what you’ll end up printing will look something like this:
Yuck…
The simple way to avoid this? Start with high resolution (300 dpi) images that are the size you want them to be printed, or larger.
Image Scalers:
Yes there are some ways to enlarge an image to larger than its original size, but understand that all pixel-based images contain a finite amount of data, regardless of whether they were shot with a digital camera or scanned from hard copy. When you enlarge an image, you’re essentially making up data to fill the gaps where new pixels will be created. You may be able to acheive an enlarged version of the image you want to have printed at the required 300 dpi, but no enlarged image will ever look as clear or sharp or has as smooth a color range as the original.
You can always go smaller and retain all your image clarity, but not the other way ’round.
So, long story short. If you’ve found art you want to reproduce in print, or you’re developing a website that contains elements you may want to incorporate into a print advertising campaign, remember resolution!
chris | Design, Print, Website Dev
