Fixed size image on screens and paper?

Question

I'm looking for an image format (I guess) that can be used for web images as well as for printing (on paper) directly from any platform/browser so that the images have the exact same sizes on paper every time.

This will be used for a math problems service and I want to allow people to print them and use rulers to accurately measure the lines/objects I have drawn.

I have tried SVG and it looks nice in browsers and mobile devices, but I have no information about DPI/PPI and if I scale the images using CSS, I've read that they become blurry (because the print scaling is done by the browser once it has taken a snapshot of the original image).

Then, I created a PNG image in Photoshop with 127 DPI and the size 525*495px which should have been exactly 10.5*9.9cm on paper – it ended up being 9.9*9.4cm when printed from Firefox. :(

Is there a neat solution to this?

Edit: The PNG example is faulty. I messed up by adding a max-width: 10cm for images that I'd forgotten about, so it's possible that in this particular case, the image would've been printed with the correct dimensions. However, in a PNG file, one still uses pixels and so the level of detail should be much higher in SVGs using (thousandths of) millimeters.

Answer 1

Another option is to make a pdf file that the users can download and print.

Web browsers have verey little configuration options on the printed files. Some of them just scale the photo to fit the page.

Answer 2

Don't use PNG. Use jpeg instead, which can have include ppi and a print size in its metadata.

PNG was never intended to be a print format, and this is the kind of situation where it shows. The PNG published standard doesn't contain the necessary metadata to specify either ppi or print size, so browsers aren't necessarily going to see it even if it's there, and will print at whatever they consider is the "right" resolution (which is something you have no control over).

Answer 3

I would use two different stylesheets. One stylesheet for on screen, and another print stylesheet to specify sizing when your page is printed. This way you will be able to adjust your CSS appropriately for various devices, as well as specify inches or centimeters for a printed page.

Check out these resources for making a print stylesheet. And for achieving accurate measurements when printing.

Answer 4

There's no such thing--at least not for home use.

The catch is that you have no control as to how the content will be printed. The end user is free to print on any size paper they choose, at any particular zoom level, with any particular margin setting, or even printing 2-up, or tiled, or what have you.

Rafael's is likely the best practical answer. A letter-sizes PDF, for example. You'll have to remind people to print it on letter-sized paper at 100%. Even then, you may want to have a 'calibration' question as the first question that they can measure against to make sure they printed it at the right size.

Answer 5

Okay, below is what worked for me. The idea is for a customer to just select (on the site) what to print and then be able to print everything nicely at default settings (like default margins and zoom at Shrink-to-fit or 100%).

First, I use one stylesheet for printing and another for screen. Then, since only I add images to the site, I can create them with proper dimensions without having to worry about that.

On paper: For drawn images, I'm using SVG with width and height in mm and when these are printed, from all modern browsers, on all computers and printers I've tested, they have the exact same sizes. They are never resized and if the customer changes the zoom when printing, it's their problem. This is the most important about images. For photos, I crop and resize them so that they end up having a certain size (in pixels) that fits 300 DPI and then use CSS classes for fixed sizes (in mm). 3-4 classes cover all possible dimensions I need.

On screen: There doesn't seem to be a simple answer here since these have different DPI. Fortunately, the 22-65mm sized images look good on screens and since this particular service won't be used from handheld devices, I'll ignore that (minor) issue for now. On the other hand, since the SVG sizes are in mm, it's possible they'll even turn out too large on smartphones (I think that in general, bitmap images become smaller than on screens relative to the text due to higher DPI).