Fixing your Pixelated Divi Logo

The Divi Theme lets you resize your site logo to a size of your choosing. However, if you're unlucky, you may find that your resized logo looks pixelated, no matter how smooth your original image.

The cause of this problem is that the browser tries to resize the original image to the new height, and different browsers do so with different degrees of success. Internet Explorer is notoriously bad at this, and you may find your logo looks fine in Chrome (for instance), but rubbish in IE.

While there are a number of hacks floating around the net which offer solutions for particular browsers, or use JavaScript to perform better resizing, these are likely going to be time-consuming to get working well (and I don't yet have a nice divi-ready version to offer you, sorry).

Fortunately, there is a simpler approach, which I suggest you try out first. As the problem is that certain browsers are no good at resizing the image, we can avoid this by resizing the image ourselves using an image editing program such as paintshop or gimp. These programs are dedicated to image processing and will do a much better job of the resizing. As a bonus, providing the logo at the correct size will help speed up your site as the browser won't be downloading the large version of the image. In order to resize the image, you'll need to know what height to resize it to. If you followed my tutorial on resizing the site logo (linked above), you should already know what height your logo will display at. Otherwise, you can use your browser's HTML inspector to find out the image height. The process varies slightly from browser to browser, but using Chrome, for example, you can right click on the image, select inspect element and then hover over the image URL in the inspector to see the image height in pixels. Resize the original image to this height, save, and then upload it as your Divi logo. You should now find that the image looks good on all browsers.

If for some reason, you can't resize to the displayed logo height, then I suggest at least trying to make sure that the original image height is an integer multiple of the displayed logo height. This will minimize rounding errors when the browsers resize the image, and should produce a slightly better result.

Note that the image may still pixelate on smaller screens, etc, so you may still want to investigate the hacks I mentioned earlier should you need a pixel perfect logo in all situations.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

8 Comments

  1. Thank you for the tip !

    Reply
  2. @Angus, THANK YOU, that does the trick on Chrome!!

    Reply
  3. Can you clarify…is this a "how to blog" or does Divi Booster actually come with a setting that allows you to easily clear up a pixelated logo?

    Reply
    • Hi Brittany, this one is currently just a "how to blog" – there's no corresponding setting in Divi Booster. I'll consider adding it in the future, though as it'd be a nice not to have to mess about manually resizing the image. I'll update here if I'm able to implement it down the track. Thanks!

      Reply
      • A quick hack that works on most modern browsers is to add this to the CSS:

        #logo {-webkit-transform: initial;}

        I've found it helps smooth out the logo on Chrome. Funnily enough, in my case, Chrome was the only browser having the issue (the logo already looked fine on Edge/Firefox/Safari).

        Nothing beats a manual resize, but sometimes a quick hack can work well too :)

        Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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