Feature: use webp instead of png in website

src/components/BoxerCardCss.astro

@@ -111,7 +111,7 @@ const boxerCardVariants: Record<Fighters['id'], string[]> = {
         // Events
         'group-hover/boxer-card:scale-110 group-focus/boxer-card:scale-110 group-focus-visible/boxer-card:scale-110',
       ]}
-      src={`/images/fighters/cards/${id}.png`}
+      src={`/images/fighters/cards/${id}.webp`}
       alt={`Tarjeta del boxeador ${name}`}
     />
 

src/components/FighterSelector.astro

@@ -13,7 +13,7 @@ const { id, name, boxerCardClass, versus } = Astro.props;
     <div class='relative top-96 mx-auto h-[4.5rem] flex w-full items-center justify-center z-1 animate-zoom-in'>
       <img
         data-id={`hero-text-${id}`}
-        src={`/images/fighters/text/${id}.png`}
+        src={`/images/fighters/text/${id}.webp`}
         alt={name}
         decoding='async'
         class='w-auto h-full absolute mask-fade-text'

src/components/HeroCss.astro

@@ -10,7 +10,7 @@ const secondRow = FIGHTERS.slice(6)
 
 <section class="relative flex min-h-screen w-full">
   <div
-    class="mask-fade-bottom absolute inset-0 w-full bg-[url('/images/hero.png')] bg-cover bg-center"
+    class="mask-fade-bottom absolute inset-0 w-full bg-[url('/images/hero.webp')] bg-cover bg-center"
   >
   </div>
 
@@ -31,7 +31,7 @@ const secondRow = FIGHTERS.slice(6)
       <figure class="animate-fade-in relative mt-8">
         <img
           class="relative z-20 h-auto w-64"
-          src="/images/logo.png"
+          src="/images/logo.webp"
           fetchpriority="high"
           alt="La Velada del Año V"
           decoding="async"

src/pages/combates/[id].astro

@@ -42,7 +42,7 @@ const fighter2Country = countries.find(c => c.id === fighter2?.country)
       </div>
 
       <!-- Versus Letra o Imagen -->
-      <img src="/images/versus.png" class="size-24 md:size-50 z-20 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-slide-out-bottom delay-1000" alt="Imagen de Versus">
+      <img src="/images/versus.webp" class="size-24 md:size-50 z-20 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-slide-out-bottom delay-1000" alt="Imagen de Versus">
 
       <!-- Segundo Combatiente -->
       <div class="relative w-1/2 h-auto bg-gradient-to-b from-black/50  to-pink-900/50 custom-clip animate-crash overflow-hidden hover:scale-105 transition-transform duration-200">

src/pages/combates/index.astro

@@ -59,7 +59,7 @@ import { combates } from '@/consts/pageTitles'
                     alt=""
                   />
                   <img
-                    src={`/images/fighters/text/${fighters[1]}.png`}
+                    src={`/images/fighters/text/${fighters[1]}.webp`}
                     loading="lazy"
                     decoding="async"
                     class="w-3/4"

src/pages/luchador/[id].astro

@@ -30,7 +30,7 @@ const opponent = FIGHTERS.find((f) => f.id === fighter.versus)
       {
         opponent && (
           <div class="flex w-full items-center gap-4 justify-center">
-            <img src="/images/versus.png" alt="Versus" class="h-12 w-auto" />
+            <img src="/images/versus.webp" alt="Versus" class="h-12 w-auto" />
             <BoxerCard id={opponent.id} name={opponent.name} class="group-hover:scale-110" />
           </div>
         )
@@ -55,7 +55,7 @@ const opponent = FIGHTERS.find((f) => f.id === fighter.versus)
           transition:name={`image-${id}`}
         />
         <img
-          src={`/images/fighters/text/${id}.png`}
+          src={`/images/fighters/text/${id}.webp`}
           alt={fighter.name}
           class="animate-scale-in absolute bottom-24 h-16 w-auto"
           transition:name={`text-${id}`}