6

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.

Regards,

Craig

Improve this question
1
  • "Is this just a limitation of printing from a web browser" = yes. You could make it an SVG file, though. That may work.
    – DA01
    Commented Feb 24, 2011 at 22:53

1 Answer 1

Reset to default
7

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.

(see: http://en.wikipedia.org/wiki/Raster_graphics and http://en.wikipedia.org/wiki/Vector_graphics )

Improve this answer
5
  • Thanks for the information. I'm moderately familiar with the difference between vector and raster but have not dealt with this kind of issue much. Can you recommend the best way to mitigate this? Would it be better to actually render the page in PDF format to ensure the logo would be rendered as a vector image?
    – Craig Koster
    Commented Feb 24, 2011 at 21:24
  • It is possible--I have never implemented it, so don't ask ;)--to use css styles to swap out or hide an image for print use. You might look into this if printing the logo is critical. You might link to a higher pixel size version which the browser can use for print & print preview...ask over at the webmaster stackexchange group
    – horatio
    Commented Feb 24, 2011 at 21:33
  • Linking to a higher resolution image will count against the web host's data plan, and I'm sure the IT department will have something to say about that. I would recommend going with the PDF route instead of re-linking if image quality is really an issue. At the same time, I would also see if this issue is really worth the effort being put into it. The publishing company I work for prints screenshots all the time knowing the quality is going to be rotten. Some details just aren't worth sweating.
    – Philip Regan
    Commented Feb 24, 2011 at 21:38
  • 1
    EPS files can be vector or raster. It's a wrapper file format. DPI has nothing to do with web graphics. The browser ignores any DPI setting. PNG files CAN have DPI settings, but that wouldn't be applicable to web graphics. You could try using a larger image then scale it with CSS, but I don't think that will help with printing anyways. I agree with Philip, this is really a non-issue since ALL web pages print this way. If a person is going to print it out, they're used to the resolution limitations. Barring that, try SVG or PDF as suggested.
    – DA01
    Commented Feb 24, 2011 at 22:55
  • Thanks all for the advice. I think I'll just tell the customer that it's something that they have to live with for now (we're going live soon) and if it's really a problem in the future I'll break out my PDF library and generate a PDF of the page.
    – Craig Koster
    Commented Feb 25, 2011 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.