Fixed size image on screens and paper?

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.


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.

Source : Link , Question Author : LGT , Answer Author : Rafael

Leave a Comment