use webp on blog/learn/explore

app/(pages)/blog/[slug]/page.tsx

@@ -86,7 +86,7 @@ async function BlogPostPage({ params }: BlogPostPageProps) {
 
   const ctaData = { ctaTitle, ctaDescription, ctaUrl }
 
-  const headerImageUrl = `/images/blog/${slug}.png`
+  const headerImageUrl = `/images/blog/${slug}.webp`
 
   return (
     <>

app/(pages)/learn/[slug]/page.tsx

@@ -88,7 +88,7 @@ async function LearnPostPage({ params }: LearnPostPageProps) {
   } = learnPost
 
   const ctaData = { ctaTitle, ctaDescription, ctaUrl }
-  const headerImageUrl = `/images/learn/${slug}.png`
+  const headerImageUrl = `/images/learn/${slug}.webp`
 
   return (
     <>

app/components/blog/PostCard.tsx

@@ -16,8 +16,8 @@ const PostCard = ({
   const { author, createdAt, postDescription, postTitle, slug } = blogPost
   const customImagePath =
     type === 'blog'
-      ? `/images/blog/${slug}-small.png`
-      : `/images/learn/${slug}-small.png`
+      ? `/images/blog/${slug}-small.webp`
+      : `/images/learn/${slug}-small.webp`
   return (
     <div
       className="col-span-4 sm:col-span-2 lg:col-span-1 border border-th-bkg-3 rounded-xl group relative"

app/components/explore/Category.tsx

@@ -29,7 +29,7 @@ const Category = ({
     return sortTokens(tokensForCategory)
   }, [tokensForCategory])
 
-  const backgroundImageUrl = `/images/categories/${slug}.png`
+  const backgroundImageUrl = `/images/categories/${slug}.webp`
 
   return (
     <>

app/components/explore/ExploreCategories.tsx

@@ -84,7 +84,7 @@ const ExploreCategories = ({
                   <Link href={`/explore/categories/${slug}`}>
                     <div className="overflow-hidden rounded-t-xl">
                       <CardImage
-                        customImagePath={`/images/categories/${slug}-small.png`}
+                        customImagePath={`/images/categories/${slug}-small.webp`}
                       />
                     </div>
                     <div className="px-4 py-3">

app/components/explore/PageHeader.tsx

@@ -24,8 +24,8 @@ const PageHeader = ({
   const imageSrc = backgroundImageUrl
     ? backgroundImageUrl
     : theme === 'Dark'
-      ? '/images/new/cube-bg.png'
-      : '/images/new/cube-bg-light.png'
+      ? '/images/new/cube-bg.webp'
+      : '/images/new/cube-bg-light.webp'
 
   useEffect(() => {
     setMounted(true)