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
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/[email protected] 2x" />
Just some simple addition in the HTML code and that’s about it.
We hope you all will enjoy the addition of Retina Logo option in the theme.
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!