Why does my logo look pixelated


So I had a designer on 99Designs create a logo for me, it is Vector and he generated the Logo size you can see on my website here: sandiegosoftware.net

I understand that my browser, OS and resolution of my monitor can effect the look but it just doesn't look very crisp to me. He seems like a good designer, is there any areas, such as anti-aliasing that he could improve upon?

7/11/2014 6:47:00 PM

Accepted Answer

It's a dynamic image set to resize based upon browser window size. Some sizes will look poor. Setting a specific size for the image (then adjusting the site CSS media queries to call other sizes for other screens) would server it better.

Most web site logos are not set to scale when the browser window size changes. While that theory works wonderfully for most images, the logo is of more importance and should be handled specifically.

7/11/2014 6:58:00 PM

First, as some others have mentioned, the logo image is being displayed at a size different from its actual size. Doing that leaves it to the browser to perform the sub/supersampling needed to resize an image and browsers aren't awesome at that.

Along with that, it looks like the logo file you are using is in fact a bit fuzzy. PNG is a good format here, but the designer can possibly get you a more crisp version by exporting with different antialiasing settings. For example, in Illustrator "Type Optimized (Hinted)" rather than "Art Optimized (Supersampling)" on the PNG export options dialog.

While he gets you a more crisp version, have him export it at the exact dimensions at which you intend to use it. Looks like the browser is trying to display the 385px wide image as 333.719 pixels wide. if he gave you one that was 333px wide, it would be more crisp — however, those partial pixels will still cause problems due to the browser again being trusted to perform hinting) Your web designer/developer can help fix that (and get you all the sizes for the responsive logos).