Bad resolution of Retina Logo-Graphic with 50% display size

[fbrugger]

Hi there

I have placed a very fine logo with a cyrcle in the header of my website. The display size of the logo is 330 pixels in width, which means, I have uploaded an inserted the logo with 660 pixels in width for Retina resolution.

On a Retina display, the logo looks perfect but on a normal Monitor, the logo is displayed in 50% size, which makes the cyrcle look like stairs:

If I upload the logo in its native size of 330 pixel in width, the logo looks perfect on the normal display:

But now it is a bit blurry on the Retina display, because there it is upscaled to 200% whitout havin enough resolution.

Is there a possibility, to place a logo with each native sizes for 1x resolution and for high dpi devices?

Thank you very much for your help!

Kind regards,
Felix

[christian]

Hey Felix,

No there’s no possiblity to place a logo with native sizes. That would require CSS custom development which will require a One Single Platform subscription.

That jagged look is not because of our theme but because of your image compression. I’d recommend you have a professional web designer fix the image so that it’s smooth in every display.

[fbrugger]

Hi Christian

Thank you very much for your reply. This logo has no image compression, it is a 24-Bit PNG.

It looks perfect as a graphic in Photoshop at 100% size. In Photoshop it even looks great at 50% of size. The images I have sent you in this topic are screenshots from the original website, not the original images I have placed in the header. For this reason the jagged look is from your theme.

As I said, this screenshots are both made on a display with 1x resolution. The first one is perfect on Retina display, but looks jagged (as seen in the screenshot) on a normal 1x display. The 2nd screenshot is also made with the same 1x display, but this time with a native sized graphic of 330 pixel. This one looks great on 1x displays but is blurry on Retina displays, because for this device it lacks resolution.

Again, this are not the inserted graphics, these are screenshots to show you the look on the display. These graphics are created by a professional graphic- and web designer.

Thanks for checking this issue again.

Kind regards.
Felix

[christian]

Hey Felix,

We can do nothing for this case because that is the PNG image behavior when scaled down even if you use a different theme. To prove that, check out the same image below sized differently. The first one is 660px and the one below it 659px. The 659px, produced jagged edges while the 660px is smooth. I hope you get the point now. Try playing around with the image size and even the logo thickness. If you don’t have luck with PNG, try the GIF or even JPG format.

[fbrugger]

Hi Christian

Thank you very much for your reply and for the sample images. Yes, I get the point. Unfortunately, this has nothing to do with the behavior specific with PNG format. I have tryed with JPG and GIF as well. GIF is useless but even JPG behave exactely the same as PNG.

I have now placed only 1x resolution Logos in the headders and footers, which is the native res. for normal displays. There it looks good but the small logos on Retina really look blurry, because they are scaled up to 200% with only 100% resolution:

It would be great, if THEMECO could solve this problem for further programm versions of X and Pro, wehere at least the all important logo could be placed in native resolutions for different devices.

Thanks again and kind regards,
Felix

[ruenel]

You are most welcome, Felix.