I have been provided a typographic logo in an EPS format and I am creating a PNG with it (File | Save For Web & Devices) to be used on a web site. One of the pages on the web site is a “print friendly” view of data and it uses this logo. The problem I’m running into is this logo looks terrible when printed from the web site.
I’ve tried everything I can think of to get the logo to look good when printed from the web site but I can’t get it to print nicely. Is this just a limitation of printing from a web browser or is there something that I’m missing when I export to a PNG format? Here are a couple notes:
- I’m not resizing the image at all during the export or on the actual web page.
- When I print the logo directly from Illustrator it comes out great. It’s only when printing from the actual web page that it looks terrible (pixelated, etc).
- I’ve done a ‘Select All’ and checked the ‘Align To Pixel Grid’ in the Align panel (I’m using CS5).
- The logo looks great when rendered on screen – very sharp.
- The DPI is set to 300 on the logo.
Any help would be much appreciated.
The short answer is that the PNG is a low-resolution raster image.
The long answer is that it looks good on the screen because it is being rendered at 1 pixel per pixel, but when you attempt to print it, the printed version is actually scaling up. Printed color images look good at 300 dpi. You don’t specify the pixel dimension of the png, but if your logo is 300 pixels wide on your screen, you will get a 1 inch wide logo @ 300 dpi (or smaller at laser printer 1200dpi). Anything larger and the browser is scaling it up, probably with a fast (low quality) stretch algorithm.
Printer capabilities will further muck about with this (such as b & w laser print drivers dithering).
Note that “300dpi PNG” is more or less meaningless. Raster images have a fixed dot size (pixels) (think: graph paper). EPS (vector) images have essentially infinite resolution since they are stored as points and curves which are calculated at output time.