[labnoon]

Hello guys it’s me again
I hope your doing well. I love the last update! great work.

So I have uploaded the last design of my image logo, and no matter what I do (saving for web and devices, higher DPI, larger image, PNG 24) my image remains a little blurry. specially on the lighter parts! the dark parts look ok but the light parts are too blurry! the funny thing is that it looks great on iPhone (and so on other mobile devices I imagine). I googled a lot the issue but didn’t find a good answer. thought maybe you could give me a hand with it.

Thank you for the help

Saghar

[labnoon]

it’s http://www.labnoon.com

[ahmetsali]

Hi, it is because of your image is being resized in desktops. Your actual image logo is 1700×620 px. But browsers forces it to view it in max 300px height. Resize your image logo 300px height and it should be crisp.

[labnoon]

Thanks! I didn’t think it could be the reason. Now the image is exactly 300 px in height and it’s even blurrier! it’s not blurry on the sides as it was before but it’s blurry right in the middle where the logo is. This is really weird!

Thanks for the help :)

[ahmetsali]

your image is still being resized. Because it is 390px height, resize it to be 300px height.

[labnoon]

yes, I changed it first to 300 px as you said, and it was blurry, specially more so in the middle. (that was when I wrote you), then I tried to see what happens if it’s slightly larger. anyway, even the 300 px is blurry, now I put it back so you can check if you want.

Thanks a lot :)

[ahmetsali]

i still see the image in 390px height in your site. And it is still being resized. That might be causing a little blurness. Actually it didn’t bother me. When there is no resizing done by browser your image should look same as your original image you see in your desktop.

[labnoon]

oops sorry I hadn’t clicked save I guess. now it’s 300 px. if you look carefully the little birds, the dotted line and the top of N in noon are blurry!
I have the custom css

h1.site-title img { max-height:300px; }


and I thought it would cause the problem, but when I removed it the logo was resized to a very small logo!

thanks for the patience

[ahmetsali]

just checked it again and it has 301px height now, use this custom css code and it should be fine;

h1.site-title img { max-height:301px; }

[labnoon]

wow! thanks! I used the same css but it was set to 300px! never thought one tiny pixel could make all that difference.

thank you very much for the help!