Why is my website logo blurry?

[raiden92]

I saved this file as a png in illustrator , don't understand why my logo is so blurry. It doesn't look clear to me, what am I doing wrong? Is it something to do with how I'm saving It?

Visit my site and you will see on the top left the logo blurry and not a high quality resolution.

http://rawadmerhi.com/

[Ned Murphy]

If you are resizing the image from its actual size then it is likely to lose clarity.  Based on downloading the image it appears you might be enlarging it slightly on the web page.

[raiden92]

Nope I'm not enlarging it at all, I'm just saving the image how It is as a png and it's coming out blurry.

[Jacob Bugge]

Rawad,

In addition to what Ned said, you have to decide (or be told) the final pixel x pixel size first, and then create the PNG at that exact size (or potencies of 2 larger). Otherwise, the resizing will make a mess.

[raiden92]

Alright I will try that Jacob, thanks.

Edit: I just created a new document that is 160px by 40px. Placed my logo on that document and saved it, yet It's still blurry .

[Jacob Bugge]

Rawad,

Have you ticked Type Optimized or Art Optimized? These options are hidden away in the Image Size window in Save for Web.

It just occurred to me that you might use Export instead of Save for Web. If you do that, you should set the Resolution to 72 (not 300, 150, or whatever else) to get the right size; and apply Type Optimized or Art Optimized in the options.

[raiden92]

Yeah I am using export instead of Save for Web. You think that's causing the issue?

Edit: I just tried saving for web, same result. I should also mention I have the Macbook Pro Retina Display.

[Monika Gause]

Your logo is very small on your website. So there just aren't enought pixels to display it sharply. And that's it.

If you want it to look sharp, you need to eliminate anti-aliasing. That is: save a raster image and then edit it in Photoshop so it suits your needs. Then embed it in your pages, but don't scale it. That is: if your PNG is e.g.160 x 50 pixel, you need to use exactly that size in the HTML code.

[raiden92]

I found a solution. All I do is save it as an svg file

[loyal_user0D44]

Hi, Raiden92!

[loyal_user0D44]

I'm glad you found a solution to your problem, unfortunately I am facing the same issue. My PNG looks blurry on my website regardless of true size vs display size on site. I'm curious though, I am not able to use an .SVG file and upload to Wordpress as a photo without an error. Is there some particular way that you found worked in uploading an SVG file as your logo? Thanks so much! Cheers.

[Monika Gause]

Tryhttps://www.wpbeginner.com/wp-tutorials/how-to-add-svg-in-wordpress/ If that doesn't help, search for Wordpress + SVG on your favourite search engine.