chore: optimised lcp for add-network

app/[locale]/learn/wallets/add-network/[slug]/page.tsx

@@ -77,7 +77,7 @@ const AddNewChainPage: NextPage<Props> = async ({ params }) => {
           <div className="flex flex-col sm:flex-row gap-x-4 max-sm:max-w-sm">
             <p>
               <Image
-                src="/assets/images/learn/wallets/add-network/metamask-add-network-1.png"
+                src="/assets/images/learn/wallets/add-network/metamask-add-network-1.webp"
                 alt="MetaMask Add Network 1"
                 width={712}
                 height={784}
@@ -88,7 +88,7 @@ const AddNewChainPage: NextPage<Props> = async ({ params }) => {
             </p>
             <p>
               <Image
-                src="/assets/images/learn/wallets/add-network/metamask-add-network-2.png"
+                src="/assets/images/learn/wallets/add-network/metamask-add-network-2.webp"
                 alt="MetaMask Add Network 2"
                 width={712}
                 height={784}

app/[locale]/og.jpg/learn/[category]/route.tsx

@@ -25,7 +25,7 @@ export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
 
   const title = t(`learn.sections.${params.category}.title`);
-  const background = loadDataUrl(`public/assets/images/learn/${params.category}/cover.jpg`, 'image/jpeg');
+  const background = loadDataUrl(`public/assets/images/learn/${params.category}/cover.webp`, 'image/webp');
 
   return generateOgImage({ title, background });
 }

app/[locale]/og.jpg/learn/wallets/add-network/[slug]/route.tsx

@@ -26,7 +26,7 @@ export async function GET(req: Request, { params }: Props) {
 
   const chainName = getChainName(getChainIdFromSlug(params.slug));
   const title = t('learn.add_network.title', { chainName });
-  const background = loadDataUrl('public/assets/images/learn/wallets/add-network/cover.jpg', 'image/jpeg');
+  const background = loadDataUrl('public/assets/images/learn/wallets/add-network/cover.webp', 'image/webp');
 
   return generateOgImage({ title, background });
 }

app/[locale]/og.jpg/learn/wallets/add-network/route.tsx

@@ -22,7 +22,7 @@ export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
 
   const title = t('learn.add_network.sidebar_title');
-  const background = loadDataUrl('public/assets/images/learn/wallets/add-network/cover.jpg', 'image/jpeg');
+  const background = loadDataUrl('public/assets/images/learn/wallets/add-network/cover.webp', 'image/webp');
 
   return generateOgImage({ title, background });
 }

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.