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

@@ -54,7 +54,7 @@ const fighter2Country = countries.find((c) => c.id === fighter2?.country)
 
       <!-- Versus Letra o Imagen -->
       <img
-        src="/images/versus.png"
+        src="/images/versus.webp"
         class="animate-slide-out-bottom absolute top-1/2 left-1/2 z-20 size-24 -translate-x-1/2 -translate-y-1/2 transform delay-1000 md:size-50"
         alt="Imagen de Versus"
       />

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

@@ -59,7 +59,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={`Nombre de ${fighter.name} en texto decorativo`}
           class="animate-scale-in absolute bottom-6 lg:bottom-34 h-10 lg:h-16 w-auto "
           transition:name={`text-${id}`}
@@ -77,7 +77,7 @@ const opponent = FIGHTERS.find((f) => f.id === fighter.versus)
         {
           opponent && (
             <div class="flex w-full items-center justify-center gap-4">
-              <img alt={`Enfrentamiento entre ${fighter.name} y ${opponent?.name ?? 'su oponente'}`} src="/images/versus.png" class="h-12 w-auto" />
+              <img alt={`Enfrentamiento entre ${fighter.name} y ${opponent?.name ?? 'su oponente'}`} src="/images/versus.webp" class="h-12 w-auto" />
               <BoxerCard
                 id={opponent.id}
                 versus={fighter.id}

src/sections/Hero.astro

@@ -35,7 +35,7 @@ const reverseDelaySecondRow = [...animationDelaySecondRow].reverse()
       <figure class="animate-fade-in relative">
         <img
           class="relative z-20 h-auto w-64 sm:w-72 md:w-80 lg:w-96"
-          src="/images/logo.png"
+          src="/images/logo.webp"
           fetchpriority="high"
           alt="La Velada del Año V"
           decoding="async"