Improve quality of logo display on retina screens

Tried a couple of things. But I wasn’t able to solve the issue.

Hi, @anlino

I’m not sure why the quality isn’t as good as on the photos posted on the blog: https://ibb.co/D8KqX0z

Hi @zokiu,

You’ll need to resize the image to half of it’s original resolution with CSS for it to appear high-resolution on the site. If you want to keep the current size of the image but increase its resolution, you need to upload it in a 2X resolution before you reduce its size with CSS.

— Anders

Thanks, @anlino. I can definitely upload a logo with 2x the resolution.

How do I do the CSS resize?

Here’s what I find. Is that correct?

To resize the image to half of its original resolution while maintaining its 2x resolution for high-DPI displays, you can follow these steps:

1. Upload the 2x resolution image: Make sure you have a high-resolution version of the image that’s twice the dimensions of the size you want it to appear on the site. For example, if you want your image to appear at 300×200 pixels on the site, the 2x resolution image should be 600×400 pixels.
2. Add the image to your HTML: Insert the image into your HTML file using the img tag and give it a unique ID or class, like this:

<img src="path/to/your/high-resolution-image.jpg" alt="Your Image Description" id="your-image-id" />

Apply CSS styles to resize the image: Open your CSS file or add a <style> tag to your HTML file, then use the following CSS code to resize the image to half of its original resolution:

#your-image-id {
  width: 50%; /* Reduces the image width to half of its original size */
  height: auto; /* Keeps the aspect ratio of the image */
}

Is that ok?

It worked! Thanks for your help.

Again MASSIVE THANKS for your great work with this theme. It’s been a real delight to use it.