replace png with webp where applicable

src/routes/+layout.svelte

@@ -12,37 +12,37 @@
 	let navPaths = $state([
 		{
 			name: 'Startseite',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-home.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-home.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/`,
 			active: false
 		},
 		{
 			name: 'Registrieren',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-register.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-register.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/register`,
 			active: false
 		},
 		{
 			name: 'Regeln',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-rules.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-rules.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/rules`,
 			active: false
 		},
 		{
 			name: 'FAQ',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-faq.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-faq.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/faq`,
 			active: false
 		},
 		{
 			name: 'Feedback & Kontakt',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-feedback.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-feedback.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/feedback`,
 			active: false
 		},
 		{
 			name: 'Team',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-team.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-team.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/team`,
 			active: false
 		}
@@ -93,7 +93,7 @@
 	{#if !onAdminPage}
 		<meta property="og:url" content={$page.url.toString()} />
 		<meta property="og:type" content="website" />
-		<meta property="og:image" content="{env.PUBLIC_BASE_PATH}/img/logo-512.png" />
+		<meta property="og:image" content="{env.PUBLIC_BASE_PATH}/img/logo-512.webp" />
 	{/if}
 </svelte:head>
 
@@ -128,13 +128,13 @@
 		>
 			<img
 				class="absolute w-full h-full p-1 pixelated"
-				src="{env.PUBLIC_BASE_PATH}/img/menu-button.png"
+				src="{env.PUBLIC_BASE_PATH}/img/menu-button.webp"
 				alt="menu"
 			/>
 			<img
 				class="opacity-0 transition-opacity delay-50 group-hover/menu-button:opacity-100 absolute w-full h-full p-[3px] pixelated"
 				class:opacity-100={isTouch && showMenuPermanent}
-				src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
+				src="{env.PUBLIC_BASE_PATH}/img/selected-frame.webp"
 				alt="menu hover"
 			/>
 		</button>
@@ -158,7 +158,7 @@
 							onclick={() => goto(navPath.href)}
 						>
 							<div
-								style="background-image: url('{env.PUBLIC_BASE_PATH}/img/menu-inventory-bar.png'); background-position: -{i *
+								style="background-image: url('{env.PUBLIC_BASE_PATH}/img/menu-inventory-bar.webp'); background-position: -{i *
 									3.5}rem 0;"
 								class="block w-full h-full bg-no-repeat bg-horizontal-sprite pixelated"
 							></div>
@@ -168,7 +168,7 @@
 							<img
 								class="transition-opacity delay-50 group-hover/menu-item:opacity-100 absolute w-full h-full pixelated scale-110 z-10"
 								class:opacity-0={!navPath.active}
-								src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
+								src="{env.PUBLIC_BASE_PATH}/img/selected-frame.webp"
 								alt="menu hover"
 							/>
 						</a>