How to Dispay Sharper Logo on High Resolution Screens

By 2 years ago   BloggingTutorials
Tweet Share Email Share  

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.

11 comments on “How to Dispay Sharper Logo on High Resolution Screens

  1. Its looking good i would sure try in my website logo.

  2. Archi says:

    Logo looks blur but it is not pixelated

  3. Akshat says:

    Wow.. Nice Tip Bro. Never knew anything like that before. Going to implement on my blogs and sites.

  4. Jyoti Sharma says:

    Its nice. But I want to know how can I make my looks attractive when it gets opened at any device.

  5. Shruti Sen says:

    I too face the same problem while uploading my logos on my website. This blog helps me a lot in fixing my problems. Thanks a lot for sharing this info.

  6. Deb says:

    Creating a logo is really easy with available tools these days. I found onlinelogomaker and awesome online tool and I ahve created few logos for my websites as well.

  7. Ravi Kr says:

    Really this image attribute is awesome, I never heard about it. Now I used it. Its great. Thanks.

  8. kata bijak says:

    Logo looks blur but it is not pixelated -.-

  9. I am using one software, but when we save image logo after adding effect, it get blur. Thanks for this tool, now logos are clear. Thanks for the psot

  10. yes i agree with above comments and i also saw that logo looks like blur :)
    we want next update from you

  11. evahammer says:

    I often design the logos for my clients i have tool but sometimes it takes too much time. This is better tool thanks for sharing..

Leave a Reply

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

ALL comments are moderated. No links allowed. Use real name. Only useful comments will be approved.