Multiple-resolution logo images

[Gabriel Torres]

Hello,

I am in the process of optimizing our install with the help with Google's Lighthouse, and trying to improve our score in that tool. 

Today I succesfuly worked on a issue that I suggest IPS to address in an upcoming release: multiple-resolution logo images.

Here is the warning that we got using lighthouse:

Following the suggestions decribed here: https://web.dev/serve-responsive-images/ and here: https://web.dev/codelab-density-descriptors/, I decided to create three logo images for our install at sizes 460x77 (1x), 920x154 (2x), and 1380x280 (3x). I uploaded them to a new folder (/uploads/logos/), and adjusted the HTML code at the core > front > global > logo template to:

<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" srcset="/uploads/logos/logo-cdh-1x.png 1x, /uploads/logos/logo-cdh-2x.png 2x, /uploads/logos/logo-cdh-3x.png 3x" sizes="460px" alt='{setting="board_name" escape="true"}'></a>

Note: I uploaded the 1x version as the logo in the template's settings page.

After this change, our logo looks much crispier and also we got rid of the above warning. In fact, our "Best Practices" score inscreased from 86 to 93! 🙂

I really hope that this helps other administrators who are looking into ways to improve their community's performance, and I hope IPS can make adjustments to fix the recommendations presented by Lighthouse to improve the overall score of our websites.

Enjoy! 🙂

Gabriel.

[SeNioR-]

I was supposed to write about it 🙂

The logo on the mobile version is slightly blurry, a few versions would solve the case, I think.

Edited January 16, 2021 by SeNioR-

[Adlago]

I use a webp logo - it works well for me.
I use this in a template logo

<a href='{setting="base_url"}' id='elLogo' accesskey='1'><div class='mylogo' title="mylogo"></div></a>

And I load a logo through a custom CSS.