Help Needed: Mobile Logo Appears Pixelated on Shopify Store (Dawn Theme)

[Aromidy]

Hey Shopify Community,

I've encountered an issue with my mobile logo's image quality on my Shopify store. Despite using a high-resolution image, the logo appears pixelated on mobile devices. I've tried adjusting the img_url filter size and ensured the CSS isn't stretching the image beyond its natural dimensions, but the problem persists.

Here are the details:

• The logo is clear on desktop.
• The issue only appears on mobile, regardless of the device or browser used.
• I'm using an image with sufficient resolution for Retina displays. (image size 500 x 300px)

This is the code snippet for the logo in my header.liquid file:

liquid

<a href="{{ routes.root_url }}" class="header__logo-link">
{% if template != 'index' %}
<img src="{{ settings.mobile_logo | img_url: '100x' }}" alt="{{ shop.name | escape }}" class="header-logo-desktop">
{%- else -%}
<img src="{{ settings.desktop_logo | img_url: '100x' }}" alt="{{ shop.name | escape }}" class="header-logo-desktop">
{%- endif -%}
<img src="{{ settings.mobile_logo | img_url: '100x' }}" alt="{{ shop.name | escape }}" class="header-logo-mobile">
</a>

And the corresponding CSS:

css

.header-logo-mobile { display: block; /* shown on mobile */
margin: 0 auto; /* centers the logo */
max-width: 100%; /* ensures the logo is not wider than its container */
height: auto; /* maintains aspect ratio */ }

Any insights on why this could be happening or further steps I could take to resolve this issue would be greatly appreciated. Thank you in advance for your help!

How it appears on mobile: 

Best regards,

Kai

Website: Aromidy.com
Password: Aromidy2023