How to Display Sharp Logo on HD/4K Screens with Srcset

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.
blur logo

This is another iPad screenshot after implementing this tip to show the sharper logo
sharp 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.


  1. Rahul Sachdev says:

    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. amit says:

    great!! creating logo is not so easy. I’m going to create a logo every week.
    Pease look at my logo.

  9. kata bijak says:

    Logo looks blur but it is not pixelated -.-

  10. Swapnil Jagtap says:

    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

  11. somnath sharma says:

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

  12. 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 *