Forum How do I...?

Question about image resolution

SLynch87
Hello,

I am having trouble figuring out how to correctly set my image resolution. I have 5 figures, 3 are JPG at 144dpi, and 2 are PNG at 96 DPI.

If I set all figures to 144DPI using prince-image-resolution. The PNGs are too small, and one JPG appears a little small, and another is now displaying at 220DPI. I have figured out how to isolate the PNG files and give the correct DPI. However I don't understand why the other JPGs do not have the same DPI at 144.

I should be able to use "prince-image-resolution: auto" and it would detect the DPI in each image and display it with that resolution? Is that right? When I do that, my JPGs are now between 117.571 and 220.714, and my PNGs are now 143DPI. So I'm curious how this auto resolution is supposed to work, because it doesn't seem like its grabbing the resolution from examples. I've also done other tests, and the DPI that "auto" comes up with can be different on a single image depending on the rest of the content.

For reference, this is the only CSS I am running to create my PDF of 5 figures:
figure img {
width: auto;
height: auto;
max-width: 100%;
margin: 16px auto;
}


img {
prince-image-resolution: auto;
}




It looks to me that Prince determines the auto DPI based on the image size. For example I have one image that is 517px wide, and thats the one getting dropped down to 117DPI. Another image is over 1500px wide and that is getting pushed up to 220DPI. Is this because I have the width set to auto?

The result I would like is to display the images with the correct DPI that each one has, so I won't be using a higher/lower resolution than the image needs. Is this possible?

Thank you for any help you can offer. Overall my experience with Prince is great so far, I just need a little help to wrap my head around how images are processed. I am happy to provide examples if that helps.
mikeday
The default value for prince-image-resolution is "normal", which is to say 96dpi. This matches the behaviour of web browsers. Specifying "auto" will make Prince check for any intrinsic resolution information which is stored in the image file itself and use that, falling back to 96dpi if none is available.

You can check the intrinsic resolution stored in the image file in image viewers that display the available metadata.

However, Prince only uses the image resolution to determine the default size of the image, which can be overridden by the CSS width or max-width properties. In particular, if you specify max-width 100% then the image will be reduced in size (increasing its resolution!) to fit in the available space.
SLynch87
Thanks for your reply mikeday, that makes sense. I understand where the different resolutions are coming from now.