Does your logo look blur and pixelated on HD or 4K screens like the iPad retina display screen? Why does the logo of your favorite top blog look sharper? Here is the secret to displaying sharper logos on high-resolution screens.
The Sharper Logo
I took an iPad screenshot to show how blur the logo looked.
This is another iPad screenshot after implementing this tip to show the sharper logo
Most logos look sharp on your desktop or laptop and blur on the iPad, because of the iPad packs in more pixels in the high-resolution display.
Image srcset attribute
What we have done now is to use 2 images of the same logo and the browser decides which logo to use depending on the screen resolution.
On the top of our site, let us say we load a file called logo.png which is 200px wide and 30px high to display the logo like this
<img src="/logo.png" width="200" height="30" />
Now we also provide the browser a path to a larger image twice the size called logo2x.png with 400px width and 60px height. Now we use this img code which makes this happen using the srcset element.
<img src="/logo.png" width="200" height="30" srcset="/logo2x.png 2x" />
The Image srcset attribute allows the browser to display the bigger image and pack it in the smaller image space when called for! Now iPad loads the bigger image instead of the standard logo and displays a sharper image. Try it for your logo and be amazed at how simple code can make such a difference to your site design.