diff --git a/apps/public/public/screenshots/dashboard-dark.webp b/apps/public/public/screenshots/dashboard-dark.webp
new file mode 100644
index 00000000..694f2b99
Binary files /dev/null and b/apps/public/public/screenshots/dashboard-dark.webp differ
diff --git a/apps/public/public/screenshots/dashboard-light.webp b/apps/public/public/screenshots/dashboard-light.webp
new file mode 100644
index 00000000..6c822166
Binary files /dev/null and b/apps/public/public/screenshots/dashboard-light.webp differ
diff --git a/apps/public/public/screenshots/overview-dark.webp b/apps/public/public/screenshots/overview-dark.webp
new file mode 100644
index 00000000..ceb8675a
Binary files /dev/null and b/apps/public/public/screenshots/overview-dark.webp differ
diff --git a/apps/public/public/screenshots/overview-light.webp b/apps/public/public/screenshots/overview-light.webp
new file mode 100644
index 00000000..c65c94b1
Binary files /dev/null and b/apps/public/public/screenshots/overview-light.webp differ
diff --git a/apps/public/public/screenshots/profile-dark.webp b/apps/public/public/screenshots/profile-dark.webp
new file mode 100644
index 00000000..194405bd
Binary files /dev/null and b/apps/public/public/screenshots/profile-dark.webp differ
diff --git a/apps/public/public/screenshots/profile-light.webp b/apps/public/public/screenshots/profile-light.webp
new file mode 100644
index 00000000..c22ce390
Binary files /dev/null and b/apps/public/public/screenshots/profile-light.webp differ
diff --git a/apps/public/public/screenshots/realtime-dark.webp b/apps/public/public/screenshots/realtime-dark.webp
new file mode 100644
index 00000000..c4250667
Binary files /dev/null and b/apps/public/public/screenshots/realtime-dark.webp differ
diff --git a/apps/public/public/screenshots/realtime-light.webp b/apps/public/public/screenshots/realtime-light.webp
new file mode 100644
index 00000000..7d101e20
Binary files /dev/null and b/apps/public/public/screenshots/realtime-light.webp differ
diff --git a/apps/public/public/screenshots/report-dark.webp b/apps/public/public/screenshots/report-dark.webp
new file mode 100644
index 00000000..4f599263
Binary files /dev/null and b/apps/public/public/screenshots/report-dark.webp differ
diff --git a/apps/public/public/screenshots/report-light.webp b/apps/public/public/screenshots/report-light.webp
new file mode 100644
index 00000000..b2d55931
Binary files /dev/null and b/apps/public/public/screenshots/report-light.webp differ
diff --git a/apps/public/src/app/(content)/compare/[slug]/page.tsx b/apps/public/src/app/(content)/compare/[slug]/page.tsx
index 4650c763..3cc2e4d1 100644
--- a/apps/public/src/app/(content)/compare/[slug]/page.tsx
+++ b/apps/public/src/app/(content)/compare/[slug]/page.tsx
@@ -74,7 +74,7 @@ export default async function ComparePage({
       name: 'OpenPanel',
       logo: {
         '@type': 'ImageObject',
-        url: url('/logo.png'),
+        url: url('/logo.webp'),
       },
     },
   };
@@ -110,8 +110,8 @@ export default async function ComparePage({
 
       <div className="container my-16">
         <WindowImage
-          srcDark="/screenshots/overview-dark.png"
-          srcLight="/screenshots/overview-light.png"
+          srcDark="/screenshots/overview-dark.webp"
+          srcLight="/screenshots/overview-light.webp"
           alt="OpenPanel Dashboard Overview"
           caption="This is our web analytics dashboard, its an out-of-the-box experience so you can start understanding your traffic and engagement right away."
         />
@@ -126,8 +126,8 @@ export default async function ComparePage({
 
       <div className="container my-16">
         <WindowImage
-          srcDark="/screenshots/dashboard-dark.png"
-          srcLight="/screenshots/dashboard-light.png"
+          srcDark="/screenshots/dashboard-dark.webp"
+          srcLight="/screenshots/dashboard-light.webp"
           alt="OpenPanel Dashboard"
           caption="Comprehensive analytics dashboard with real-time insights and customizable views."
         />
@@ -146,8 +146,8 @@ export default async function ComparePage({
 
       <div className="container my-16">
         <WindowImage
-          srcDark="/screenshots/realtime-dark.png"
-          srcLight="/screenshots/realtime-light.png"
+          srcDark="/screenshots/realtime-dark.webp"
+          srcLight="/screenshots/realtime-light.webp"
           alt="OpenPanel Real-time Analytics"
           caption="Track events in real-time as they happen with instant updates and live monitoring."
         />
@@ -181,8 +181,8 @@ export default async function ComparePage({
 
       <div className="container my-16">
         <WindowImage
-          srcDark="/screenshots/report-dark.png"
-          srcLight="/screenshots/report-light.png"
+          srcDark="/screenshots/report-dark.webp"
+          srcLight="/screenshots/report-light.webp"
           alt="OpenPanel Reports"
           caption="Generate detailed reports and insights with customizable metrics and visualizations."
         />
@@ -202,8 +202,8 @@ export default async function ComparePage({
 
       <div className="container my-16">
         <WindowImage
-          srcDark="/screenshots/profile-dark.png"
-          srcLight="/screenshots/profile-light.png"
+          srcDark="/screenshots/profile-dark.webp"
+          srcLight="/screenshots/profile-light.webp"
           alt="OpenPanel User Profiles"
           caption="Deep dive into individual user profiles with complete event history and behavior tracking."
         />