: 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

@Karen819

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

Vote Up Vote Down

@Holmes874

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.

Vote Up Vote Down

@Debbie163

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.

Vote Up Vote Down

@Tiffany317

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

Vote Up Vote Down

@Eichhorn212

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.

Vote Up Vote Down