Debut theme logo quality

Solved
artemyp
Excursionist
22 1 11

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? 

Hello @artemyp,

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
artemyp
Excursionist
22 1 11

I've sent the link. 

0 Likes
artemyp
Excursionist
22 1 11

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.  

artemyp
Excursionist
22 1 11

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. 

JessiSexy
Tourist
3 0 1

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

sitesmith
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
Cherizzle
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
mtomlet
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
amckie
Tourist
33 0 3

Hi, so I tried this and it worked, but now i get this above the logoScreenshot (280).png:

 

How can I hide this?

0 Likes