Log in / Register

Forum › How do I...?

Explain image handling

mickyjtwin
I have read most of the posts about image resolution and sizes etc, however not quite understanding with my requirements.

Original image: jpg
Image width: 800px
Image height: 531px
Image res: 80dpi

When I am applying the image to my div (width 700px), I am setting the width to 100px, and height to 66px (aspect ratio maintained).

The image should be alot smaller than the div, however it is coming out as the same width. I have tried setting the prince-image-resolution to 80dpi, but doesn't seem to pick it up. I also use the high-res tiff image, which has 300dpi resolution,s etting same width and height as above, and same thing, even when changing the prince-image-resolution. Not sure why this is happening?

*Moved from Documentation
mikeday
Are you applying the image as a background image, or using the <img> element?
mickyjtwin
Using the img tag
mikeday
Firstly, 700px is rather wide, wider than the width of an A4 page. Here is a sample document I have just tried:
<html>
<body>
<div style="width: 400px; border: solid red thin">
<img src="sample.jpg" style="width: 100%"/>
</div>
</body>
</html>

In this example, sample.jpg is an 800px wide JPEG image, and it gets scaled to fill 100% of the container <div> element, which is 400px wide. Is this what is happening in your document? And what is it that you would like to happen, should the image be smaller or bigger?
mickyjtwin
I will try some variations, but I guess a good start question is how wide would an A4 page translate to in pixels?


What I'm aiming for is that there might be a div container of say 400px, but the image the user want to put in might only be 200px wide. I want to make sure the image sizes accordingly.
mikeday
A US-Letter page is about 570px wide, an A4 page is about 550px wide. That's with standard margins in place, without margins an A4 page is closer to 790px wide. However, if you just use width 100% on the container div and image, they will fill the available space regardless of exactly how wide the page is, which might be what you need.
mickyjtwin
I don't seem to be able to get the image sizes under control.

We have two types of images being used, high-res 300dpi images, and a copied converted image of 96dpi used for low-res images.

I am dynamically creating the html, and depending on the type of "publish", passing in the high, or low res image. The issue is that for high-res, the image comes out a certain size, and for low-res, it is completely different. I have tried changing the prince-image-resolution to the following variations:
prince-image-resolution: 300dpi;
prince-image-resolution: 96dpi;
prince-image-resolution: auto;

The images as stated in previous posts, are being placed on the page in img tags.

I have used 600px divs and placed an image in with a width of 100px, however the image does not display appropriately or proportionately.

The settings for the css are:
@page
{
size: a4;
margin: 2cm;
prince-image-resolution: 300dpi; /* or 96dpi */
}

600px should fit in the a4 bounds. In some cases, the image is displayed in the PDF at it's full original dimensions.
mickyjtwin
I believe I have figured this out. Seems to be related to having the width height defined in the style as opposed to in the img tag, e.g.
<img width="50px" />
When changed to
<img style="width:50px"/> worked ok.
mikeday
Right, the HTML width attribute is just a number with no units, eg. width="50", which is interpreted as 50px. But using styles is probably a better choice. :)
Lee_B
mikeday wrote:
A US-Letter page is about 570px wide, an A4 page is about 550px wide. That's with standard margins in place, without margins an A4 page is closer to 790px wide..


I don't see how you're getting these figures. My screen is (much) more than 550px, and it's only about 100dpi. Even basic home printing has been at least 300dpi for about a decade, and recently more like 600dpi or 1200dpi. With higher quality work, like rendering for a magazine, it's even higher. This means that your print pixels should be MUCH more than your screen pixels, if prince is rendering the PDF at any print-ready resolution.

Let's break down this 550px figure:

550px / 21cm = 26.2px/cm

cms_per_inch = 2.54

26.2cm / 2.54 = 10px/inch = 10dpi

Prince's rendered output is nice, and certainly nowhere near 10dpi -- that's barely enough to render two very blocky character glyphs per each inch!

As far as I know, A4 at 300dpi is 2480x3508, and I presume Prince does at least that. Yet it does seem to do something with image resolution that I don't understand, and that issue may or may not be related. Is it somehow using simplified pixel coordinates to make it compatible with screen targetted HTML?

Is there any authoritative documentation on the specifics of how Prince handles DPI, importing images, auto-detecting image DPI, applying forced resolution/dpi settings, converting percent-specified img widths to print media, etc.? If not, could someone explain?
mikeday
Printers do have a high internal resolution, but CSS pixel measurements are actually intended to be device independent, so that "50px" covers the same visual area regardless of medium. PDF is also a device independent format in general, as you don't know exactly what kind of printer the PDF will ultimately be printed on.
mikeday
Is there any authoritative documentation on the specifics of how Prince handles DPI, importing images, auto-detecting image DPI, applying forced resolution/dpi settings, converting percent-specified img widths to print media, etc.? If not, could someone explain?

Percent widths for images are treated the same as other percent widths, and are resolved relative to the width of the containing block.

Prince will use the intrinsic image DPI if found, otherwise it will fallback to the same resolution used for other px measurements, which is currently 96dpi.

This behaviour can be controlled on a per-image basis using the prince-image-resolution property.