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?
Top
