Forum How do I...?

image-resolution? What for?

yet
I am still confused what the image-resolution CSS property is actually useful for.

I have JPG with 150dpi:

Image: xx.jpeg
Format: JPEG (Joint Photographic Experts Group JFIF format)
Class: DirectClass
Geometry: 1369x461+0+0
Resolution: 150x150

Generating a PDF using

<html>
<body>
<img src="xx.jpeg" style="image-resolution: 72dpi" />
</body>
</html>

results in an identical PDF as when I run the same conversion without the image-resolution specs.

So obviously this parameter has no impact on the image size (and overall PDF size). The image is always
included with the PDF with its original size and resolution.

What's the deal?
mikeday
How big does the image appear on the page? If it is 1369 pixels wide, then even at 150dpi that's over nine inches, which is wider than most sheets of paper.
yet
The image covers the page width but it fits...but this does not the issue. The issue is that image-resolution has basically no visible impact
on the PDF generation.
mikeday
At the extreme case, if you specify an image-resolution of 600dpi, then the image should be only 2 inches wide. Note that an explicitly specified width or min-width property can override the image resolution.
yet
Sorry Mike but that does not answer my question. Can/should image-resolution be used for image scaling - if yes, how?

It is a common usecase for using high-res images for PDF documents. For a PDF used for mobile devices I want the converter
to reduce the image size (by specifying e.g. image-resolution: 72dpi) by itself. But this does not seem to be working... is this
a bug or am I on the wrong track?
mikeday
The image data will always be embedded in the PDF file exactly as is. The image-resolution property only affects how much space it takes up on the page. So if you want to make a smaller and lighter PDF file to read on mobile devices, you will need to rescale the images yourself, first. (Or you can use "prince-jpeg-quality: 50%" to recompress the image at a lower quality level, but this may not be what you want).

In future we may provide a JavaScript API for rescaling/resampling the images in a document before conversion, to save trouble.
yet
Using this document with the attached xx.jpg image


<html>
<body>
<img src="xx.jpg">
<br/>
<img src="xx.jpg" style="image-resolution: 100dpi">
<br/>
<img src="xx.jpg" style="image-resolution: 10dpi">
</body>
</html>

generates a PDF with three times the image in the same size.

You say that the space allocated would change - but it does not.
  1. xx.jpg974.3 kB
mikeday
When I convert this to PDF, the first two images are almost identical, as 100dpi is very close to the default value of 96dpi. However, the third image is extremely zoomed in, and only a few corner pixels are visible. If I change the second image resolution to 600dpi instead of 100dpi, then most of the image is visible on the page.