Smaller images, like a logo, may look blurry on HiDPI screens such as MacBook Pro. The reason for this issue is that HD screens use twice as many physical pixels to display images. So, for instance, if a logo has 200px in height and 200px in width, HD screen will actually use 400px for height and 400px for width. Therefore, the logo will be stretched up causing it to lose its crisp look. There are two options for solving this issue:
First option: Use Retina logo
Retina logo is exactly the same as the default one, but twice in size; so if you use 200px X 200px default logo, than Retina logo will be 400px X 400px large. You should upload both, the default and retina logo. To do so:
- In the WordPress Dashboard, click Appearance » Customize » Logo
- Upload first the default logo image or select it from Media Library
- After the second step, Retina Logo upload field will appear; Upload Retina logo and make sure it is twice in size than the default logo.
Second option: Use SVG format for logo
SVG stands for Scalable Vector Graphic and it represents very small XML based file that draws 2-dimensional graphics according to its coordinates. Since it is undependable of screen sizes, SVG makes the perfect solution for responsive websites. They are easily manipulated; they can be compressed, animated with CSS, searched, indexed, and on. Due to security reasons, WordPress by default doesn’t support upload of SVG file format. To enable it please see how to enable safe SVG uploads in WordPress.