Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Enthusiast Zone > Art & Graphic Design > Printable Web Graphics

Printable Web Graphics
Thread Tools
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status: Offline
Reply With Quote
Oct 11, 2010, 05:47 AM
One of my websites has a "printer-friendly" page on it. This page only had two images on it, and when you print them, they look like shit. Screen resolution on printers that print anywhere from 300 to 1200 DPI means graphics look like garbage. One of the graphics was a recycling icon, so I replaced it with an HTML entity, problem solved (♻) (works in every browser but webkit on windows, odd). So the other image is my company logo. So it occurred to me that i could use the iPhone 4 trick. Load a much larger image file, but use height and width attributes to shrink it to size. Some browsers don't resize smoothly, so it doesn't look as good on screen. But looks way better when I print.

So here's the thing. It still doesn't look quite perfect. You can still see what appears to be a rough-resize on the image. My print image is 4 1/6 times larger than the on-screen dimensions (72 dpi x 4 1/6 = 300 dpi). I'm on the right track but somethings not quite right. Is there a size that will work perfect? Maybe something as simple as using 4 instead of 4.166, basing on-screen on 75dpi instead of 72? My original image is vector so I can make it any size I need. And I looked into saving it as an svg and seeing how that would print, but the file size was absurd. 270 KB for the image, meanwhile the whole HTML of the page is only 47KB raw, 5KB gzipped for transport. Meh. Any ideas?
l008com  (op)
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status: Offline
Reply With Quote
Oct 11, 2010, 06:23 AM
More test prints with more printers, and I tried the x4 instead of x4 1/6, looks the same on my B&W, and looks fine on my color HP. So I wonder if I'm just seeing my B&W's normal dithering. And the black edges look rough simply because 300 dpi isn't that much for a laser printer that does 600 normally and 1200 "special". Anyway, I've wasted enough toner for tonight. But if anyone has any experience in making printer friendly graphics on html pages, please chime in.
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Oct 11, 2010, 10:05 AM
I think perhaps you're expecting too much out of printing from HTML.

The way printer friendly works is a whole new css stylesheet. Your screen.css uses the 72 dpi, and your print.css could use a larger image. But don't expect brochure quality.
( Last edited by andi*pandi; Oct 11, 2010 at 10:15 AM. )
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status: Offline
Reply With Quote
Oct 11, 2010, 10:11 AM
Why not just make the image the right pixel dimensions, but 600 dpi? Wouldn’t that fix it (apart from still giving you quite a big file)?
Thread Tools
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Privacy Policy
All times are GMT -4. The time now is 04:20 PM.
All contents of these forums © 1995-2015 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2015, Jelsoft Enterprises Ltd., Content Relevant URLs by vBSEO 3.3.2