Logo image blurry on Retina screens

[Alexander Lee]

Hi, my logo image works correctly on Windows, where it matches the resolution of the screen. However on MacOS with Retina (resolution scaling) the logo appears too large, which makes it blurry and pixelated (see attached image).

Is there a way I can upload an svg logo to avoid this scaling problem? Or custom CSS to force the logo to stay actual size?

Thanks!

 

Edited August 30, 2022 by Alexander Lee
better screenshot

[Alexander Lee]

update: I uploaded a double resolution png and that seemed to solve the problem for now. I would still love to hear any other solutions people have used

[Jim M]

10 hours ago, Alexander Lee said:

update: I uploaded a double resolution png and that seemed to solve the problem for now. I would still love to hear any other solutions people have used

This is how this solution would likely be resolved with an image. Roughly speaking, high-DPI displays have twice as many pixels per inch than their traditional counterparts. For images to look good on those screens, they need to be twice as large.

Currently, to work with an SVG or custom CSS, this would require customization which is outside our scope of support.

[Alexander Lee]

Thanks Jim!