src/components/BadgeTemplates.astro

@@ -1,13 +1,14 @@
 ---
-import NormalBadgeTemplate from '@assets/badges/normal.svg';
-import RainbowBadgeTemplate from '@assets/badges/rainbow.svg';
-import TransBadgeTemplate from '@assets/badges/trans.svg';
+import { Image } from 'astro:assets';
+import NormalBadgeTemplate from '@assets/badges/normal.webp';
+import RainbowBadgeTemplate from '@assets/badges/rainbow.webp';
+import TransBadgeTemplate from '@assets/badges/trans.webp';
 ---
 
 <div class="badge-row">
-    <NormalBadgeTemplate class="badge" />
-    <RainbowBadgeTemplate class="badge" />
-    <TransBadgeTemplate class="badge" />
+    <Image class="badge" src={NormalBadgeTemplate} alt="NormalBadgeTemplate" />
+    <Image class="badge" src={RainbowBadgeTemplate} alt="RainbowBadgeTemplate" />
+    <Image class="badge" src={TransBadgeTemplate} alt="TransBadgeTemplate" />
 </div>
 
 <style>
@@ -19,6 +20,7 @@ import TransBadgeTemplate from '@assets/badges/trans.svg';
 
     .badge {
         margin-top: 0;
+        min-width: 0;
         width: clamp(180px, 24vw, 240px);
         height: auto;
     }