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

Aromidy
Tourist
11 0 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)

Website: Aromidy.com

Aromidy_0-1705348513764.png

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

 

Aromidy_1-1705348513514.png

 

 

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_2-1705348513515.png

 

 

Replies 3 (3)

BSS-Commerce
Shopify Expert
3401 450 503

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Aromidy
Tourist
11 0 1

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

Henning_wh
Visitor
1 0 0

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.