[IMP] web: set width and height of tiny Odoo logo

In order to improve the page speed score and avoid layout shift, set
both width and height of the tiny Odoo logo used in the copyright
section of the website footers. This was able to be done with no
drawback:
- Set the width and height attribute of the image being loaded
- Leave the CSS rule `height: 1em;`
- Add the CSS rule `width: auto;` (which was implicit before)

By doing this:
- Once the image is loaded, the behavior is exactly the same as before
- While the image is loading, the height is still using 1em but the
  difference is that the "auto width" now know the final aspect ratio
  of the image thanks to the width and height attribute -> the width is
  thus the same as it will be once the image will be loaded (while it
  was 0 before)

X-original-commit: a709a10e0b746242a6bca1af2ce92020ec917464
Part-of: odoo/odoo#101149
This commit is contained in:
qsm-odoo
2022-09-26 16:55:20 +02:00
parent 482de91bfd
commit 0495ca05d5
+3 -2
View File
@@ -82,8 +82,9 @@
t-attf-href="http://www.odoo.com?utm_source=db&utm_medium=#{_utm_medium}"
class="badge text-bg-light">
<img alt="Odoo"
src="/web/static/img/odoo_logo_tiny.png"
style="height: 1em; vertical-align: baseline;"/>
src="/web/static/img/odoo_logo_tiny.png"
width="62" height="20"
style="width: auto; height: 1em; vertical-align: baseline;"/>
</a>
</t>
<t t-set="final_message">Powered by %s%s</t>