High resolution image (logo)

Hi! The image should not get bigger, the height is fixed at 3cm, regardless of the resolution. If you want to change this, check out this thread:
https://www.ads-software.com/support/topic/resize-logo-1?replies=3

Hope that helps!
Ewout

I don’t think the question was quite answered. I too have noticed this issue. The logo file I have set for my invoices is hi-res, but is always displayed in the pdf downgraded to very low res. It looks like it is actually pulling a small file and enlarging it to fit.

FYI…to fix this from the user end…you have to make your image 3cm tall. Otherwise the code in the plugin will stretch and distort the image until it gets to 3cm high.

On the plugin side…the fix is simple…setting it to be a max-width, not a set height of 3cm. This allows the graphic to be set responsively. This really is a simple CSS fix on the dev side.

Hi!
I have already set a max-width of 3cm (no width!). In my experience setting the height and the width to auto gives a better result with most logos than the other way around. Images in a PDF work quite different from images in webpages, and the conversion from HTML to PDF is done by a third party library (dompdf).

Now one thing this library does not do is taking a small file and enlarging it: it uses the exact file that you have selected in the plugin settings, with those exact pixel dimensions (and the DPI mentioned in the settings page). The height of the image in cm (or the dpi if you like) is not taken into account, and it doesn’t matter if your image is 3mm or 30cm, the pixel count is what is used.

If you are using PNG, this could lead to pixelated results because PDF doesn’t work very well with PNG. It has to be converted internally on your server and different servers have different tools installed for this, and some servers (image conversion tools) don’t handle PNG very well, especially with transparency. JPG generally gives much better results (because it doesn’t have to be converted to be placed in the PDF).

I hope this answers the question better ??
Ewout

I’m sorry, but somewhere in your code, it is doing so by height, not width. If I put in a very hi-res version of my logo, it will span across most of the page and squish the company address section. The very moment I set the graphic to have a height of 3cm with empty space as needed, the graphic displayed crisp without any pixelation. I can repeat these results every time.

By all means…try using a really wide, high res logo in there. It doesn’t stop at 3cm. It will go much further. 3cm in width…that is very small…so there is no way you have it set to 3cm in width. Also…why are you using cm as the measure with CSS? You should be using pixels. I’m just eyeballing it here…but I would say that the max-width should be set at 400px for best results.

Hi Kahil,
I’m sorry, I made a typo there in the first line. I’m setting the max-height to 3cm not max-width (as I also mentioned in the first reply in this thread). Check out the source here: https://github.com/wpovernight/woocommerce-pdf-invoices-packing-slips/blob/master/templates/pdf/Simple/style.css#L122-L125

It doesn’t matter if I set the height in px or cm. This is a PDF and it all works a little differently from websites/browsers. If I set the height in px it will convert this internally to a size in points, using the document resolution, which is 72dpi by default (note that this doesn’t mean it will resample the image – if your image is 3000px high it will keep the same number of pixels in the PDF, resulting in 1000dpi). Only PNG is different in this aspect in my experience. You didn’t mention if your logo is JPG or PNG.
If I set no height or width, people will have to resize their logo (at 72dpi) before they can use it. In My experience 3cm high is a good default setting, which works nicely for both square/round logos (logos with equal width & height) and wider logos which are more like a header image. But I understand this doesn’t work universially (neither will 400px wide).
If you have a very flat logo, that is not a header/meant to be used at a big size, this setting will unfortunately not work for you. But AFAIK it doesn’t resample, it just stretches the pixels over 3cm height.
The document resolution is 72dpi because people are used to that on computer screens (it converts fonts from pt height to px using 72dpi), so for developers this is the closest to using CSS for browsers.

But again, please send me the logo and I can take a look at why it renders so ugly! PNG renders fine with my webhost, but I have seen hosts where the PNG really came out ugly. If you’re using JPG and for some reason it’s not rendering properly I will need the actual file to find out why.

All that said: you can set your logo to 400px width by adding following css:

td.header img {
	max-height: auto;
	width: 400px; /* at 72 ppi this is 14cm */
}

Please remember that this is a free plugin. I want to help you solve this, but I need your cooperation too!

Ewout

Stretching the pixels is the issue. That pixelates the graphic, which is essentially resampling it.

Mine is a PNG file, but like I said, the moment I added padding to the graphic to make it 3cm in height, the image was clear again.

Like I mentioned, if you make it a very WIDE logo, it squishes the company address section. There should be a max width set as well so that the graphic will be constrained without issue. You have the width set to “auto”. That is going to force stretch any graphic that isn’t 3cm in height, which is causing the image distortion.

The ideal solution would be to wrap the header image in a table cell, along with the store info section. The cell with the logo image would have a max-width of 60% and have a right cell padding of 1cm. That padding will keep the image from getting too close to the store info cell. The store info cell would of course remain at 40%.

Then don’t set the image width to auto so it stops stretching it to fit the 3cm height. If you don’t set it to have any kind of specific width, then the image will restrain itself to the cell width if someone has a really wide logo and the max height setting will keep it constrained in the height area as well.

I understand the confusion now. I thought you were saying the image was downsampled (since you said you thought it was pulling a lower res version).

max-width doesn’t work too well in dompdf, so unfortunately your solution won’t work (it will use both max-width settings as the width, messing up the aspect ration).
The image size behavior in table cells that you describe doesn’t work in dompdf either, it will just use the 72 canvas resolution and size the image accordingly.

I will see if I can make the 3cm heigh a setting!

Kind regars,
Ewout