How to Add a Retina Logo Without Affecting Website Performance?
Sujay Pawar

September 7, 2017

Introducing Retina Logo

retina-logo-2

Most of the modern devices nowadays use retina and high definition screens and it is more important than ever to have the websites ready for high definition screens. So in version 1.0.19 of the Astra theme that will go live on September 12th 2017, we’re introducing an option where you can upload the Retina version of the Logo.

How would it work for users?

If you navigate to Customizer ▸ Site Identity; you will find a new setting from the version 1.0.19 of Astra theme where you can upload the Retina Logo. So if your current logo is 250 X 250, just upload 500 X 500 sized logo in the “Retina Logo” option. This 2x sized logo is necessary on high definition screens so the logo won’t look blurred.

Retina Logo without sacrificing performance.

Most of the themes use libraries such as Retina JS which checks if there is a high-resolution version of the logo available on your server. If a high-resolution variant exists, the script swaps the logo in-place. And some other themes some CSS hacks to display to high resolution logo

These methods add extra HTTP requests and unnecessary JavaScript code to request and download both versions of the logo.

However for Astra, we used the HTML5 srcset attribute which allow browsers to request only the required logo file and performance sacrifice. You will be surprised, how simple the code looks like:

<div style="background: #f7f7f7; border-radius: 4px; color: #333; padding: 18px 15px; margin-bottom: 24px;">
<img src="http://example.com/wp-content/uploads/2017/08/Logo-free-img.png" srcset="http://example.com/wp-content/uploads/2017/08/logo.png 1x, http://example.com/wp-content/uploads/2017/08/logo@2x.png 2x" />
</div>

Just some simple addition in the HTML code and that’s about it.

HTML5 srcset attribute is used for the Responsive Images feature introduced in WordPress 4.4 and it is supported by most of the browsers.

We hope you all will enjoy the addition of Retina Logo option in the theme.

Join 208,419 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

About the Author

Sujay is CEO and Co-Founder of Brainstorm Force, the company behind Astra. He is a diehard entrepreneur, growth hacker, and YouTube addict. Get in touch with him on Twitter @sujaypawar.

Sharing is Caring!
Share on facebook
Share on twitter
Share on telegram
Share on whatsapp
Share on facebook
Share on twitter
Share on telegram
Share on whatsapp

11 comments

    1. Retina logo is basically 2x version of your current logo. This will be displayed only on the High Pixes density devices like Retina MacBooks, iPhones and other high-end devices.

  1. How about using a scalable vector image in SVG format? With a plugin like “Safe SVG” that is feasible.

  2. I’m wondering why the exact same logo on my home page (with astra) looks fuzzy
    / blurry, but when I put it on my landing page builder (instabuilder) on teh SAME SITE, it is clear.

    Astra is doing something to the logo images to make them MORE BLURRY, as evidenced by the fact that the VERY SAME LOGO looks blurry on Astra, but clear on my landing page builder – again, ON THE VERY SAME SITE.

    Any hope to fix this?

    1. If you have set a fixed width for the logo, Astra crops the logo in that size and displays it on the site. Right now there is no option to disable this functionality, We will get this added in the upcoming version of the theme.

      If you add a Retina logo as well it will be displayed in full resolution, You can use this as a workaround for now.

  3. I am unable to remove the existing logo from the Astra theme and if at all if I delete the existing logo and upload mine, it’s showing same logo twice. Please help me out

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended Articles

Scroll to Top
Like what you read? Leave a comment