diff --git a/app/components/Image.tsx b/app/components/Image.tsx
new file mode 100644
index 000000000..8243c5f8c
--- /dev/null
+++ b/app/components/Image.tsx
@@ -0,0 +1,32 @@
+export function Image({
+  path,
+  alt,
+  className,
+  width,
+  height,
+}: {
+  path: string;
+  alt: string;
+  className: string;
+  width?: number;
+  height?: number;
+}) {
+  return (
+    <picture>
+      <source
+        type="image/avif"
+        srcSet={`${path}.avif`}
+        className={className}
+        width={width}
+        height={height}
+      />
+      <img
+        alt={alt}
+        src={`${path}.png`}
+        className={className}
+        width={width}
+        height={height}
+      />
+    </picture>
+  );
+}
diff --git a/app/components/layout/Menu.tsx b/app/components/layout/Menu.tsx
index 908a62201..f31015814 100644
--- a/app/components/layout/Menu.tsx
+++ b/app/components/layout/Menu.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { Link } from "@remix-run/react";
 import navItems from "./nav-items.json";
+import { Image } from "../Image";
 
 // xxx: overflows but maybe on chrome mobile emulator only?
 export function Menu({
@@ -25,9 +26,9 @@ export function Menu({
             data-cy={`menu-link-${navItem.name}`}
             tabIndex={!expanded ? -1 : undefined}
           >
-            <img
+            <Image
               className="layout__menu__link__icon"
-              src={`/img/layout/${navItem.name.replace(" ", "")}.webp`}
+              path={`/img/layout/${navItem.name.replace(" ", "")}`}
               alt={navItem.name}
             />
             <div>{navItem.displayName ?? navItem.name}</div>
diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index b5160b878..66d821da5 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -4,6 +4,7 @@ import { Menu } from "./Menu";
 import { UserItem } from "./UserItem";
 import navItems from "./nav-items.json";
 import { useLocation } from "@remix-run/react";
+import { Image } from "../Image";
 
 export const Layout = React.memo(function Layout({
   children,
@@ -22,13 +23,11 @@ export const Layout = React.memo(function Layout({
       <header className="layout__header">
         {currentPagesNavItem ? (
           <h1 className="layout__page-heading">
-            <img
+            <Image
               className="layout__icon"
-              // xxx: from constant... but this will be a component anyway?
-              // xxx: change to avif
-              src={`/img/layout/${currentPagesNavItem.name}.webp`}
-              width="40"
-              height="40"
+              path={`/img/layout/${currentPagesNavItem.name}`}
+              width={40}
+              height={40}
               alt=""
             />
             {currentPagesNavItem.displayName}
diff --git a/public/img/layout/analyzer.webp b/public/img/layout/analyzer.webp
deleted file mode 100644
index 05a7537b0..000000000
Binary files a/public/img/layout/analyzer.webp and /dev/null differ
diff --git a/public/img/layout/badges.avif b/public/img/layout/badges.avif
new file mode 100644
index 000000000..ccabd4494
Binary files /dev/null and b/public/img/layout/badges.avif differ
diff --git a/public/img/layout/badges.png b/public/img/layout/badges.png
new file mode 100644
index 000000000..63b4216d8
Binary files /dev/null and b/public/img/layout/badges.png differ
diff --git a/public/img/layout/badges.webp b/public/img/layout/badges.webp
deleted file mode 100644
index eb97fce6d..000000000
Binary files a/public/img/layout/badges.webp and /dev/null differ
diff --git a/public/img/layout/builds.webp b/public/img/layout/builds.webp
deleted file mode 100644
index 56e6c0f7c..000000000
Binary files a/public/img/layout/builds.webp and /dev/null differ
diff --git a/public/img/layout/calendar.webp b/public/img/layout/calendar.webp
deleted file mode 100644
index d3f006806..000000000
Binary files a/public/img/layout/calendar.webp and /dev/null differ
diff --git a/public/img/layout/gear.webp b/public/img/layout/gear.webp
deleted file mode 100644
index 9f7241ab2..000000000
Binary files a/public/img/layout/gear.webp and /dev/null differ
diff --git a/public/img/layout/leaderboards-xp.webp b/public/img/layout/leaderboards-xp.webp
deleted file mode 100644
index 7d756662d..000000000
Binary files a/public/img/layout/leaderboards-xp.webp and /dev/null differ
diff --git a/public/img/layout/leaderboards.webp b/public/img/layout/leaderboards.webp
deleted file mode 100644
index bf39f869f..000000000
Binary files a/public/img/layout/leaderboards.webp and /dev/null differ
diff --git a/public/img/layout/links.webp b/public/img/layout/links.webp
deleted file mode 100644
index e750055e3..000000000
Binary files a/public/img/layout/links.webp and /dev/null differ
diff --git a/public/img/layout/logo.webp b/public/img/layout/logo.webp
deleted file mode 100644
index f4581d5b3..000000000
Binary files a/public/img/layout/logo.webp and /dev/null differ
diff --git a/public/img/layout/maps.webp b/public/img/layout/maps.webp
deleted file mode 100644
index 42ef69e77..000000000
Binary files a/public/img/layout/maps.webp and /dev/null differ
diff --git a/public/img/layout/new_boy_bg.png b/public/img/layout/new_boy_bg.png
deleted file mode 100644
index d2af69ff5..000000000
Binary files a/public/img/layout/new_boy_bg.png and /dev/null differ
diff --git a/public/img/layout/new_boy_dark.png b/public/img/layout/new_boy_dark.png
deleted file mode 100644
index bb09ddd57..000000000
Binary files a/public/img/layout/new_boy_dark.png and /dev/null differ
diff --git a/public/img/layout/new_girl_bg.png b/public/img/layout/new_girl_bg.png
deleted file mode 100644
index a6fac5a6a..000000000
Binary files a/public/img/layout/new_girl_bg.png and /dev/null differ
diff --git a/public/img/layout/new_girl_dark.png b/public/img/layout/new_girl_dark.png
deleted file mode 100644
index 25686b0f0..000000000
Binary files a/public/img/layout/new_girl_dark.png and /dev/null differ
diff --git a/public/img/layout/planner.webp b/public/img/layout/planner.webp
deleted file mode 100644
index a720899cb..000000000
Binary files a/public/img/layout/planner.webp and /dev/null differ
diff --git a/public/img/layout/plus.avif b/public/img/layout/plus.avif
new file mode 100644
index 000000000..2b763af5d
Binary files /dev/null and b/public/img/layout/plus.avif differ
diff --git a/public/img/layout/plus.png b/public/img/layout/plus.png
new file mode 100644
index 000000000..c06a8f209
Binary files /dev/null and b/public/img/layout/plus.png differ
diff --git a/public/img/layout/plus.webp b/public/img/layout/plus.webp
deleted file mode 100644
index c2dea7e44..000000000
Binary files a/public/img/layout/plus.webp and /dev/null differ
diff --git a/public/img/layout/rotations.webp b/public/img/layout/rotations.webp
deleted file mode 100644
index df7772446..000000000
Binary files a/public/img/layout/rotations.webp and /dev/null differ
diff --git a/public/img/layout/sendouq.webp b/public/img/layout/sendouq.webp
deleted file mode 100644
index 36386e79f..000000000
Binary files a/public/img/layout/sendouq.webp and /dev/null differ
diff --git a/public/img/layout/top500.webp b/public/img/layout/top500.webp
deleted file mode 100644
index 57229c92d..000000000
Binary files a/public/img/layout/top500.webp and /dev/null differ
diff --git a/public/img/layout/u.webp b/public/img/layout/u.webp
deleted file mode 100644
index 4fc54ceb6..000000000
Binary files a/public/img/layout/u.webp and /dev/null differ
diff --git a/public/img/layout/xtrends.webp b/public/img/layout/xtrends.webp
deleted file mode 100644
index 23b3328a7..000000000
Binary files a/public/img/layout/xtrends.webp and /dev/null differ