You’ve got a little schmutz on your logo

Posted: October 13th, 2011 | Author: | Filed under: Startups | 14 Comments »

I was just creating an account on Sprouter today and started poking around a bit. It’s a nice site, in the vein of Quora or OnStartups Answers. But something about it seemed just a tad… off.  Amateurish.  And then I realized what it was.

Honey, you've got a little schmutz on your punim

These are the fateful words my mother would utter right before licking a napkin and going in for the cleanup.  A kid’s adorable with raspberry juice on his face, but your business should put its best foot forward.  JPEG artefacts are not adorable, and while most visitors won’t notice them consciously, it just mucks up your image.  (Update: commenter grishick points out that Sprouter has polished up their logo right nice.)

Allow me to demonstrate.

Schmutzy JPEG:

 

 

Let me get that off your face:

 

 

Not a dramatic difference, to be sure.  And I made it a bit more egregious by cranking up the JPEG compression on the first version, although I’ve seen worse.

But it’s funny the subtle cues that signal “Real, grown up company” versus “Raspberry-stained toddler company”.  This one’s cheap and easy to fix.  Use your logo as a PNG, which offers lossless compression, and not a JPEG (or, heaven forfend, a GIF).  Go check right now.  Check the properties of the header on your home page.  PNG images across the board?  Good to go.  JPEGs?  Have a little chat with your designer and get the PNG versions.

One minor point: JPEGs offer better compression in some circumstances than PNGs, so keep an eye on your page load times.  But most logos compress well as PNGs, often better than as JPEGs – this may wind up as a win too.

So wipe the schmutz off your logo.  Your bubbe will be so pleased.

(You might want to subscribe or follow me on Twitter so you don’t miss new articles)

Completely random and unrelated posts:

  • http://jasonlefkowitz.net/ Jason Lefkowitz

    PNG’s not a perfect choice either; browser handling of color in PNG images is all over the place, which can make it difficult to get PNGs to consistently color-match with other elements of a design.

  • http://www.danshapiro.com/blog Dan Shapiro

    True enough. You can see color differences between the PNG and JPEG in the example I gave – but neither format’s immune.  In firefox and chrome, the PNG is closer to the original Illustrator file than the JPEG is. 

  • http://jasonlefkowitz.net/ Jason Lefkowitz

    The issue is that the PNG is harder to get to match to the colorspace of CSS.  It’s closer to the Illustrator file, but if you saw that the color of the text in Illustrator was #ff5c36, say, and set elements in CSS that need to match that header to the same hex value, they’d be subtly different in some browsers.  Which leads to all sorts of frustrating conversations as people report design glitches that seem to be unreproducible at first, until you realize different browsers produce different results.

  • Phil Bogle

    If you use PNGs, consider using the open source utility Pngcrush to losslessly reduce the size of PNGs.

    http://en.wikipedia.org/wiki/Pngcrush

  • http://www.danshapiro.com/blog Dan Shapiro

    Aha!  Makes sense.

  • http://www.danshapiro.com/blog Dan Shapiro

    That one’s going in the toolbox.

  • http://twitter.com/joeyespo Joe

    What’s a good alternative then that’s consistent with this article?

  • http://twitter.com/scottru Scott Ruthfield

    It’s funny that your initial amateurish reaction was to the logo. I can’t even see the logo when I visit the home page because of the clashing colors – the yellow/grey/green, the slight shade on “your”, the unnecessary two-tone on the sign up button that actually warps the letters slightly, the popped-up box of photos, the dark-on-light grey in the middle of the page – I actually had to look for the logo to see the problem.

    (I could keep going but I don’t see the point in being harsh for no reason.)

  • Anonymous

    I was completely distracted by the photos of adorable children. What is this blog about? Stain removal?

    Whatever. I love it. Bookmarked. More photos of urchins with berry-stained faces, please.

  • http://joeharris76.blogspot.com joeharris76

    Squeezer is my favourite for this. http://alternativeto.net/software/squeezer/

  • http://jasonlefkowitz.net/ Jason Lefkowitz

    GIF works.  Alternately you can use a tool like the above-mentioned pngcrush to strip the gamma information out of your PNG files; that’ll break in some really old (like pre-2006 old) browsers, but should be consistent everywhere else.  Or use PNG background images for color rather than CSS color definitions; that way if the PNG fails it’ll at least fail in both places, so they’ll still match.

  • http://www.clubnetsearchmarketing.co.uk/ zigojacko

    Radical difference, can make such an improvement to your website using cleaner, crisper, better quality images.

  • http://twitter.com/grishick grishick

    This post sounds like something people discussed a lot back in the late 1990s :) By now it does not take a professional designer to make a website look professional. Good to see that Sprouter changed the JPEG to PNG now.

  • Jasonchien000

    A shape of cartier silver earring depending upon the choice can be symmetrical, asymmetrical, twist style, trilogy, delicate, dramatic, or chunky. Before deciding the shape, also one need to consider the hand that will be wearing the chanel cc earring for sale, a chunky ring would look better on a heavy and big hand while the delicate on needs to be worn on delicate hand cartier earring. The trilogy shape usually is a three-diamond cartier pearl earring but you can have a gemstone like emerald or sapphire with two smaller diamonds on each side wholesale cheap cartier earrings .