My client has asked me to add retina logo capability to their theme. They say when they upload an extra large logo, it looks good on retina mobile but looks a little thin on a larger desktop. However, doesn’t WP 4.4 and up already load the proper image for retina displays? Would adding a 2x retina image be redundant or unnecessary?

For example, they have a logo element that is set to a max-width of 150px, and they uploaded an image that is 349px wide…. I can see in the source code that it looks like this:

  <img width="349" height="132" src="http://example.com/wp-content/uploads/2016/02/logo-gs1.png" class="attachment-logo size-logo" 
 srcset="http://example.com/wp-content/uploads/2016/02/logo-gs1.png 349w, http://example.com/wp-content/uploads/2016/02/logo-gs1-300x113.png 300w, http://example.com/wp-content/uploads/2016/02/logo-gs1-36x14.png 36w" sizes="(max-width: 349px) 100vw, 349px">

It’s serving me the 300×113 img on an iPhone, and the full size image on a macbook – both retina displays.

Would adding a retina 2x to the srcset do anything better than what’s being done now?

Read more here: Are retina logos necessary after WP 4.4+


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: