Hi all,

 

I have a question about how to avoid a pixelated logo.

 

For inspiration, I’ve looked at the CNBC logo at CNBC.com. It looks like to logo is crisp and clear. When you open the logo image in a new tab (https://sc.cnbcfm.com/applications/cnbc.com/staticcontent/img/cnbc-hdr-logo2.png) the dimensions looks bigger than on the site CNBC.com. Thus the logo on the website is smaller than the dimensions of the PNG image, which makes it look crisp and clear.

 

My question is: How do I do the same on my website with my logo?

 

Kind regards,

Crypto

use svg instead - clear at any size (well ok not 5px wide and any any high res screen like retina or similar display and you only need one asset for any size or screen pixel density. align your pixels to the pixel grid in the programme you made your logo in (if you can) and it should be good to go!

Thank you dap for the answer! Do you know how to implement an SVG file in HTML so that it can run on Internet Explorer, Google Chrome, Firefox and Safari and have a PNG file to fall back on? I tried with this, but could not make it work:

<img src="img/logo.svg" onerror="img/small.png; this.onerror=null;"/>

Try this: https://css-tricks.com/svg-fallbacks/

 

But look at this: http://caniuse.com/#feat=svg

You don't need a fallback unless you use IE8, fallbacks make it difficult to do things like sprites effectively.

I have the same question!!! here Got to know the thing. thank you so much!!!