0

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?

2

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.

2

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).

  • Thank you for you answer, it was good and it was hard to choose the best one, but I think specific detail on CSS media queries and different logos for different screen sizes is the best solution. – Brian Ogden Jul 11 '14 at 22:16
1

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?

1

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.

  • Good suggestion on the SVG, tried one version that the designer sent but looked a little more pixelated, the designer is going to send over some other svgs to try. – Brian Ogden Jul 11 '14 at 22:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.