Trouble getting a clean sharp logo from a vector exporting to png.

[DominicJ]

Hi all,

I need some advice. I've been working on a website redesign for a client, they recently launched the site but I noticed the website logo wasn't as clean and sharp as the same logo used the same size on a video thumbnail on the same page. I have tried every way I can think of exporting this logo so it looks as good but can't get it to be the same. 

The spec has to be a transparent png as it sits on an image background. roughly 202 px wide, can be a few pixels more if needed.

The artwork is vector based and being output from Affinity Publisher. I've attached a screenshot of the page in question. The logo that is slightly blurry is top left (T Telum Media). The good version is bottom right. 

Thoughts?

Edited July 20, 2023 by DominicJ
Add tags

[DominicJ]

And this is two screen shots of the actual logo, versus using a larger one resized in html (not ideal). Both come from the same vector file. I don't understand why the PNG looks so bad.

[thomaso]

1 hour ago, DominicJ said:

The logo that is slightly blurry is top left (T Telum Media). The good version is bottom right. 

Apart from speculation about different resampling methods on file export or possible recompression:

The two images have different display sizes: While the logo is placed in 100 % (202 px) the video background seems to be displayed in ~ 44% (800 px -> 350 px). Compare this current example:

 

--

[v_kyr]

Looks Ok on the website so far ...

Though the SVG logo could be directly included right sized into the HTML code for website as an SVG <img> file here if wanted ...

Quote

<img src="telummedia-logo.svg">

... or as an background-image via CSS ...

Quote

site-logo {
  height: 202px;
  width: 34px;
  background: url(telummedia-logo.svg) 50% 50% no-repeat;
}

... etc.

[DominicJ]

1 hour ago, thomaso said:

Apart from speculation about different resampling methods on file export or possible recompression:

The two images have different display sizes: While the logo is placed in 100 % (202 px) the video background seems to be displayed in ~ 44% (800 px -> 350 px). Compare this current example:

 

--

Yes, I know this, I'm asking how do you make a PNG look as good. Surely if both are using the same vector artwork and the same pixels on screen I should be able to get a png to look the same. Doesn't make sense that by scaling a logo down it looks sharper when its just using the same actual pixels to show on screen. Thanks for your thoughts on this.

[DominicJ]

8 minutes ago, v_kyr said:

Looks Ok on the website so far ...

Though the SVG logo could be directly included right sized into the HTML code for website as an SVG <img> file here if wanted ...

... or as an background-image via CSS ...

... etc.

Interesting, I didn't know an .svg could be used, does it limit who can view it? Still looking for how to make a png look sharp. Thanks.

[DominicJ]

4 minutes ago, Red Sands said:

@DominicJ

Our website has 5.5 - 6 million monthly unique visitors, we've had that for many years, and it's been quite a few years since we switched to using SVG for our logo, navigation icons and illustrations. Our visitors represent all age groups and they visit us with all types of devices. I haven't heard of a single instance of feedback about problems with SVG, and if (and when) there are problems on our website, we're not spared feedback (and thank goodness for that), so don't think you're breaking new ground with SVG and taking risks. Give it a try. 🙂

That's really interesting to know. Just checked out Apple, Facebook, YouTube are all using .svg for their graphics. Wow, I need a refresher on html coding!!

 

[v_kyr]

30 minutes ago, DominicJ said:

does it limit who can view it?

With nowadays webbrowsers, NOPE!

31 minutes ago, DominicJ said:

Still looking for how to make a png look sharp.

If you created the logo as plain vectors, you then should be able to export that in any needed PNG size from the org vector drawing without any need for additional sharpening or the like. - Though if you instead deal only with a PNG bitmap file, rescaling/resizing that to other than it's orig generated from dimensions will usually decrease it's overall sharpness slightly here. Thus when resizing bitmaps some amount/degree of resharpening is commonly needed.

So in order to prevent unnecessary resizing & resharpening of PNG bitmaps etc., instead always use directly the SVG format for logos/drawings on websites, or at least an 1:1 sized generated PNG from a certain vector drawing representation.

[thomaso]

14 hours ago, DominicJ said:

Doesn't make sense that by scaling a logo down it looks sharper when its just using the same actual pixels to show on screen.

If an image is displayed in reduced size then not all pixels of the image are displayed although they exist in the file. If it gets displayed for instance in 50% then 25% of the available pixel get visible (50% horizontally and 50% vertically). Thus a blurry contour of black text may occur sharper than it is if the few gray pixels at its edges aren't displayed. Of course, yes, the monitor's hardware resolution (pixel size/density) influences the result, too.

That is why sharpening should get applied in a zoom level not below 100%. Thus, to compare sharpness of two images I prefer to view both in same size, not one at 100 % and the other at 50%.

The attached (cropped) image might illustrate the effect of shown/hidden pixels at different view sizes (display sizes / zoom levels). [Actually this is a monitor test image, in true 100% view the colours would not show and the cube appear gray, also it may show moiré at different sizes. The effects appear not to be fully visible in the forum's browser window, here is it in full size: monitor gamma test.png.zip]

- -

[DominicJ]

1 hour ago, thomaso said:

If an image is displayed in reduced size then not all pixels of the image are displayed although they exist in the file. If it gets displayed for instance in 50% then 25% of the available pixel get visible (50% horizontally and 50% vertically). Thus a blurry contour of black text may occur sharper than it is if the few gray pixels at its edges aren't displayed. Of course, yes, the monitor's hardware resolution (pixel size/density) influences the result, too.

That is why sharpening should get applied in a zoom level not below 100%. Thus, to compare sharpness of two images I prefer to view both in same size, not one at 100 % and the other at 50%.

The attached (cropped) image might illustrate the effect of shown/hidden pixels at different view sizes (display sizes / zoom levels). [Actually this is a monitor test image, in true 100% view the colours would not show and the cube appear gray, also it may show moiré at different sizes. The effects appear not to be fully visible in the forum's browser window, here is it in full size: monitor gamma test.png.zip]

- -

Understood, maybe I shouldn't say sharpness but clarity. If you look at the screenshot I posted, both the website logo and the logo on the video thumbnail come from the same master vector file. One is lovely on the video. The other, the png website logo, is 'soft', 'blurry' and lacks the same clarity. We've done some tests with a logo at 600px and scaled it in HTML to 205px, and it looks fab. Surely there is a way to get such nice 'clarity' by outputting directly to the correct size? Your example is great but look at the video thumbnail. It is also scaled within the original video of 800px and displayed at around 200px with the 350px video placeholder.

 

My feeling is, Affinity Publisher/Designer isn't creating optimum PNGs, and there are only a few setting options to change to improve it.

[DominicJ]

16 hours ago, Red Sands said:

Be aware that some programs output better SVG for web use than others. None mentioned, none forgotten.

I'm not a developer, so I'll leave that to others to advise. SVG graphics from Affinity have worked for some personal stuff, but our professional SVG comes from professional sources and goes through the full development cycle along with all other code (inspection, internal dev review, sprint review, customer acceptance test and full release test!). I'm not used to just throwing things on the web.

We have, however, thrown in some SVG from Illustrator directly into less important pages from time to time. Inkscape is also quite popular for web graphics because Inkscape is developed as an SVG editor following the SVG specifications.

We are pushing out a scaled down 600px version this weekend from the dev server, but after a week or so we will go the svg route. Really helpful advice, thank you.

[thomaso]

11 minutes ago, DominicJ said:

My feeling is, Affinity Publisher/Designer isn't creating optimum PNGs, and there are only a few setting options to change to improve it.

Agree. That's why I mentioned before my hint about viewing size: "Apart from speculation about different resampling methods on file export or possible recompression:" (i.e. the two Lanczos resampling methods on PNG export do some sharpening)

13 minutes ago, DominicJ said:

look at the video thumbnail. It is also scaled within the original video of 800px

Not sure if I understand right, it sounds you compare a PNG with a different file format (video).

Never mind, it is good that you can/will solve it with an SVG instead of a pixel image!