Using <NuxtImg> everywhere :)

frontend/components/LaneFilter.vue

@@ -39,7 +39,8 @@ function handleHover(laneImg: Ref<string>, index: number) {
 
 <template>
 <div style="width: fit-content;">
-    <img v-for="(laneImg, index) in laneImgs" 
+    <NuxtImg v-for="(laneImg, index) in laneImgs"
+    format="webp"
     :alt="POSITIONS_STR[index]"
     class="lane-img" :src="laneImg.value" 
     @mouseout="handleMouseOut(laneImg, index)"

frontend/components/Logo.vue

@@ -8,7 +8,10 @@ defineProps<{
 <template>
     <div style="width: fit-content; max-width: 100%; overflow: hidden;">
     <NuxtLink style="display: flex; width: fit-content; text-decoration: none;" to="/">
-    <img id="logo-img" alt="BuildPath" :width="imgWidth == null ? '120' : Number(imgWidth)" src="/buildpath-high-resolution-logo-transparent.png" />
+    <NuxtImg id="logo-img" alt="BuildPath" 
+    format="webp"
+    :width="imgWidth == null ? '120' : Number(imgWidth)" 
+    src="/buildpath-high-resolution-logo-transparent.png" />
     <h1 :style="'font-size: ' + (fontSize == null ? '5.0rem' : fontSize) + ';'" id="logo-text">BuildPath</h1>
     </NuxtLink>
     </div>

frontend/components/item/Tree.vue

@@ -95,7 +95,9 @@ function handleRefresh() {
     <div style="display: flex; align-items: center;">
         
         <div v-if="tree.data != undefined && tree.data != null" style="width: fit-content; height: fit-content;">
-        <img ref="start" class="item-img" width="64" height="64" :alt="tree.data.toString()" :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)" />
+        <NuxtImg ref="start" class="item-img" width="64" height="64" 
+            :alt="tree.data.toString()" 
+            :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)" />
         <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%</h3>
         </div>
 

frontend/components/nav/BottomBar.vue

@@ -23,11 +23,13 @@ function handleStateChange(newState : string, newLane: number) {
     <div class="navbar-container">
         
         <NuxtLink style="display: flex; width: fit-content; text-decoration: none; align-items: center; margin-left: 10px;" to="/">
-        <img id="navbar-logo-img" src="/buildpath-high-resolution-logo-transparent.png" />
+        <NuxtImg format="webp" id="navbar-logo-img" 
+            src="/buildpath-high-resolution-logo-transparent.png" />
         </NuxtLink>
 
         <div v-for="(lane, i) in championLanes" style="display: flex; align-items: center; margin-left: 20px;">
-            <img width="40" height="40" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
+            <NuxtImg format="webp" width="40" height="40" 
+                :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
             <div>
             <h2 :class="'navbar-link ' + (state == 'runes' && laneState == i ? 'navbar-link-selected' : '')"
                 @click="handleStateChange('runes', i)" >

frontend/components/nav/SideBar.vue

@@ -34,7 +34,9 @@ const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetc
 
         <div style="display: flex; align-items: center; margin-top: 30px; padding-right: 10px; overflow: hidden;">
         <h1 style="font-size: 2.4rem; padding-left: 20px;">{{ championName }}</h1>
-        <img style="margin-left: 10px;" width="40" height="40" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
+        <NuxtImg format="webp" style="margin-left: 10px;" 
+            width="40" height="40" 
+            :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
         <h2 v-if="championName != null && championName != undefined && championName.length < 8" 
             style="margin-left: 5px; font-size: 1.8rem; font-weight: 200;">
             {{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}

frontend/components/nav/TierlistList.vue

@@ -14,7 +14,9 @@ if(route.path.startsWith("/tierlist/")) {
     <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
         <div :class="selected == pos ? 'sidebar-link-selected' : ''" 
             class="sidebar-link" style="padding-left: 35px; display: flex; align-items: center;">
-            <img width="40" height="40" :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
+            <NuxtImg format="webp" 
+                width="40" height="40" 
+                :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
             <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
         </div>
     </NuxtLink>

frontend/pages/tierlist/[lane].vue

@@ -68,7 +68,9 @@ tiers.push({title: "F", data: tierFromScaledPickrate(0, 0.1)})
 
         <div style="margin-left: 0px; margin-top: 20px; display: flex; margin-bottom: 30px; align-items: center">
             <h1 style="margin-left: 10px; font-size: 45px; font-weight: 300;">Tierlist for</h1>
-            <img style="margin-left: 10px;" width="50" height="50" :src="LANE_IMAGES[lanePositionToIndex(lane)]" />
+            <NuxtImg format="webp" style="margin-left: 10px;" 
+                width="50" height="50" 
+                :src="LANE_IMAGES[lanePositionToIndex(lane)]" />
             <h1 style="margin-left: 10px; font-size: 45px; font-weight: 300;">{{ POSITIONS_STR[lanePositionToIndex(lane)] }}</h1>
         </div>