[chuni] misc frontend improvements/fixes (i.e. webp instead of png; css error; hide subtrophies on old version) (#234)

TL;DR avatar and userbox frontend pages can get hella slow when loading the first time when a ton of stuff is unlocked. Its driven primarily by all the images the server has to push to the client. To reduce the burden, these changes switch from using png to webp for all scaped images during import, reducing image sizes to roughly 20% of their png-equivalent.

The filelist is long so here's a summary list of changes:
- Replaced png assets with webp versions
- Updated read.py to save assets as webp instead of png
- Updated frontend.py and jinja to use webp instead of png
- Added a conversion function ran by both the importer and the frontend on launch that looks for previously imported png files and converts them to webp. Only included for the sake of anyone who already did imports since the frontend improvements were introduced.
- [bugfix] Fixed a css bug in the avatar jinja that affected Save/Reset button use on super narrow screens

Reviewed-on: https://gitea.tendokyu.moe/Hay1tsme/artemis/pulls/234
Co-authored-by: daydensteve <daydensteve@gmail.com>
Co-committed-by: daydensteve <daydensteve@gmail.com>

titles/chuni/templates/chuni_avatar.jinja

@@ -14,13 +14,13 @@
         <table class="table-large table-rowdistinct">
           <caption align="top">AVATAR</caption>
           <tr><td style="height:340px; width:50%" rowspan=8>
-            <img class="avatar-preview avatar-preview-platform" src="img/avatar-platform.png">
+            <img class="avatar-preview avatar-preview-platform" src="img/avatar-platform.webp">
             <img id="preview1_back" class="avatar-preview avatar-preview-back" src="">
             <img id="preview1_skin" class="avatar-preview avatar-preview-skin-rightfoot" src="">
             <img id="preview2_skin" class="avatar-preview avatar-preview-skin-leftfoot" src="">
             <img id="preview3_skin" class="avatar-preview avatar-preview-skin-body" src="">
             <img id="preview1_wear" class="avatar-preview avatar-preview-wear" src="">
-            <img class="avatar-preview avatar-preview-common" src="img/avatar-common.png">
+            <img class="avatar-preview avatar-preview-common" src="img/avatar-common.webp">
             <img id="preview1_head" class="avatar-preview avatar-preview-head" src="">
             <img id="preview1_face" class="avatar-preview avatar-preview-face" src="">
             <img id="preview1_item" class="avatar-preview avatar-preview-item-righthand" src="">
@@ -36,7 +36,7 @@
           <tr><td>Front:</td><td><div id="name_front"></div></td></tr>
           <tr><td>Back:</td><td><div id="name_back"></div></td></tr>
 
-          <tr><td colspan=3 style="padding:8px 0px; text-align: center;">
+          <tr><td colspan=3 style="padding:8px 0px; text-align: center; position: relative;">
             <button id="save-btn" class="btn btn-primary" style="width:140px;" onClick="saveAvatar()">SAVE</button>&nbsp;&nbsp;&nbsp;&nbsp;
             <button id="reset-btn" class="btn btn-danger" style="width:140px;" onClick="resetAvatar()">RESET</button>
           </td></tr>

titles/chuni/templates/chuni_userbox.jinja

@@ -18,7 +18,7 @@
             <img id="preview_nameplate" class="userbox userbox-nameplate" src="">
             
             <!-- TEAM -->
-            <img class="userbox userbox-teamframe" src="img/rank/team3.png">
+            <img class="userbox userbox-teamframe" src="img/rank/team3.webp">
             <div class="userbox userbox-teamname">{{team_name}}</div>
 
             <!-- TROPHY/TITLE -->
@@ -26,7 +26,7 @@
             <div id="preview_trophy_name" class="userbox userbox-trophy userbox-trophy-name"></div>
 
             <!-- NAME/RATING -->
-            <img class="userbox userbox-ratingframe" src="img/rank/rating0.png">
+            <img class="userbox userbox-ratingframe" src="img/rank/rating0.webp">
             <div class="userbox userbox-name">
               <span class="userbox-name-level-label">Lv.</span>
               {{ profile.level }}&nbsp;&nbsp;&nbsp;{{ profile.userName }}
@@ -37,7 +37,7 @@
             </div>
 
             <!-- CHARACTER -->
-            <img class="userbox userbox-charaframe" src="img/character-bg.png">
+            <img class="userbox userbox-charaframe" src="img/character-bg.webp">
             <img id="preview_character" class="userbox userbox-chara" src="">
           </td></tr>
           
@@ -50,7 +50,7 @@
             {% endfor %}
             </select>
           </div></td></tr>
-
+          {% if cur_version >= 17 %} <!-- SubTrophies introduced in VERSE -->
           <tr><td>Trophy Sub 1:</td><td><div id="name_trophy">
             <select name="trophy-sub-1" id="trophy-sub-1" onclick="changeTrophySub1()" style="width:100%;">
               <option value="-1"></option>
@@ -68,7 +68,8 @@
             {% endfor %}
             </select>
           </div></td></tr>
-          
+          {% endif %}
+
           <tr><td>Character:</td><td><div id="name_character"></div></td></tr>
 
           <tr><td colspan=2 style="padding:8px 0px; text-align: center;">
@@ -180,10 +181,10 @@ function changeItem(type, id, name, img) {
 function getRankImage(selected_rank) {
   for (const x of Array(12).keys()) {
     if (selected_rank.classList.contains("trophy-rank" + x.toString())) {
-      return "rank" + x.toString() + ".png";
+      return "rank" + x.toString() + ".webp";
     }
   }
-  return "rank0.png"; // shouldnt ever happen
+  return "rank0.webp"; // shouldnt ever happen
 }
 
 function changeTrophy() {