How To Change Header Logo From Being Blurry -- Dawn Theme

Store Design
, ,
1

Hey Guys

So 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)

    Aromidy_0-1705099077777.png
    Aromidy_0-1705099077777.png500×300 15.3 KB

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

Aromidy_1-1705099120109.png
Aromidy_1-1705099120109.png1304×697 40 KB

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!

This is the reason google is giving me btw:

Aromidy_0-1705099345300.png
Aromidy_0-1705099345300.png964×385 23.1 KB

2

Hi @Aromidy ,

According to the images you provided, I see that the expected size in the lighthouse report is 150x90, so you need to change the logo size on mobile.

Please replace the following lines of code:

<img src="{{ settings.mobile_logo | img_url: '110x'}}" alt="{{ shop.name | escape }}" class="header-logo-mobile">

the following lines of code:

<img src="{{ settings.mobile_logo | img_url: width: 150, height: 90}}" alt="{{ shop.name | escape }}" class="header-logo-mobile">

You can learn more about liquid’s img_url here: https://shopify.dev/docs/api/liquid/filters/image_url

Hope it helps @Aromidy