diff --git a/app/routes/badges.tsx b/app/routes/badges.tsx
index a222d00b9..36db01501 100644
--- a/app/routes/badges.tsx
+++ b/app/routes/badges.tsx
@@ -5,6 +5,7 @@ import { db } from "~/db";
 import type { All } from "~/db/models/badges.server";
 import styles from "~/styles/badges.css";
 import { jsonCached } from "~/utils/remix";
+import { badgeUrl } from "~/utils/urls";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -35,8 +36,7 @@ export default function BadgesPageLayout() {
             .map((badge) => (
               <Link key={badge.id} to={String(badge.id)}>
                 <img
-                  // xxx: from constants
-                  src={`/gif/badges/${badge.code}.gif`}
+                  src={badgeUrl({ code: badge.code, extension: "gif" })}
                   alt={badge.displayName}
                   title={badge.displayName}
                   width="64"
diff --git a/app/routes/badges/$id.tsx b/app/routes/badges/$id.tsx
index 11034ee94..c1a52090a 100644
--- a/app/routes/badges/$id.tsx
+++ b/app/routes/badges/$id.tsx
@@ -7,7 +7,7 @@ import type { OwnersByBadge } from "~/db/models/badges.server";
 import type { Badge } from "~/db/types";
 import { jsonCached } from "~/utils/remix";
 import { discordFullName } from "~/utils/strings";
-import { BADGES_PAGE } from "~/utils/urls";
+import { BADGES_PAGE, badgeUrl } from "~/utils/urls";
 import type { BadgesLoaderData } from "../badges";
 
 export interface BadgeDetailsLoaderData {
@@ -38,7 +38,7 @@ export default function BadgeDetailsPage() {
   return (
     <div className="stack md items-center">
       <img
-        src={`/gif/badges/${badge.code}.gif`}
+        src={badgeUrl({ code: badge.code, extension: "gif" })}
         alt={badge.displayName}
         title={badge.displayName}
         width="200"
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index 342530d12..29cd05078 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -1,3 +1,5 @@
+import type { Badge } from "~/db/types";
+
 export const SENDOU_INK_DISCORD_URL = "https://discord.gg/sendou";
 export const SENDOU_INK_TWITTER_URL = "https://twitter.com/sendouink";
 export const SENDOU_INK_PATREON_URL = "https://patreon.com/sendou";
@@ -13,3 +15,11 @@ export const STOP_IMPERSONATING_URL = "/auth/impersonate/stop";
 export const userPage = (discordId: string) => `/u/${discordId}`;
 export const impersonateUrl = (idToLogInAs: number) =>
   `/auth/impersonate?id=${idToLogInAs}`;
+
+export const badgeUrl = ({
+  code,
+  extension,
+}: {
+  code: Badge["code"];
+  extension: "gif" | "avif" | "png";
+}) => `/badges/${code}.${extension}`;
diff --git a/public/gif/badges/20xx.gif b/public/badges/20xx.gif
similarity index 100%
rename from public/gif/badges/20xx.gif
rename to public/badges/20xx.gif
diff --git a/public/gif/badges/beta_top1.gif b/public/badges/beta_top1.gif
similarity index 100%
rename from public/gif/badges/beta_top1.gif
rename to public/badges/beta_top1.gif
diff --git a/public/gif/badges/beta_top2.gif b/public/badges/beta_top2.gif
similarity index 100%
rename from public/gif/badges/beta_top2.gif
rename to public/badges/beta_top2.gif
diff --git a/public/gif/badges/beta_top3.gif b/public/badges/beta_top3.gif
similarity index 100%
rename from public/gif/badges/beta_top3.gif
rename to public/badges/beta_top3.gif
diff --git a/public/gif/badges/cake.gif b/public/badges/cake.gif
similarity index 100%
rename from public/gif/badges/cake.gif
rename to public/badges/cake.gif
diff --git a/public/gif/badges/ebtv.gif b/public/badges/ebtv.gif
similarity index 100%
rename from public/gif/badges/ebtv.gif
rename to public/badges/ebtv.gif
diff --git a/public/gif/badges/girls.gif b/public/badges/girls.gif
similarity index 100%
rename from public/gif/badges/girls.gif
rename to public/badges/girls.gif
diff --git a/public/gif/badges/idtga.gif b/public/badges/idtga.gif
similarity index 100%
rename from public/gif/badges/idtga.gif
rename to public/badges/idtga.gif
diff --git a/public/gif/badges/itz_blue.gif b/public/badges/itz_blue.gif
similarity index 100%
rename from public/gif/badges/itz_blue.gif
rename to public/badges/itz_blue.gif
diff --git a/public/gif/badges/itz_orange.gif b/public/badges/itz_orange.gif
similarity index 100%
rename from public/gif/badges/itz_orange.gif
rename to public/badges/itz_orange.gif
diff --git a/public/gif/badges/itz_pink.gif b/public/badges/itz_pink.gif
similarity index 100%
rename from public/gif/badges/itz_pink.gif
rename to public/badges/itz_pink.gif
diff --git a/public/gif/badges/itz_red.gif b/public/badges/itz_red.gif
similarity index 100%
rename from public/gif/badges/itz_red.gif
rename to public/badges/itz_red.gif
diff --git a/public/gif/badges/lobster.gif b/public/badges/lobster.gif
similarity index 100%
rename from public/gif/badges/lobster.gif
rename to public/badges/lobster.gif
diff --git a/public/gif/badges/lutiblue.gif b/public/badges/lutiblue.gif
similarity index 100%
rename from public/gif/badges/lutiblue.gif
rename to public/badges/lutiblue.gif
diff --git a/public/gif/badges/lutigreen.gif b/public/badges/lutigreen.gif
similarity index 100%
rename from public/gif/badges/lutigreen.gif
rename to public/badges/lutigreen.gif
diff --git a/public/gif/badges/lutilimegreen.gif b/public/badges/lutilimegreen.gif
similarity index 100%
rename from public/gif/badges/lutilimegreen.gif
rename to public/badges/lutilimegreen.gif
diff --git a/public/gif/badges/lutiorange.gif b/public/badges/lutiorange.gif
similarity index 100%
rename from public/gif/badges/lutiorange.gif
rename to public/badges/lutiorange.gif
diff --git a/public/gif/badges/lutipink.gif b/public/badges/lutipink.gif
similarity index 100%
rename from public/gif/badges/lutipink.gif
rename to public/badges/lutipink.gif
diff --git a/public/gif/badges/lutipurple.gif b/public/badges/lutipurple.gif
similarity index 100%
rename from public/gif/badges/lutipurple.gif
rename to public/badges/lutipurple.gif
diff --git a/public/gif/badges/lutired.gif b/public/badges/lutired.gif
similarity index 100%
rename from public/gif/badges/lutired.gif
rename to public/badges/lutired.gif
diff --git a/public/gif/badges/lutitan.gif b/public/badges/lutitan.gif
similarity index 100%
rename from public/gif/badges/lutitan.gif
rename to public/badges/lutitan.gif
diff --git a/public/gif/badges/lutiyellow.gif b/public/badges/lutiyellow.gif
similarity index 100%
rename from public/gif/badges/lutiyellow.gif
rename to public/badges/lutiyellow.gif
diff --git a/public/gif/badges/monday.gif b/public/badges/monday.gif
similarity index 100%
rename from public/gif/badges/monday.gif
rename to public/badges/monday.gif
diff --git a/public/gif/badges/pair.gif b/public/badges/pair.gif
similarity index 100%
rename from public/gif/badges/pair.gif
rename to public/badges/pair.gif
diff --git a/public/gif/badges/patreon.gif b/public/badges/patreon.gif
similarity index 100%
rename from public/gif/badges/patreon.gif
rename to public/badges/patreon.gif
diff --git a/public/gif/badges/patreonplus.gif b/public/badges/patreonplus.gif
similarity index 100%
rename from public/gif/badges/patreonplus.gif
rename to public/badges/patreonplus.gif
diff --git a/public/gif/badges/pool1.gif b/public/badges/pool1.gif
similarity index 100%
rename from public/gif/badges/pool1.gif
rename to public/badges/pool1.gif
diff --git a/public/gif/badges/pool2.gif b/public/badges/pool2.gif
similarity index 100%
rename from public/gif/badges/pool2.gif
rename to public/badges/pool2.gif
diff --git a/public/gif/badges/quad.gif b/public/badges/quad.gif
similarity index 100%
rename from public/gif/badges/quad.gif
rename to public/badges/quad.gif
diff --git a/public/gif/badges/snapshot_bronze.gif b/public/badges/snapshot_bronze.gif
similarity index 100%
rename from public/gif/badges/snapshot_bronze.gif
rename to public/badges/snapshot_bronze.gif
diff --git a/public/gif/badges/snapshot_gold.gif b/public/badges/snapshot_gold.gif
similarity index 100%
rename from public/gif/badges/snapshot_gold.gif
rename to public/badges/snapshot_gold.gif
diff --git a/public/gif/badges/snapshot_silver.gif b/public/badges/snapshot_silver.gif
similarity index 100%
rename from public/gif/badges/snapshot_silver.gif
rename to public/badges/snapshot_silver.gif
diff --git a/public/gif/badges/squid_junction.gif b/public/badges/squid_junction.gif
similarity index 100%
rename from public/gif/badges/squid_junction.gif
rename to public/badges/squid_junction.gif
diff --git a/public/gif/badges/sundae.gif b/public/badges/sundae.gif
similarity index 100%
rename from public/gif/badges/sundae.gif
rename to public/badges/sundae.gif
diff --git a/public/gif/badges/superjump_alpha.gif b/public/badges/superjump_alpha.gif
similarity index 100%
rename from public/gif/badges/superjump_alpha.gif
rename to public/badges/superjump_alpha.gif
diff --git a/public/gif/badges/superjump_beta.gif b/public/badges/superjump_beta.gif
similarity index 100%
rename from public/gif/badges/superjump_beta.gif
rename to public/badges/superjump_beta.gif
diff --git a/public/gif/badges/superjump_gamma.gif b/public/badges/superjump_gamma.gif
similarity index 100%
rename from public/gif/badges/superjump_gamma.gif
rename to public/badges/superjump_gamma.gif
diff --git a/public/gif/badges/tidal_tuesdays.gif b/public/badges/tidal_tuesdays.gif
similarity index 100%
rename from public/gif/badges/tidal_tuesdays.gif
rename to public/badges/tidal_tuesdays.gif
diff --git a/public/gif/badges/toni_kensa.gif b/public/badges/toni_kensa.gif
similarity index 100%
rename from public/gif/badges/toni_kensa.gif
rename to public/badges/toni_kensa.gif
diff --git a/public/gif/badges/triton.gif b/public/badges/triton.gif
similarity index 100%
rename from public/gif/badges/triton.gif
rename to public/badges/triton.gif
diff --git a/public/gif/badges/xp26.gif b/public/badges/xp26.gif
similarity index 100%
rename from public/gif/badges/xp26.gif
rename to public/badges/xp26.gif
diff --git a/public/gif/badges/xp27.gif b/public/badges/xp27.gif
similarity index 100%
rename from public/gif/badges/xp27.gif
rename to public/badges/xp27.gif
diff --git a/public/gif/badges/xp28.gif b/public/badges/xp28.gif
similarity index 100%
rename from public/gif/badges/xp28.gif
rename to public/badges/xp28.gif
diff --git a/public/gif/badges/xp29.gif b/public/badges/xp29.gif
similarity index 100%
rename from public/gif/badges/xp29.gif
rename to public/badges/xp29.gif
diff --git a/public/gif/badges/xp30.gif b/public/badges/xp30.gif
similarity index 100%
rename from public/gif/badges/xp30.gif
rename to public/badges/xp30.gif
diff --git a/public/gif/badges/zones.gif b/public/badges/zones.gif
similarity index 100%
rename from public/gif/badges/zones.gif
rename to public/badges/zones.gif