[FIX] gamification: improve next rank icons

Background of icons should be transparent.

Commit linked to task ID 1941250 and PR #31317.

addons/gamification/data/gamification_karma_rank_demo.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<odoo><data noupdate="1">
+<odoo><data noupdate="0">
     <!-- Set demo karma for test tour as demo user-->
     <record id="base.user_demo" model="res.users">
         <field name="karma">20</field>
@@ -15,7 +15,7 @@
         <field name="description_motivational" type="html">
 <div class="media align-items-center">
     <div class="media-body">Reach the next rank and gain a very nice mug !</div>
-    <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_mug.jpg"/>
+    <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_mug.png"/>
 </div></field>
         <field name="karma_min">100</field>
         <field name="image" type="base64" file="gamification/static/img/rank_student_badge.svg"/>
@@ -27,7 +27,7 @@
         <field name="description_motivational" type="html">
 <div class="media align-items-center">
     <div class="media-body">Reach the next rank and gain a very magic wand !</div>
-    <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_wand.jpg"/>
+    <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_wand.png"/>
 </div></field>
         <field name="karma_min">500</field>
         <field name="image" type="base64" file="gamification/static/img/rank_bachelor_badge.svg"/>
@@ -39,7 +39,7 @@
         <field name="description_motivational" type="html">
 <div class="media align-items-center">
     <div class="media-body">Reach the next rank and gain a very nice hat !</div>
-    <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_hat.jpg"/>
+    <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_hat.png"/>
 </div></field>
         <field name="karma_min">2000</field>
         <field name="image" type="base64" file="gamification/static/img/rank_master_badge.svg"/>
@@ -51,7 +51,7 @@
         <field name="description_motivational" type="html">
 <div class="media align-items-center">
     <div class="media-body">Reach the next rank and gain a week-end with a unicorn !</div>
-    <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.jpg"/>
+    <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.png"/>
 </div></field>
         <field name="karma_min">10000</field>
         <field name="image" type="base64" file="gamification/static/img/rank_doctor_badge.svg"/>