Header Logo Resolution Fuzzy

[andyro]

Here is the logo/site I’m trying to emulate: https://www.andythomson.ca/ (not red square logo in upper left)
Here is my new site: https://www.thomsonarchitecture.ca/

I’ve uploaded the exact same image, size, etc. but it scales weird, and then when I crop adjust the edges look grainy/pixellated/fuzzy. I’ve tried 40x40px, 60×60, 80×80, 220×220 – what am I doing wrong? Is there an exact size the logo must be if square? I can get it to look clean if it’s larger than 125×125 but that is too big. But even when I’ve made new test images in photoshop to 100×100 – the edges get fuzzy on upload/placement.

[Hans (Support Admin)]

Hello Andy,

Ideally you should be creating a logo with higher resolution.

For example 500px by 500px and then reducing it’s size.

Here is a tutorial which may help you fix the issue,

How to Save Logo Files for Print and Web

[andyro]

Thanks, I recreated the logo at a higher res in photoshop. Seems the pixels were a bit faded at the edges so fresh shapes helped sharpen it all up – after upload there’s a def. improvement. I thought something was happening during the upload/resize function when setting the image.

[Hans (Support Admin)]

Great, glad it worked out 🙂

• This reply was modified 2 years, 3 months ago by Hans (Support Admin).

[andyro]

Hi Hans, this issue has dogged me, and then I found out there is a plugin that supports scalable vector graphics in wordpress (SVG Support), added my SVG logo no problem, then added it to the site identity image – but I think there is some problem with scalability because the image just won’t render at all – any idea why this might be happening? I reverted the the PNG that still works but it is not crisp – this has to do with the way red pixels display on the interior of the ‘T’ shape – no amount of fiddling with import/export/scaling/format has resolved this – I had hoped SVG was the solution – looks great – but I just need it to show up in the header? The two most current images in my library are the 80x80px logo right beside the SVG image. Would appreciate if you can let me know if there is a way I can get this to work! Thanks!

[andyro]

There may be a hint in here: https://apollo13themes.com/svg-logo-on-wordpress-site/
Namely: where my image is:https://www.thomsonarchitecture.ca/wp-content/uploads/2019/03/2019-80-SVG.svg

[andyro]

Or maybe this: https://thebrandid.com/using-svg-logos-wordpress-customizer/
(my image is 80x80px but is set to ‘scalable’ not any particular size…

[Hans (Support Admin)]

Hi Andy,

Apologies for the delay.

I did encounter this issue in the past several times.

Here is what I did in Photoshop.

Create a large logo, 1000px width minimum.

Flatten the image, then resize it to a small size (80px).

Doing this has solved the issue for me.

If you like I can also log into your Admin Dashboard and have a look at the SVG logo but I would recommend doing what I explained above.

Hope that helps.

[andyro]

Hi Hans, I have worked pretty extensively in photoshop – I found that in my logo in particular when I scale the logo down, there is a line of pixels that gets blurred, so I changed that line/proportion to align with a solid row so pixellation would be minimized but the fuzzy edges persist. It would be great to enable the SVG (https://www.thomsonarchitecture.ca/wp-content/uploads/2019/03/2019-80-SVG.svg) if at all possible because it is just so damn crisp and perfect….

[Hans (Support Admin)]

Hi Andy,

Ok, so you need to install a plugin or a bit of code into your functions.php file in order to enable SVG file uploads.

Here are a few articles which will help you,

How to Safely Enable WordPress SVG Support (2 Simple Clicks)

https://www.wpbeginner.com/wp-tutorials/how-to-add-svg-in-wordpress/

Here is a potential plugin you can use,

SVG Support

• This reply was modified 2 years, 2 months ago by Hans (Support Admin).
• This reply was modified 2 years, 2 months ago by Hans (Support Admin).
• This reply was modified 2 years, 2 months ago by Hans (Support Admin).