Improve quality of logo display on retina screens

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

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?