.avif tournament logos

app/features/calendar/routes/calendar.tsx

@@ -12,7 +12,6 @@ import { Flipped, Flipper } from "react-flip-toolkit";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { Alert } from "~/components/Alert";
-import { Avatar } from "~/components/Avatar";
 import { LinkButton } from "~/components/Button";
 import { Divider } from "~/components/Divider";
 import { Main } from "~/components/Main";
@@ -45,6 +44,7 @@ import { actualNumber } from "~/utils/zod";
 import * as CalendarRepository from "../CalendarRepository.server";
 import { canAddNewEvent } from "../calendar-utils";
 import { Tags } from "../components/Tags";
+import { Image } from "~/components/Image";
 
 import "~/styles/calendar.css";
 
@@ -416,11 +416,13 @@ function EventsList({
                       <div className="stack xs">
                         <div className="stack horizontal sm-plus items-center">
                           {calendarEvent.tournamentId ? (
-                            <Avatar
-                              size="sm"
-                              url={HACKY_resolvePicture({
+                            <Image
+                              path={HACKY_resolvePicture({
                                 name: calendarEvent.name,
                               })}
+                              alt=""
+                              size={40}
+                              className="rounded-full"
                             />
                           ) : null}
                           <div>

app/features/front-page/routes/index.tsx

@@ -171,7 +171,12 @@ function TournamentCard({
       }}
     >
       <div className="stack horizontal justify-between items-center">
-        <Avatar url={HACKY_resolvePicture(tournament)} size="xxs" />
+        <Image
+          path={HACKY_resolvePicture(tournament)}
+          size={24}
+          className="rounded-full"
+          alt=""
+        />
         <div
           className={clsx("front__tournament-card__time", {
             invisible: !isMounted,

app/features/tournament/routes/to.$id.register.tsx

@@ -269,12 +269,11 @@ export default function TournamentRegisterPage() {
   return (
     <div className="stack lg">
       <div className="tournament__logo-container">
-        <img
-          src={tournament.logoSrc}
+        <Image
+          path={tournament.logoSrc}
           alt=""
           className="tournament__logo"
-          width={124}
-          height={124}
+          size={124}
         />
         <div>
           <div className="tournament__title">{tournament.ctx.name}</div>

app/utils/urls.ts

@@ -370,7 +370,7 @@ export const preferenceEmojiUrl = (preference?: Preference) => {
   return `/static-assets/img/emoji/${emoji}.svg`;
 };
 export const tournamentLogoUrl = (identifier: string) =>
-  `/static-assets/img/tournament-logos/${identifier}.png`;
+  `/static-assets/img/tournament-logos/${identifier}`;
 export const TIER_PLUS_URL = `/static-assets/img/tiers/plus`;
 
 export const winnersImageUrl = ({