Refactored for WEBP images

src/components/ceCard.astro

@@ -7,7 +7,7 @@ export interface Props {
 
 const {mlb, link, name } = Astro.props;
 
-const ce_img: string = `ce/${link}.png`;
+const ce_img: string = `ce/${link}.webp`;
 let mlb_image: string = "mlbalign";
 
 if(mlb === "false") {
@@ -21,7 +21,7 @@ if(mlb === "false") {
         <img class="ce-crop" src={ce_img} alt={name}>
     </div>
     <div class={mlb_image}>
-        <img class="mlb" src="ce/mlb.png" alt="Max-limit broken"/>
+        <img class="mlb" src="ce/mlb.webp" alt="Max-limit broken"/>
     </div>
 </article>
 

src/components/servantCard.astro

@@ -12,8 +12,8 @@ export interface Props {
 
 const {bond10, ml, image_bond, image_servant, np, skills, level, name } = Astro.props;
 
-const servant_img: string = `servant/${image_servant}.png`;
+const servant_img: string = `servant/${image_servant}.webp`;
-const bondce_img: string = `ce/bond-ce/${image_bond}.png`
+const bondce_img: string = `ce/bond-ce/${image_bond}.webp`
 let bondce_css: string = "bond-ce";
 
 if(bond10 === "false") {

src/components/taCard.astro

@@ -7,7 +7,7 @@ export interface Props {
 
 const { image, link, title } = Astro.props;
 
-const icon: string = `background: url('ta_icons/${image}.png')`
+const icon: string = `background: url('ta_icons/${image}.webp')`
 ---
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
     <article>