Advice: Logo (Looks blurry in some browsers)


I could use a little advice:

I’m using a (bigger) PNG version of my logo which is being resized:

693px x 201px to 207px x 60px

It looks great in Chrome (retina and Windows), but a little blurry and pixelated in IE (especially) and Firefox.

How can I make sure the logo looks good in all common browsers (retina and normal resolutions) and what is the smartest size to use for a logo?




Firefox looks to me the same as Chrome. IE is indeed a bit blurry (tested with IE9). It’s because you’re scaling down the image. Give this a shot:

.site-logo {
    -ms-interpolation-mode: bicubic;

Unfortunately it doesn’t solve it. I left the code in my child theme, so you can try it out for yourself if you like.

Thank you for helping!