How To Fix Blurry Header Logo -- Custom Code (Dawn Theme)

[Aromidy]

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)

Website: Aromidy.com

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

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: 

[BSS-Commerce]

Hi @Aromidy ,

It's possible that your photos were compressed and lost quality when uploaded to Shopify. To ensure that your logo maintains clarity and sharpness, you can try these steps:

1. Prepare a high-quality photo: Make sure you have a high-quality version of your logo image. Ideally, it should be in vector format (e.g. SVG) or high-resolution format (e.g. PNG).

2. Optimize photos for the web: Before uploading your logo, optimize it for the web to balance image quality and file size. You can use online photo optimization tools like TinyPNG (tinypng.com) or Squoosh (squoosh.app) to compress and optimize photos while preserving image quality.
You can refer to here: https://foxecom.com/blogs/all/ultimate-guide-to-shopify-image-sizes to optimize the photos you upload.

[Aromidy]

I'll try it out. Thanks for the advice BSS-Commerce!

[Henning_wh]

HI Aromidy,

I was suffering from the same problem. The same logo was used: desktop FINE, mobile: blury or missshaped.

SOLUTION: just use a .svg file for mobile, it worked. before I was using PNG in every size, and it didnt.

[DaisyJ123]

Thank godddd you posted this! It's been sending me mental for months and finally trying as .svg fixed it! Thank you!