I'm having som issues with image quality.

When I use an image as background for @page everything looks good. But if I use the same image as a background for a div (exact same file and size in css) it doesn't look as good.

A: PSD
B: @page background
C: div background



The tests are exported with "prince --raster-output=export/page_%d.jpeg --raster-dpi=96 index.html".

Do you know the reason/solution?

1. op1.jpg‎ 25.3 kB
2. op2.jpg‎ 146.5 kB ‎
   Zoomed version of op1.jpg

What is the size of the background image?

The example image above is 10 x 10 cm @ 300 dpi. The export is 500 x 500 px.

Does it look better if you boost --raster-dpi to 300? Are there any CSS or SVG filters being applied?

No filters used at all.

It looks better at 300 dpi but then I get a too large image and would have to resize it. Still, it doesn't look as good as when used @page..