Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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).
It looks pretty crisp to me, but it does indeed look slightly squished. Maybe the dimensions of the original image produced by the designer are not similar (ex: 1000x1000 --> 2000x2000) to how you're displaying it on your site?
Alternatively, you could use an SVG at 385x105 in place of a PNG or JPG. SVG's are resolution independent – which means none of this "is my logo going to look good on everybody's screen" stuff to worry about. And often times, an SVG will be more light-weight than a JPG or PNG. AND SVG's play very nicely with media queries.
