quality parameter seems to be making no difference in image generation

[nkarki]

trafficstars

I have tried putting the quality parameter from 0 to 100 while generating an image from an html. I have only verified the rendered image quality visually by looking at the quality of the text generated, it looks equally pixelated on all values from 0 to 100.

[JasonMannon]

I'm having the same problem, have you figured anything out?

[nkarki]

Sorry. Didn't have time to look into further details.

[dedman]

Having the same problem here, @JasonMannon or @nkarki did you end up working out the issue?

[nkarki]

sorry @dedman I wasn't able to resolve it.

[dedman]

Looking more into this, http://wkhtmltopdf.org/libwkhtmltox/pagesettings.html mentions that quality is only used when working with JPEG. I do notice a difference now that I am trying the quality option with JPEG images instead of PNGs. If you set quality to 30 it is a noticeable difference to 100.

My original problem still remains though, that even with the quality set to 100 the image created isn't crystal clear, there is a noticeable difference in the quality when comparing the images to the original HTML or a PDF generated with wkhtmltopdf.

[mattm]

@dedman @nkarki @JasonMannon Were any of you able to resolve this issue?

I use IMGKit on my site to allow users to export the content they've produced but get frequent complaints about the quality of the images being poor. Would love to find a solution to it.

(IMGKit is awesome otherwise, thanks everyone who worked on it.)

[roeesheelo]

@dedman @nkarki @JasonMannon @mattm

Hi guys,

I know this is an old subject, but this might help other people with the same problem.

I believe that the actual reason for the degraded quality is the viewer device's pixel-ratio. If you use retina monitors (or other high-density displays), like the ones used in a MacBook Pro, you will see IMGKit's output in a degraded quality, even if you set the quality to 100.

To solve this issue, you need to multiply all the input components by 2 (including the document's width, height, font sizes, line-heights, margins and practically everything), which should result in the desired quality.

Good luck :)

[mattm]

I wound up finding an easier solution that may help: simply set the CSS zoom property to 2. The image will wind up being twice as wide which when viewed on a Retina display at half the side makes it appear crisp.

[roeesheelo]

@mattm

great solution :)

[vapao]

@mattm great solution

[wuduhren]

@mattm Thanks!!!!! What I do is zoom 2 and double the image's width and height. This make better quality!

Python code.

import imgkit

def make_image(html, output_path):
    options = {
        'zoom': 2,
        'width': 1920*2, 
        'height': 1080*2,
        'quality': 100
    }
    html = warp_html(html)
    imgkit.from_string(html, output_path, options=options)

[Sahil005]

Great, That Worked very well, But I'll be more arguments to customize my image, Please help... Options shown like quality, width, zoom and height definitely helps but I need to change the view of my headers are they're basically multi index and I need border lines below as well . Please help me do this.

My current image looks like this: But I want it like this :

• Where second row is not bold, which i want to do
• Headers with border lines
• Bottom Borderlines at each row. I want to achieve these 3 tasks , Please help.

[ynsmtkl]

@mattm Thanks for the solution

[Mbuckley0]

I've used the 2x zoom method and it has improved the image quality however I am seeing a lot of fuzziness around text from my html page. Does anyone have any solutions for improving the quality of text when doing 2x zoom? .