Debut theme logo quality

Solved
Highlighted
Excursionist
22 1 3

Header logo quality is drastically optimized and results in very bad picture quality. I've read through a dozen of topics here, but nothing really helps. I've tried using .png .jpg, save for web, variety of resolutions, the logo still appears blurry. 

 

Anyone who faced the issue and managed to fix it? 

1 Like
Highlighted

Hello @artemyp,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Excursionist
22 1 3

I've sent the link. 

0 Likes
Highlighted
Excursionist
22 1 3

I've also noticed that the uploaded image itself is not badly optimized, if I open it through admin/files - it looks just fine. However, the logo uploaded mechanism shrinks the image.  

0 Likes
Highlighted
Excursionist
22 1 3

This is an accepted solution.

The solution to the issue is to remove the smaller "data widths" in header.liquid section. 

 

I've changed mine from 

 

 <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '2500x497' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
             <noscript>

to 

                   data-widths="[1080, 1296, 1512, 1728, 2048]"

Now the logo image looks sharp. 

2 Likes
Highlighted
Tourist
3 0 1

I've been literally looking for days for a solution. This worked. Thank you so much.

1 Like
Highlighted
New Member
2 0 0

I tried this solve and didn't notice a difference in quality. I've tried exporting for web in illustrator, using png, jpg, and optimizing ahead of time in tinypng. Although the image size varies on each of those, the quality on my shopify page stays the same. Right now, we're using a password page for the site, but it's here if anyone has a solve. 

 

Thanks! 

newbie to shopify development. :)

0 Likes
Highlighted
Excursionist
24 0 4

I tried this and I have downloaded various sizes and file types for my logo. COuld my logo be fuzzy because I am still on trial mode using debut? 

0 Likes
Highlighted
New Member
2 0 0

Yes, I have the same problem but with Debutify! can someone please help me I have been looking for days now for a solution and its near hopeless! Does anyone know the code for making a logo sharp in debutify in the same way that you can fix the problem with Debut? 

 

Here is my Website! and the Pasword is: radar 

https://portablescreencleaner.com/ 

Please someone help! Thank you!

0 Likes