If you want to keep the logo the same size on both scroll/non scroll then you can change the 76px height to 56px on line 1231 in your style.css file like this –
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 56px;
text-indent: -9999px;
}
I tested this on your site and the logo stays the same size when done this way.
If you want the logo to be large as it is, but clearer quality, then I would upload an image double the size you want it to be, so that it scales down rather than up.
Example, if you want your image to be 300px width and 60px height, then you need to create an image to be 600px width and 120px height. That way it won’t stretch and it won’t lose quality.
Either way you do it should work depending on what you need.
.
