All images are now webp, Puchi has a floating animation

@CottonGuard reexported the remaining images to webp, lowering their size by 50%.
@lty2008one made a css animation for the puchi characters.

TaikoWebUI/Components/Song/PlayHistoryCard.razor

@@ -70,12 +70,12 @@
                         <img src="@ScoreUtils.GetDifficultyIcon(context.Difficulty)" alt="@context.Difficulty" title="@context.Difficulty" style="@Constants.ICON_STYLE"/>
                     </MudTd>
                     <MudTd>
-                        <img src="@($"/images/crown_{context.Crown}.png")" alt="@(ScoreUtils.GetCrownText(context.Crown))" title="@(ScoreUtils.GetCrownText(context.Crown))" style="@Constants.ICON_STYLE"/>
+                        <img src="@($"/images/crown_{context.Crown}.webp")" alt="@(ScoreUtils.GetCrownText(context.Crown))" title="@(ScoreUtils.GetCrownText(context.Crown))" style="@Constants.ICON_STYLE"/>
                     </MudTd>
                     <MudTd>
                         @if (context.ScoreRank is not ScoreRank.None)
                         {
-                            <img src="@($"/images/rank_{context.ScoreRank}.png")" alt="@(ScoreUtils.GetRankText(context.ScoreRank))" title="@(ScoreUtils.GetRankText(context.ScoreRank))" style="@Constants.ICON_STYLE"/>
+                            <img src="@($"/images/rank_{context.ScoreRank}.webp")" alt="@(ScoreUtils.GetRankText(context.ScoreRank))" title="@(ScoreUtils.GetRankText(context.ScoreRank))" style="@Constants.ICON_STYLE"/>
                         }
                     </MudTd>
                     <MudTd>@context.Score</MudTd>

TaikoWebUI/Components/Song/SongLeaderboardCard.razor

@@ -23,7 +23,7 @@
 
                             <MudToggleItem Value="@difficulty.ToString()">
                                 <div class="d-flex align-center">
-                                    <img src="@($"/images/difficulty_{difficulty}.png")" alt="@difficulty.ToString()" title="@difficulty.ToString()" style="@Constants.ICON_STYLE"/>
+                                    <img src="@($"/images/difficulty_{difficulty}.webp")" alt="@difficulty.ToString()" title="@difficulty.ToString()" style="@Constants.ICON_STYLE"/>
                                 </div>
                             </MudToggleItem>
                         }
@@ -65,12 +65,12 @@
                         </MudTd>
                         <MudTd>@context.BestScore</MudTd>
                         <MudTd>
-                            <img src="@($"/images/crown_{context.BestCrown}.png")" alt="@(ScoreUtils.GetCrownText(context.BestCrown))" title="@(ScoreUtils.GetCrownText(context.BestCrown))" style="@Constants.ICON_STYLE"/>
+                            <img src="@($"/images/crown_{context.BestCrown}.webp")" alt="@(ScoreUtils.GetCrownText(context.BestCrown))" title="@(ScoreUtils.GetCrownText(context.BestCrown))" style="@Constants.ICON_STYLE"/>
                         </MudTd>
                         <MudTd>
                             @if (context.BestScoreRank is not ScoreRank.None)
                             {
-                                <img src="@($"/images/rank_{context.BestScoreRank}.png")" alt="@(ScoreUtils.GetRankText(context.BestScoreRank))" title="@(ScoreUtils.GetRankText(context.BestScoreRank))" style="@Constants.ICON_STYLE"/>
+                                <img src="@($"/images/rank_{context.BestScoreRank}.webp")" alt="@(ScoreUtils.GetRankText(context.BestScoreRank))" title="@(ScoreUtils.GetRankText(context.BestScoreRank))" style="@Constants.ICON_STYLE"/>
                             }
                             else
                             {

TaikoWebUI/Pages/DaniDojo.razor

@@ -48,7 +48,7 @@ else
                                                     var danResultState = GetDanResultState(danId);
                                                     var danClearStateString = GetDanClearStateString(danResultState);
                                                 }
-                                                <img src=@($"/images/dani_{danResultState.ToString()}.png") style="max-width:150px; width:100%;" alt="danResultState.ToString()"/>
+                                                <img src=@($"/images/dani_{danResultState.ToString()}.webp") style="max-width:150px; width:100%;" alt="danResultState.ToString()"/>
                                                 <MudText Typo="Typo.body1">@danClearStateString</MudText>
                                             </MudStack>
                                         </MudCardContent>
@@ -141,7 +141,7 @@ else
 
                                                         <MudItem xs="2" md="1" Style="display:flex;flex-direction:column;align-items:center;">
                                                             <MudTooltip Text="@difficulty.ToString()" Placement="Placement.Top" Arrow="true">
-                                                                <img src=@($"/images/difficulty_{difficulty}.png") style="width:40px;height:40px;margin-bottom:2px;" alt="@difficulty" />
+                                                                <img src=@($"/images/difficulty_{difficulty}.webp") style="width:40px;height:40px;margin-bottom:2px;" alt="@difficulty" />
                                                             </MudTooltip>
                                                             <MudStack Row="true" Spacing="1" Justify="Justify.Center" AlignItems="AlignItems.Center">
                                                                 <MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Small" />

TaikoWebUI/Pages/DaniDojo.razor.cs

@@ -174,7 +174,7 @@ public partial class DaniDojo
     private string GetDanResultIcon(uint danId)
     {
         string icon;
-        const string notClearIcon = "<image href='/images/dani_NotClear.png' width='24' height='24' style='filter: contrast(0.65)'/>";
+        const string notClearIcon = "<image href='/images/dani_NotClear.webp' width='24' height='24' style='filter: contrast(0.65)'/>";
 
         if (!_bestDataMap.ContainsKey(danId))
         {
@@ -183,7 +183,7 @@ public partial class DaniDojo
 
         var state = _bestDataMap[danId].ClearState;
 
-        icon = state is DanClearState.NotClear ? notClearIcon : $"<image href='/images/dani_{state}.png' width='24' height='24' />";
+        icon = state is DanClearState.NotClear ? notClearIcon : $"<image href='/images/dani_{state}.webp' width='24' height='24' />";
 
         return icon;
     }

TaikoWebUI/Pages/HighScores.razor

@@ -152,12 +152,12 @@
                                                 <MudText>@context.BestScore</MudText>
                                             </MudTd>
                                             <MudTd>
-                                                <img src="@($"/images/crown_{context.BestCrown}.png")" alt="@(ScoreUtils.GetCrownText(context.BestCrown))" title="@(ScoreUtils.GetCrownText(context.BestCrown))" style="@Constants.ICON_STYLE" />
+                                                <img src="@($"/images/crown_{context.BestCrown}.webp")" alt="@(ScoreUtils.GetCrownText(context.BestCrown))" title="@(ScoreUtils.GetCrownText(context.BestCrown))" style="@Constants.ICON_STYLE" />
                                             </MudTd>
                                             <MudTd>
                                                 @if (context.BestScoreRank is not ScoreRank.None)
                                                 {
-                                                    <img src="@($"/images/rank_{context.BestScoreRank}.png")" alt="@(ScoreUtils.GetRankText(context.BestScoreRank))" title="@(ScoreUtils.GetRankText(context.BestScoreRank))" style="@Constants.ICON_STYLE" />
+                                                    <img src="@($"/images/rank_{context.BestScoreRank}.webp")" alt="@(ScoreUtils.GetRankText(context.BestScoreRank))" title="@(ScoreUtils.GetRankText(context.BestScoreRank))" style="@Constants.ICON_STYLE" />
                                                 }
                                             </MudTd>
                                             <MudTd>

TaikoWebUI/Pages/PlayHistory.razor

@@ -120,11 +120,11 @@
                                 </MudTd>
 
                                 <MudTd>@(songHistoryData.Score)</MudTd>
-                                <MudTd Style="text-align:center"><img src="@($"/images/crown_{songHistoryData.Crown}.png")" alt="@(GetCrownText(songHistoryData.Crown))" title="@(GetCrownText(songHistoryData.Crown))" style=@IconStyle /></MudTd>
+                                <MudTd Style="text-align:center"><img src="@($"/images/crown_{songHistoryData.Crown}.webp")" alt="@(GetCrownText(songHistoryData.Crown))" title="@(GetCrownText(songHistoryData.Crown))" style=@IconStyle /></MudTd>
                                 <MudTd Style="text-align:center">
                                     @if (songHistoryData.ScoreRank is not ScoreRank.None)
                                     {
-                                    <img src="@($"/images/rank_{songHistoryData.ScoreRank}.png")" alt="@(GetRankText(songHistoryData.ScoreRank))" title="@(GetRankText(songHistoryData.ScoreRank))" style=@IconStyle />
+                                    <img src="@($"/images/rank_{songHistoryData.ScoreRank}.webp")" alt="@(GetRankText(songHistoryData.ScoreRank))" title="@(GetRankText(songHistoryData.ScoreRank))" style=@IconStyle />
                                     }
                                 </MudTd>
                                 <MudTd>@(songHistoryData.GoodCount)</MudTd>

TaikoWebUI/Pages/PlayHistory.razor.cs

@@ -108,7 +108,7 @@ public partial class PlayHistory
 
     private static string GetDifficultyIcon(Difficulty difficulty)
     {
-        return $"<image href='/images/difficulty_{difficulty}.png' alt='{difficulty}' width='24' height='24'/>";
+        return $"<image href='/images/difficulty_{difficulty}.webp' alt='{difficulty}' width='24' height='24'/>";
     }
 
     private static string GetGenreTitle(SongGenre genre)

TaikoWebUI/Pages/Profile.razor

@@ -258,19 +258,19 @@
                                             {
                                                 <MudImage Fluid="true" style=@($"position: relative; top: 0; left: 0; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("masks/body-bodymask", response.Body, "masks/body-bodymask-0000") />
                                                 <MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/body-facemask", response.Body, "masks/body-facemask-0000") />
-                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/body/body-0000.png'" Src=@($"images/Costumes/body/body-{response.Body.ToString().PadLeft(4, '0')}.png") />
-                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/face/face-0000.png'" Src=@($"images/Costumes/face/face-{response.Face.ToString().PadLeft(4, '0')}.png") />
+                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/body/body-0000.webp'" Src=@($"images/Costumes/body/body-{response.Body.ToString().PadLeft(4, '0')}.webp") />
+                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/face/face-0000.webp'" Src=@($"images/Costumes/face/face-{response.Face.ToString().PadLeft(4, '0')}.webp") />
                                                 <MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("masks/head-bodymask", response.Head, "head/head-0000") />
                                                 <MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/head-facemask", response.Head, "head/head-0000") />
-                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/head/head-0000.png'" Src=@($"images/Costumes/head/head-{response.Head.ToString().PadLeft(4, '0')}.png") />
+                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/head/head-0000.webp'" Src=@($"images/Costumes/head/head-{response.Head.ToString().PadLeft(4, '0')}.webp") />
                                             }
                                             else
                                             {
                                                 <MudImage Fluid="true" style=@($"position: relative; top: 0; left: 0; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("masks/kigurumi-bodymask", response.Kigurumi, "masks/body-bodymask-0000") />
                                                 <MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/kigurumi-facemask", response.Kigurumi, "masks/body-facemask-0000") />
-                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/kigurumi/kigurumi-0000.png'" Src=@($"images/Costumes/kigurumi/kigurumi-{response.Kigurumi.ToString().PadLeft(4, '0')}.png") />
+                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/kigurumi/kigurumi-0000.webp'" Src=@($"images/Costumes/kigurumi/kigurumi-{response.Kigurumi.ToString().PadLeft(4, '0')}.webp") />
                                             }
-                                            <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/puchi/puchi-9999.webp'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.webp") />
+                                            <MudImage Fluid="true" Class="puchi-floating" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/puchi/puchi-9999.webp'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.webp") />
                                         </MudItem>
                                     </MudItem>
 
@@ -291,12 +291,12 @@
                                                 <MudText Id="nameplate-name" Style="position:absolute; height:100%; top: 0; left: 0; right: 0; margin: auto auto; font-family: 'Nijiiro', sans-serif; color:white">@response.MyDonName</MudText>
                                             </MudItem>
                                         </MudItem>
-                                        <MudImage onload="nameplateLoaded()" Id="nameplate" Fluid="true" Style="position: relative; bottom: 0; left: 0;" Src="images/Nameplates/nameplate.png" />
-                                        @* Check if image does not exist, use nameplate_Wood.png *@
-                                        <MudImage Fluid="true" Style="position:absolute; bottom: 6px; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Nameplates/nameplate_Wood.png'" Src=@($"images/Nameplates/nameplate_{TitlePlateStrings[response.TitlePlateId].Replace(' ', '_')}.png") />
+                                        <MudImage onload="nameplateLoaded()" Id="nameplate" Fluid="true" Style="position: relative; bottom: 0; left: 0;" Src="images/Nameplates/nameplate.webp" />
+                                        @* Check if image does not exist, use nameplate_Wood.webp *@
+                                        <MudImage Fluid="true" Style="position:absolute; bottom: 6px; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Nameplates/nameplate_Wood.webp'" Src=@($"images/Nameplates/nameplate_{TitlePlateStrings[response.TitlePlateId].Replace(' ', '_')}.webp") />
                                         @if (response.IsDisplayDanOnNamePlate)
                                         {
-                                            <MudImage Fluid="true" Style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" Src="images/Nameplates/nameplate_dan.png" />
+                                            <MudImage Fluid="true" Style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" Src="images/Nameplates/nameplate_dan.webp" />
                                         }
                                     </MudItem>
                                 </MudItem>
@@ -362,7 +362,7 @@
                                             </MudItem>
                                         </MudItem>
                                         @* Forbidden one-liner : Changes the AchievementDisplayDifficulty image asset. When "Difficulty.None" is selected, Defaults to highest difficulty the player currently has crowns / Ranks for. *@
-                                        <MudImage Fluid="true" style="position: relative; top: 0;" Src=@($"images/rank_panel_{DifficultySettingCourseStrings[response.AchievementDisplayDifficulty != Difficulty.None ? (int)response.AchievementDisplayDifficulty + 1 : (int)highestDifficulty + 1].Replace(' ', '_')}.png") />
+                                        <MudImage Fluid="true" style="position: relative; top: 0;" Src=@($"images/rank_panel_{DifficultySettingCourseStrings[response.AchievementDisplayDifficulty != Difficulty.None ? (int)response.AchievementDisplayDifficulty + 1 : (int)highestDifficulty + 1].Replace(' ', '_')}.webp") />
                                     </MudItem>
                                 </MudTabPanel>
                             }

TaikoWebUI/Pages/Profile.razor.cs

@@ -453,8 +453,8 @@ public partial class Profile
     {
         var path = "/images/Costumes/";
         var filename = file + "-" + id.ToString().PadLeft(4, '0');
-        var imagePath = path + filename + ".png";
-        var imageSrc = Masks.Contains(filename) ? imagePath : path + defaultfile + ".png";
+        var imagePath = path + filename + ".webp";
+        var imageSrc = Masks.Contains(filename) ? imagePath : path + defaultfile + ".webp";
         return imageSrc;
     }
 

TaikoWebUI/Utilities/ScoreUtils.cs

@@ -45,12 +45,12 @@ namespace TaikoWebUI.Utilities
 
         public static string GetDifficultyIconSvg(Difficulty difficulty)
         {
-            return $"<image href='/images/difficulty_{difficulty}.png' alt='{difficulty}' width='24' height='24'/>";
+            return $"<image href='/images/difficulty_{difficulty}.webp' alt='{difficulty}' width='24' height='24'/>";
         }
 
         public static string GetDifficultyIcon(Difficulty difficulty)
         {
-            return $"/images/difficulty_{difficulty}.png";
+            return $"/images/difficulty_{difficulty}.webp";
         }
 
         public static string GetGenreTitle(SongGenre genre)

TaikoWebUI/wwwroot/css/app.css

@@ -88,6 +88,21 @@
     content: "An error has occurred."
 }
 
+@keyframes puchi-floating-anim {
+    0% {
+        transform: translateY(0);
+    }
+
+    100% {
+        transform: translateY(-1.25rem);
+    }
+}
+
+.puchi-floating {
+    will-change: transform;
+    animation: puchi-floating-anim 0.8s ease-in-out alternate infinite;
+}
+
 .nameplateTextOutline {
     -webkit-text-stroke: 5px;
     -webkit-text-stroke-color: black