Hi, I am working with both print (300dpi) and web (72dpi) images, but I'm having trouble getting Prince to recognise the difference.

If I use:

body { prince-image-resolution: auto; }

or

body { prince-image-resolution: auto, 72dpi ; }

or

body { prince-image-resolution: 72dpi, 300dpi; }

or

body { prince-image-resolution: 300dpi, 72dpi; }

my print resolution images come out way too big.

If I use:

body { prince-image-resolution: auto, 300dpi ; }

my web resolution images come out way too small.

The print images are 300dpi tiffs created in Photoshop. The web images are 72dpi gifs, also created with Photoshop.

If the image resolution is specified within the image files themselves, then Prince should respect it and size the image accordingly, unless the size is overridden with the width or height properties. Can you verify that the images have a specified DPI resolution? If they don't, can you add one in Photoshop? Otherwise it will require adding a class or something to the img elements so that you can specify 72dpi for the web images and 300dpi for the print images.

I'm not sure how to check, but photoshop reports the tiff images as 300dpi and the gifs as 72dpi in the image properties. Prince doesn't seem to pick it up though.

Ah, this may be due to a bug specifically affecting TIFF resolution handling in Prince. The only short term solution for this would be to add a class to all the TIFF image elements and use the prince-image-resolution property to specify that they are 300dpi.

OK thanks.

I don't see high res background image support on the roadmap, so I've added it to the feature requests. It is a pretty important feature since background images reduce unnecessary markup and there are things you can do with them (such as tiling) which you just can't do with foreground images. The project I'm working on requires background images, but since it's only in proof of concept stage it's OK that they're web resolution - for now.

Great work by the way, Prince is well underway to being able to produce print-quality documents.

Oh wait, high res background images ARE in the roadmap :wink:

I've solved my mixed markup image resolution issue by using PNGs for my high res graphics, which are interpereted correctly. They are a good substitute for tiffs for the greyscale images I am currently using, but won't be an option for CMYK colour graphics when they will be required down the line.

Sorry, just to clarify... are you successfully using high-res PNGs as backgrounds or as images?

I was not able to get PNGs to scale properly as backgrounds

Glad it's on the roadmap though

PNG image resolution is handled correctly when used in an img tag. Background image resolutions are not supported yet, but should be in one of the next few releases.

Also, if you use the CSS content attribute to dynamically attach an image you will need to specify its resolution - Prince doesn't seem to pick it up automatically either. e.g:

li:first-child:before { 
   content: url(../../img/print/scissors.png);
   prince-image-resolution: 300dpi;
   display: block; position: absolute; left: -2.8mm; top: -4.5mm; 
}

That sounds odd, as the <img> tag is implemented using the content property, and where the image comes from should not affect how the resolution is processed.

Your'e absolutely right - somehow that particular image was set to 72dpi. I changed it back to 300dpi in Photoshop and re-saved it. Problem solved.

For the record, Prince 6.0 rev 3 will detect the resolution specified in background images and also supports a new property, prince-background-image-resolution, which can be used to override the resolution if necessary. Thanks for raising the issue!