[IMP] *: remove image_64 and clean views

There are too many image sizes. Since they are stored resized this takes time to
generate when saving a new image, it's more rows on the attachment table, more
files on the disk, ...

64px is close enough to 128px that it can be removed without a big impact on
download size.

It will even reduce download and number of requests when both images are
displayed because now only one has to be downloaded and then benefit from cache.

The difference between the two is typically around 1.5kB which is negligible
these days, especially when the request overhead is around 0.5kB already, not
even taking into account other factors such as latency.

If a 64px image must absolutely be returned, it is still possible to pass the
size parameters to the image route. But the current guideline is to handle
resizing in the views when necessary.

Views
=====

- remove width and height attributes when existing CSS rules are overriding them
  (eg. `.oe_kanban_avatar` in the right context)
- add CSS rules instead of width and height attributes when possible
- use `object-fit: cover;` where width and height are forced to avoid distortion
  of non-square images
- for products, use `object-fit: contain;` instead, keep ratio but without crop
- add new CSS rules where the expected size was max 64px*64px before due to the
  image size itself
- remove `img-fluid` where using size classes to avoid conflicting rules

task-2060865

closes odoo/odoo#36147

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

2 files changed, 3 insertions, 12 deletions

diff --git a/addons/website_livechat/static/src/xml/thread.xml b/addons/website_livechat/static/src/xml/thread.xml
index b257f5264b3..aaab8703a52 100644
--- a/addons/website_livechat/static/src/xml/thread.xml
+++ b/addons/website_livechat/static/src/xml/thread.xml
@@ -32,7 +32,7 @@
                 <div class="o_thread_message_sidebar align-self-center">
                     <div class="o_thread_message_sidebar_image">
                         <img alt=""
-                             t-att-src="visitor.partner_id ? '/web/image/res.partner/' + visitor.partner_id + '/image_64' : '/mail/static/src/img/smiley/avatar.jpg'"
+                             t-att-src="visitor.partner_id ? '/web/image/res.partner/' + visitor.partner_id + '/image_128' : '/mail/static/src/img/smiley/avatar.jpg'"
                              class="o_thread_message_avatar rounded-circle"/>
                         <span>
                             <i t-if="visitor.is_connected" aria-label="Visitor is connected" class="o_w_visitor_status o_w_visitor_connected fa fa-circle" role="img" title="Online"></i>
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 0d1dd069ac0..ff013dc1c44 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -157,16 +157,7 @@
                             <h3>The Team</h3>
                             <t t-foreach="team" t-as="user">
                                 <div class="media mt-3">
-                                    <t t-if="user.image_64">
-                                        <t t-if="user.livechat_username">
-                                            <img t-att-src="user.image_64 and image_data_uri(user.image_64) or '/web/static/src/img/placeholder.png'"
-                                            class="rounded o_livechat_operator_avatar" t-att-alt="user.livechat_username"/>
-                                        </t>
-                                        <t t-else="">
-                                            <img t-att-src="user.image_64 and image_data_uri(user.image_64) or '/web/static/src/img/placeholder.png'"
-                                            class="rounded o_livechat_operator_avatar" t-att-alt="user.name"/>
-                                        </t>
-                                    </t>
+                                    <img t-if="user.image_128" t-att-src="image_data_uri(user.image_128)" class="o_image_64_cover rounded o_livechat_operator_avatar" t-att-alt="user.livechat_username or user.name"/>
                                     <div class="media-body">
                                         <h5>
                                             <t t-if="user.livechat_username">
@@ -225,7 +216,7 @@
                                     <t t-foreach="channels" t-as="channel">
                                         <div t-attf-class="media#{' mt-3' if channel_index else ''}">
                                             <a t-attf-href="/livechat/channel/#{ slug(channel)}">
-                                                <img t-att-src="channel.image_128 and image_data_uri(channel.image_128) or '/web/static/src/img/placeholder.png'" t-att-alt="channel.name" />
+                                                <img t-att-src="channel.image_128 and image_data_uri(channel.image_128) or '/web/static/src/img/placeholder.png'" t-att-alt="channel.name" class="o_image_64_cover"/>
                                             </a>
                                             <div class="media-body">
                                                 <h4><t t-esc="channel.name"/></h4>