Avada Forums Community Forum Logo blurry –

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • robosanlucas
    Participant
    Post count: 1

    Brian,

    I keep having the same problem. I gave up on this when I installed our Avada Theme a few years ago and just tolerated having a somewhat blurry logo, which looks incredibly unprofessional. I have finally circled back to it again this week and am running into the same result you are.

    karolsnewday
    Participant
    Post count: 4

    Well, I guess I’ll join in on this too. I came looking for a solution to it. Looks really amateur and agreed, not professional for the websites. I hope I can find an answer asap on this.

    Michael C
    Keymaster
    Post count: 549

    Hi @bdeephoto and @karolsnewday. You both have grandfathered support, so if this is a problem for you please create a support ticket – https://theme-fusion.com/support/submit-a-ticket/

    Note, the logo is displayed at the dimensions of the image uploaded. So the only way this should be blurry is if the image itself is blurry. Also note, for a crisp image you will want to also upload a retina image.

    astrogaeun
    Participant
    Post count: 3

    Hello,
    I’ve been searching on this topic for a whole day and found a solution!
    When making the logo, create it as a vector image using programs like Adobe Illustrator. I’ve been using Canva to create my blog logo, but it kept being blurry on the blog. Upload your logo and change the margins as you want, and you’ll also be able to adjust the logo size.

    bdeephoto
    Participant
    Post count: 6

    Yes and thank you for looking into this Astrogaeun – I also played with the margin settings a bunch and was able to remove the blurriness by making sure that the margin settings don’t encroach on the PNG image size so that the theme code does not have to auto size the image. This is where it becomes blurry. Creating a vector logo is also a way but Illustrator is not a program I am super experienced with but it looks like I need to be now. Youtube tutorials here I come.

    i-solv
    Participant
    Post count: 1

    I’ve definitely experienced this a lot and have never found an acceptable solution.


    @michael_c
    – This is a consistent problem across the board and should not require a support account to help fix this. My support period has expired and I don’t feel like I should have to pay just to point out this issue that I think everyone suffers from.)

    I’m pretty sure this issue primarily affects high-rez screens where you have display settings for Windows set at something higher than 100% (e.g. I have mine at 175% for my 4k monitor.)

    If I make a 300px wide version as default and a 600px wide version as ‘retina’ then anyone with a high-rez screen sees a blurry version of the default. So…a browser’s measurement tool will still read “300px” but it’s definitely ‘fuzzy’ and not as crisp and there’s no way to make it sharp – I’ve tried all kind of different raster file formats and quality levels. (Have not tried uploading a vector version of the logo yet, though.)

    One workaround I thought I’d found was to upload the retina size for both – this works great on Chrome, but the logo is literally double sized on Edge, so not a solution.

    This seems really important and worth getting resolved. It’s a very long-standing issue that’s only going to get worse as more people move to higher-resolution screens. Would love some help from the Avada support team without having to pay for it!

    Shaminder
    Keymaster
    Post count: 154

    Hi

    I would like to address the query in a generic manner and specific to larger screens

    There are few common reasons why the logo would appear blurry

    1) You have compressed your logo. When we compress an image we lose clarity as a high-quality image would be a bit larger in size than an image has less pixel density.
    2) You have tools that smush images
    3) Jetpack plugin also reduces the quality of the images
    4) You can also increase the image quality in the theme options, by going to WordPress admin panel dashboard —-> Avada —> Theme Options —>Advanced—> theme features, Screenshot here —> http://i.imgur.com/hGNwMih.png. You would need to regenerate thumbnails once for it

    Reason 1 is the most common reason for this. If you refer the screenshot here, you can see that a compressed image is blurry. Both the images are of the same dimension but there is an obvious difference in the quality

    Also, if you have a large monitor/display (it is not necessary that all large monitors are retina display) and you are zooming it then it is also zooming the logo image. The source image beyond 100% will start to blur. Also after a certain zoom level, even the retina logo would begin to blur. If you want to circumvent this, then I would suggest using an SVG/vector logo. This would ensure you have a crisp logo no matter your screen size

    Note that the Avada community forum is primarily for a user to user interaction.

    If you would like hands-on assistance here, please register for support and create a support ticket as explained here -> https://theme-fusion.com/avada-doc/getting-started/avada-theme-support

    Thank you!

    Shaminder

    pawfax
    Participant
    Post count: 2

    It blows my mind how they have not figured out how to make a logo display normally..

    atomicsparrow
    Participant
    Post count: 1

    This is a common error junior graphic/web designers make when they first start designing logos. The problem is image quality of the logo you are uploading, you need to upload a higher resolution logo image.

    The problem isn’t the Theme Fusion theme, you would have the same problem with a generic WordPress theme too or a plain HTML file.

    My logos display perfectly fine because I use high resolution logo image files.

    You need to create a high resolution logo (eg. 3000px by 3000px) first, save that file as your master logo, and then resize the image to 512px by 512px or 100px by 100px (depending on where you place your logo) in order to retain image quality.

    If you use a low resolution image to make your logos then they’ll be blurry not only on websites but on paper too.

    Usually small images such as logo look (ex: 200px X 200px) blurry on High Definition screens such as MacBook Pro. That is because on the HD screens actually use twice the physical pixels to display the logo (ex: 400px X 400px). So the logo is just resized (scaled UP) causing it to lose its clarity.

    https://wpastra.com/docs/why-is-my-logo-blurry/

    bigpicturecommunication
    Participant
    Post count: 9

    @shaminder – This is not an issue of compression or due to lower quality of the uploaded logo.

    @atomicsparrow
    – This is also not due to starting with poor quality files.
    I believe it’s tied to what @i-solv was saying – something to do with the screen resolution for some monitors.

    I’ve tried so many different things to fix this and I agree with @pawfax that it’s truly incredible that this major issue has not been resolved by the Themefusion devs. (Along with the abysmal pagespeed scores for mobile!) There are so many great things about this theme, but as a dev who has built many sites using Avada, something like a crisp logo seems so basic and obvious…

    PLEASE!!! Themefusion devs – can you address this seriously and try to get it resolved? Contact me if you want specific info on the details. I have clients complaining about this and it’s rather embarrassing not to be able to fix it.

    Ammar. S
    Keymaster
    Post count: 2540

    Hello @bigpicturecommunication

    This is Ammar and I am Support Manager here at ThemeFusion. We’ve never had issues or received complaints about logo being blurry for our users, that is because we do not change anything when it comes to the logo size in our theme, you get what you upload in Avada so it totally depends on your selected image size. With that being said I will love to have a detailed communication with you on this topic and see why exactly are you seeing a blurry logo, I see that you have a Grandfathered Support so I am going to send you an email myself, please get back to me there so we can discuss it further 🙂

    Thanks

    -Ammar

    bdeephoto
    Participant
    Post count: 6

    @Ammar

    Email me when you have a minute. I wrote this post 15 months ago and in this particular blury logo case I think I have figured out what was causing it. It has a lot to do with the quality of the logo image itself and the Logo Margin and the and the Menu Height settings. Using these three together and not doing the math can cause a logo image to be bury. I have also found over the many years of using Avada Theme that this same situation can happen when using the Photo element. Anyway email me if you have further question.

    Ammar. S
    Keymaster
    Post count: 2540

    Hello @bdeephoto

    I’d love to hear from you, I will send you an email for sure to discuss this further 🙂

    Thanks

    -Ammar

    bigpicturecommunication
    Participant
    Post count: 9

    @bdeephoto – Would love to hear your solution if you’d care to post it here too!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.