Blurry Logo In Menu

I have a high resolution PNG logo located in the “in menu” header. It looks blurry and i’m not sure how to fix it.

I had to resort to use the following CSS in order to make the logo smaller as just uploading caused it to be too large.

/* Vantage Adjust Logo in Menu img constraint */

header#masthead.masthead-logo-in-menu .logo > img {
max-height: 40px;
}

/* Header */

@media (max-width: 680px) {

header#masthead .hgroup {
padding-top: 0;
padding-bottom: 0;
}

body.responsive header#masthead .hgroup .logo {
padding-top: 13px;
}

}