It’s because it’s a pretty small image (169×39) and on your retina screen it’s actually using twice the (physical) pixels to display it (338×78), so it will just be resized — scaled UP, in this case.

You should use a much larger image in the first place, use that as a background image for the navbar-header, and set it to size 100% 100% so that it will scale DOWN, which will give you much better quality.

Related Articles:

How to Change the Position of Logo to Center?

What is the Recommended Size of the Logo?

You can create logo from here https://hatchful.shopify.com/

Did this answer your question?