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.


5 Answers 5


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.

  • I'm with Rafael on this. When it comes to accurate printing from a digital file, PDF is, generally, the correct answer.
    – bemdesign
    Commented Jan 13, 2015 at 3:29
  • While I appreciate the idea, using PDFs is more work for both me and the customers.. :)
    – LGT
    Commented Mar 18, 2015 at 20:02
  • Click on the file > Print it > Get the exact results. What exactly is the extra work, besides it is almost the only process that assures you the exact result? With almost any raster image file format you can not asure that the print will be at the exact same size.
    – Rafael
    Commented Mar 19, 2015 at 11:32

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).

  • The catch is that browsers don't obey a JPG's PPI meta data either.
    – DA01
    Commented Jan 13, 2015 at 1:45
  • 1
    Browsers don't know what the screen's ppi is unless the OS tells them, and it usually doesn't. They would need that in order to translate an image ppi to a screen ppi. Even HiDpi sensing is still very new. Commented Jan 13, 2015 at 6:47

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.

  • Thanks for the reply. I know about this, but I suspect that the method would blur/distort the images (haven't tried it, though). I'd like to have them as sharp as possible.
    – LGT
    Commented Dec 15, 2014 at 2:31
  • This won't do anything to 'lock in' the physical size on paper. There's just too many variables out of one's control as the page designer.
    – DA01
    Commented Jan 13, 2015 at 1:43

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.


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).

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.