The Resolution's Too Low: Printing Web Graphics

By HTMLGoodies Staff

"No, sorry, we can't print that, the resolution's way too low. It's only 72 ppi and we print at 100% dpi. And if we try to bring the resolution up, your picture will be way too small."

Oh dear. If you want to get your precious screenshot/Web-graphic into print, you've now got about twenty minutes of explaining to do. Here's what you need to know if you're going to convince anybody that it's possible.

(If you're in a rush, just skip to the brief pointers at the end.)

Mediocrity

Let's start with the big grain of truth contained in that rejection you just heard. Web graphics and screenshots are pretty lousy quality. They don't contain anything like the amount of information you'll find in a print graphic or a good scan. You can guarantee your final image won't look brilliant. And if the final print size is large, you'll be able to see distinct pixellation, probably more than you thought was there when you viewed the picture on screen.

But if you're prepared to accept these quality limitations, you should be able to print what you can see on a computer screen. After all, if you took a good photograph of a screen and scanned it, you'd get to see what you wanted. And your screenshot or Web graphic contains all the information you need for print reproduction, it's just a matter of formatting it properly so it comes out in a way that's as good as a scanned photograph.

A bit of pixellation isn't much of a problem if you're printing a screenshot. Everybody knows that computer screens show rough pictures, so their expectations aren't high. Having said that, aiming for full screen-size reproduction is a little adventurous. Half size or a quarter is more reasonable. And if you try to take a Weh-graphic and pass it off as a proper print graphic, you'll soon run into quality problems. Something like a company logo will usually need to be redrawn if it's transferred from the Web to print, unless its size is greatly reduced.

Keeping Quality Up

The key to quality is to transfer the screenshot or graphic into a print format in the best way possible. You'll be well placed to do this if you understand something about pixels, Pixels Per Inch (PPI) and Dots Per Inch (DPI), though it may be possible to get away without this knowledge.

Pixels and ppi are covered in detail in a separate article, The Mad, Mad World of Pixels Per Inch. Briefly, Web graphics and screenshots are made up of dots of colour called pixels, and they usually contain 72 pixels per inch, though other resolutions are common

Dots Per Inch (dpi), on the other hand, is a property of a print graphic and determines how it prints - its size and quality. Printing isn't done in continuous colour, it's done with individual dots of Cyan, Magenta, Yellow and Black (CMYK), lots of them, giving an impression of continuity. These are the dots in dpi.

In practice, ppi and dpi are so closely related that they're often thought to be the same. Many times they are, but it's worth knowing that sometimes they're not.

There's also a vertical measure of density called lpi (Lines Per Inch) but it's not worth worrying about. If you're got your dpi high enough then you won't have lpi problems and you don't have to bother with it. Photoshop occasionally brings up the subject of lpi just to make sure amateurs continue to find it impenetrable. When it does, think of lpi as around half or two thirds of dpi and you won't go far wrong.

Conversion

The main problem with printing Web graphics is that as they're transferred to the print environment, ppi become dpi. Each pixel is seen as a one dot. And although 72 ppi is fine for looking at graphics on a screen, it's a very low dpi resolution for printing

Forget about printing through a browser. That's a special case and not a real print environment, though it does hint at some of the problems faced by a real print environment because the quality of graphics reproduction when printing through a browser is usually low.

What we want to consider are real print environments like QuarkXpress, Pagemaker and Word. With these, low dpi is a real issue.

For low quality printing at 150 dpi or maybe 300 dpi on an office printer, our 72 dpi Web graphic might just be OK, at a squeeze. For a magazine or brochure printed at 100% dpi, it's unlikely to be OK. The mismatch by a factor of eight or so is too big. When the Quark page goes through the RIP (Raster Image Processor) to make film for printing, the graphic is likely to get mangled and finish up looking very sorry for itself.

This is really down to the fact that the printing industry hasn't quite caught up with the Web. The best modern RIPs now deal with low resolution Web graphics quite well, but the majority still don't, and they're extremely expensive, so nobody is in a rush to replace them with new versions.

To get high quality output, these older RIPs must be spoonfed with higher resolution images. They want something of the order of 200 to 300 dpi to start with. So to get our graphic printed properly, somehow we have to boost its dpi to this kind of figure.

Complication

As we've already mentioned, graphics software like Photoshop generally sees one pixel as one dot, so it's effectively working in ppi and dpi at the same time. And it takes its ppi/dpi very seriously. If you increase the physical size of a print graphic, it will automatically reduce the dpi to compensate. Conversely, if you increase the dpi, the size of the graphic will reduce.

This is a pain in the ass, because it adds a big complication to our aim of boosting dpi. But it's done for the best of reasons. The software only has a limited amount of information from the graphics file to work with - that's the pixels/dots. If you go for low resolution, you're spreading them, so you get a bigger picture. If you try high resolution, they're bunched together and the picture is small.

If it's forced to deal with the picture in any other way - for example you want the size to remain the same but the resolution to go up - the software has to resample the image and create a brand new set of pixels/dots. There's usually a quality loss associated with resampling. It means tearing down the picture and rebuilding it from scratch, with all the pixels in different places.

That's why the software is reluctant to break out of the relationship between dpi and file size. It doesn't want to casually resample all the time and lose quality.

One Resample

But we need a higher dpi/ppi for the graphic we're going to use in a brochure or magazine, so we're forced to resample.

And here's the real key to quality. Because resampling is bad, we must do it only once.

That means we need to know the final size of the graphic as it will be printed, and our resample should hit this final size fairly accurately, and at the same time raise the dpi.

The resampler in Photoshop is very good and used by most professionals. If you're running PaintShop Pro rather than Photoshop, congratulations. The resampler in PaintShop Pro is (in my opinion) slightly better than the resampler in Photoshop.

To resample a file, open it in Photoshop and select Image > Image Size. What happens next depends on the version. If you've got a button marked auto, first enter the final size in inches or centimeters. Then press Auto. Now choose an appropriate screen or go with the default of 133. Select Best Quality and OK. Your image will be resampled to 266 dpi or double whatever you entered as the screen.

If you don't have an Auto button, first choose your dpi (266 if you can't think of a better number) and then your file size. Then press OK. If you have a Retain File Size button and you want to keep the original physical file size, this is the time this button comes into play.

In either case, if you get anything wrong, revert to the original file and start again.

Triple Resampling

This sounds pretty simple, but you might follow the rules and still find that your Web graphic looks lousy when it's printed.

Why?

Usually because somebody else has also resampled it. And with professional printing, that somebody else is probably your print bureau or printer.

Many printers and bureaus have a habit of reformatting every picture before they send pages to the RIP. They do this to make sure the pictures don't foul up and waste film. For normal print graphics at high resolution, the quality difference can be negligible.

Low resolution pictures are even more likely to get this treatment, because they're more likely to foul up.

So in the end, your low resolution Web graphic may get resampled three times. Once by you as you attempt to get the size right and bring the resolution up, once by the bureau because they want to make sure the RIP won't foul up, and once by the RIP itself, which is effectively a resampler too.

Now you know why your printed graphic looks so bad.

What Can You Do About It?

You have to try to get the number of resamples down. Ideally, you want only your printer's state-of-the-art RIP to resample. Ask your printer if their RIP will accept low resolution Web Graphics. When they say yes, try to work out if they mean it. I've nothing personal against printers, but many of them do seem to bend the truth in the interests of making money. They'll say "Yes, our RIP takes low res pictures," and then secretly they'll change the resolution on the picture (resample it) before it goes through.

They'll also ask you to send all pictures at a minimum of 200 dpi, and then resample every one of them to bring the resolution up to 100% dpi before running them through the RIP. Not all printers, but some.

Again, this is triple resampling and you want to find out if it's happening and avoid it if possible.

There's only one other thing you can do, which is to improve the sharpness of the graphic after it's been resampled, using a filter. In Photoshop, the one to use is Filter > Sharpen > Unsharp Mask. If you've not used it before, you should be able to get the hang of it after a few minutes by playing with the settings. As a general guide, the Threshold setting will usually be in the range 8-25, the Radius 1-4 pixels and the Amount between 10 and 50 percent. Using Unsharp Mask, even for just a minor tweak, will invariably improve the quality of the graphic in print.

So here are the key elements to getting your Web graphics printed at high quality:

  1. Don't expect too much. There's a limit to how big you can print something that's inherently low quality. Around 50% original size is the maximum.
  2. Somebody will probably need to resample the graphic to bring the dpi up to a decent level. If that's you, make sure you only do it once, and at the same time get the size roughly right.
  3. Try to ensure that your printer isn't going to change the resolution (resample) yet again before your picture goes through the RIP. If they tell you it's essential, see if they can take the picture from you in its raw, low resolution form and do the single resampling themselves.
  4. If you can find a printer with a RIP that can deal properly with very low resolution pictures, you've hit the jackpot.
  5. Learn Unsharp Mask and use it whenever you resample.


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •