Jump to content

Multiple-resolution logo images


Recommended Posts

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:

logo-before.png.10d12cf6dc7ed66fa4b521bb424caca7.png

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! 🙂

logo-after.png.1500b309a9b18222133a95d9e01f3dbb.png

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...