How to Dispay Sharper Logo on High Resolution Screens

Does your logo look blur and pixelated on iPad retina display screen? Why does the logo of your favorite top blog look sharper? Here is the secret to display sharper logos on high resolution screens.

Sharper Logo

I took an iPad screenshot to show how blur the logo looked.
blur logo

This is another iPad screenshot after implenting this tip to show the sharper logo
sharp logo

Most logos look sharp on your desktop or laptop and blur on iPad, because the iPad packs in more pixels in the high resolution display. What we have done now is 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, lets 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 magic code which makes this happen using the srcset element.

<img src="/logo.png" width="200" height="30" srcset="/logo2x.png 2x" />

The srcset code allow 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 how a simple code can make such a difference to your site design.