Make logo render clearer in chrome about vodle HOT 7 CLOSED

Hi, I would like to try helping you. What do you mean when you say "make logo render clearer in chrome"?

from vodle.

Hi Sushmey, thank you for your offer and sorry for being unclear. This issue is about the menu in the app, where the logo looks like this in Chrome:

It seems to be antialiased in a different, less crisp way than in, say, Firefox, where it looks like this:

I guess the issue is a image size/resolution one. The place in code where the logo is referenced is in src/app/app.component.html, and the image is in assets/topleft_icon.png. Maybe something with the tag or the image file itself needs to be done, like rescaling or something.

from vodle.

Dear @Sushmey , did you make any progress with this?

from vodle.

Hi @mensch72 so sorry but I'm not actively working on this PR right now but I think adding this SCSS line in the app.component.scss file should help with the rendering difference in chrome and Firefox

.image-rendering:       
     webkit-optimize-contrast

from vodle.

Hm, I added

html {
    image-rendering: webkit-optimize-contrast;
}

but it doesn't seem to make a difference.

from vodle.

Hello.
First, Chrome and Firefox have different rendering engines. But I don't think that's really the issue here.
What I noticed is that the base image is too small. The browser has to upscale it, and as we know, making a small image bigger makes it look worse.
First, I would try putting a bigger full-res logo file, bigger than what finally renders (downscaling always looks better than upscaling, and it won't visibly affect performance).
Secondary, I would recommend trying using other image file types, like jpg, gif etc.
I would most recommend converting the logo to .svg and using the svg version, since vector graphics don't lose quality when changing size. I've seen websites which similarly render their logo in top left, and they use svg (vector) logo.
If you'd like, I can try to test and implement what's needed myself.
Thank you for considering my tips and I hope that I helped.

from vodle.

Hi @Wojtekb30 , thank you for your considerations!

I am a little confused by your statement that the base image be too small. The png file src/assets/topleft_icon.png which is used has a width of 784 pixels, which is surely larger than the size it will be rendered in in the top left corner on any device I can imagine, or isn't it?

Anyway, I tested replacing it with an svg version, and that works well. I should have thought of this trivial solution myself, I actually don't know why I didn't.

So the issue is solved, thank you for helping out!

from vodle.