diff --git a/docs/.vitepress/theme/components/VPBanner.vue b/docs/.vitepress/theme/components/VPBanner.vue
new file mode 100644
index 00000000000000..fd40c8364cbc2d
--- /dev/null
+++ b/docs/.vitepress/theme/components/VPBanner.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="marketing-layout">
+    <div class="top-banner">
+      <a href="https://viteconf.org" class="group" target="_blank" rel="noopener">
+        <picture>
+          <source srcset="/banner-optimized.avif" type="image/avif">
+          <source srcset="/banner-optimized.webp" type="image/webp">
+          <img 
+            src="/banner-original.png" 
+            alt="ViteConf Banner" 
+            class="absolute"
+            width="1200"
+            height="400"
+            loading="eager"
+            fetchpriority="high"
+            decoding="async"
+          />
+        </picture>
+      </a>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
new file mode 100644
index 00000000000000..55a3aaec639018
--- /dev/null
+++ b/docs/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
+
+export default defineConfig({
+  plugins: [
+    ViteImageOptimizer({
+      test: /\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i,
+      exclude: undefined,
+      include: undefined,
+      includePublic: true,
+      logStats: true,
+      ansiColors: true,
+      svg: { multipass: true },
+      png: { quality: 80 },
+      webp: { lossy: true, quality: 80 },
+      avif: { lossy: true, quality: 70 },
+    }),
+  ],
+});
\ No newline at end of file