diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ad66c08cd1..6e810b5670 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1788,6 +1788,9 @@ importers:
 
   website:
     dependencies:
+      '@unpic/vue':
+        specifier: ^1.0.0
+        version: 1.0.0(typescript@5.8.3)
       posthog-js:
         specifier: ^1.236.4
         version: 1.236.4
@@ -7412,6 +7415,12 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@unpic/core@1.0.3':
+    resolution: {integrity: sha512-aum9YNVUGso7MjGLD0Rp/08kywCGLqZ03/q6VQBFFakDBOXWEc8D4kPGcZ8v5wEnGRex3lE+++bOuucBp3KJ/w==}
+
+  '@unpic/vue@1.0.0':
+    resolution: {integrity: sha512-vLilucD5RPzYusHPxGRL6uKw3ysPz5pMuhfYSc4GACyVp2SSh80yHyjQUaGveSbAlcjSLaXT8CvHWAwjWbSx7Q==}
+
   '@urql/core@5.2.0':
     resolution: {integrity: sha512-/n0ieD0mvvDnVAXEQgX/7qJiVcvYvNkOHeBvkwtylfjydar123caCXcl58PXFY11oU1oquJocVXHxLAbtv4x1A==}
 
@@ -7493,15 +7502,27 @@ packages:
   '@vue/compiler-core@3.5.12':
     resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
 
+  '@vue/compiler-core@3.5.26':
+    resolution: {integrity: sha512-vXyI5GMfuoBCnv5ucIT7jhHKl55Y477yxP6fc4eUswjP8FG3FFVFd41eNDArR+Uk3QKn2Z85NavjaxLxOC19/w==}
+
   '@vue/compiler-dom@3.5.12':
     resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
 
+  '@vue/compiler-dom@3.5.26':
+    resolution: {integrity: sha512-y1Tcd3eXs834QjswshSilCBnKGeQjQXB6PqFn/1nxcQw4pmG42G8lwz+FZPAZAby6gZeHSt/8LMPfZ4Rb+Bd/A==}
+
   '@vue/compiler-sfc@3.5.12':
     resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
 
+  '@vue/compiler-sfc@3.5.26':
+    resolution: {integrity: sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==}
+
   '@vue/compiler-ssr@3.5.12':
     resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
 
+  '@vue/compiler-ssr@3.5.26':
+    resolution: {integrity: sha512-lZT9/Y0nSIRUPVvapFJEVDbEXruZh2IYHMk2zTtEgJSlP5gVOqeWXH54xDKAaFS4rTnDeDBQUYDtxKyoW9FwDw==}
+
   '@vue/devtools-api@7.6.3':
     resolution: {integrity: sha512-H2TRzFA9hNezdtM6I0y3RCMhIg5T3gib/p9qI2IAS8gB9tvkAv4JZHAZZl5BZHhO7btuHkvHzU5qpO/vdsjYMg==}
 
@@ -7514,20 +7535,37 @@ packages:
   '@vue/reactivity@3.5.12':
     resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
 
+  '@vue/reactivity@3.5.26':
+    resolution: {integrity: sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==}
+
   '@vue/runtime-core@3.5.12':
     resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
 
+  '@vue/runtime-core@3.5.26':
+    resolution: {integrity: sha512-xJWM9KH1kd201w5DvMDOwDHYhrdPTrAatn56oB/LRG4plEQeZRQLw0Bpwih9KYoqmzaxF0OKSn6swzYi84e1/Q==}
+
   '@vue/runtime-dom@3.5.12':
     resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
 
+  '@vue/runtime-dom@3.5.26':
+    resolution: {integrity: sha512-XLLd/+4sPC2ZkN/6+V4O4gjJu6kSDbHAChvsyWgm1oGbdSO3efvGYnm25yCjtFm/K7rrSDvSfPDgN1pHgS4VNQ==}
+
   '@vue/server-renderer@3.5.12':
     resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
     peerDependencies:
       vue: 3.5.12
 
+  '@vue/server-renderer@3.5.26':
+    resolution: {integrity: sha512-TYKLXmrwWKSodyVuO1WAubucd+1XlLg4set0YoV+Hu8Lo79mp/YMwWV5mC5FgtsDxX3qo1ONrxFaTP1OQgy1uA==}
+    peerDependencies:
+      vue: 3.5.26
+
   '@vue/shared@3.5.12':
     resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 
+  '@vue/shared@3.5.26':
+    resolution: {integrity: sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A==}
+
   '@vueuse/core@11.2.0':
     resolution: {integrity: sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==}
 
@@ -9046,6 +9084,10 @@ packages:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
+  entities@7.0.0:
+    resolution: {integrity: sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==}
+    engines: {node: '>=0.12'}
+
   env-editor@0.4.2:
     resolution: {integrity: sha512-ObFo8v4rQJAE59M69QzwloxPZtd33TpYEIjtKD1rrFDcM1Gd7IkDxEBU+HriziN6HSHQnBJi8Dmy+JWkav5HKA==}
     engines: {node: '>=8'}
@@ -11762,6 +11804,7 @@ packages:
   next@14.2.17:
     resolution: {integrity: sha512-hNo/Zy701DDO3nzKkPmsLRlDfNCtb1OJxFUvjGEl04u7SFa3zwC6hqsOUzMajcaEOEV8ey1GjvByvrg0Qr5AiQ==}
     engines: {node: '>=18.17.0'}
+    deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -14391,6 +14434,9 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unpic@4.2.2:
+    resolution: {integrity: sha512-z6T2ScMgRV2y2H8MwwhY5xHZWXhUx/YxtOCGJwfURSl7ypVy4HpLIMWoIZKnnxQa/RKzM0kg8hUh0paIrpLfvw==}
+
   unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -14845,6 +14891,14 @@ packages:
       typescript:
         optional: true
 
+  vue@3.5.26:
+    resolution: {integrity: sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -22020,6 +22074,17 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@unpic/core@1.0.3':
+    dependencies:
+      unpic: 4.2.2
+
+  '@unpic/vue@1.0.0(typescript@5.8.3)':
+    dependencies:
+      '@unpic/core': 1.0.3
+      vue: 3.5.26(typescript@5.8.3)
+    transitivePeerDependencies:
+      - typescript
+
   '@urql/core@5.2.0':
     dependencies:
       '@0no-co/graphql.web': 1.1.2
@@ -22239,11 +22304,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.26':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/shared': 3.5.26
+      entities: 7.0.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-dom@3.5.12':
     dependencies:
       '@vue/compiler-core': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/compiler-dom@3.5.26':
+    dependencies:
+      '@vue/compiler-core': 3.5.26
+      '@vue/shared': 3.5.26
+
   '@vue/compiler-sfc@3.5.12':
     dependencies:
       '@babel/parser': 7.28.4
@@ -22256,11 +22334,28 @@ snapshots:
       postcss: 8.5.6
       source-map-js: 1.2.1
 
+  '@vue/compiler-sfc@3.5.26':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/compiler-core': 3.5.26
+      '@vue/compiler-dom': 3.5.26
+      '@vue/compiler-ssr': 3.5.26
+      '@vue/shared': 3.5.26
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
   '@vue/compiler-ssr@3.5.12':
     dependencies:
       '@vue/compiler-dom': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/compiler-ssr@3.5.26':
+    dependencies:
+      '@vue/compiler-dom': 3.5.26
+      '@vue/shared': 3.5.26
+
   '@vue/devtools-api@7.6.3':
     dependencies:
       '@vue/devtools-kit': 7.6.3
@@ -22283,11 +22378,20 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.12
 
+  '@vue/reactivity@3.5.26':
+    dependencies:
+      '@vue/shared': 3.5.26
+
   '@vue/runtime-core@3.5.12':
     dependencies:
       '@vue/reactivity': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/runtime-core@3.5.26':
+    dependencies:
+      '@vue/reactivity': 3.5.26
+      '@vue/shared': 3.5.26
+
   '@vue/runtime-dom@3.5.12':
     dependencies:
       '@vue/reactivity': 3.5.12
@@ -22295,14 +22399,29 @@ snapshots:
       '@vue/shared': 3.5.12
       csstype: 3.1.3
 
+  '@vue/runtime-dom@3.5.26':
+    dependencies:
+      '@vue/reactivity': 3.5.26
+      '@vue/runtime-core': 3.5.26
+      '@vue/shared': 3.5.26
+      csstype: 3.2.3
+
   '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.8.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.12
       '@vue/shared': 3.5.12
       vue: 3.5.12(typescript@5.8.3)
 
+  '@vue/server-renderer@3.5.26(vue@3.5.26(typescript@5.8.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.26
+      '@vue/shared': 3.5.26
+      vue: 3.5.26(typescript@5.8.3)
+
   '@vue/shared@3.5.12': {}
 
+  '@vue/shared@3.5.26': {}
+
   '@vueuse/core@11.2.0(vue@3.5.12(typescript@5.8.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -23758,6 +23877,8 @@ snapshots:
 
   entities@6.0.1: {}
 
+  entities@7.0.0: {}
+
   env-editor@0.4.2: {}
 
   env-paths@3.0.0: {}
@@ -30439,6 +30560,8 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unpic@4.2.2: {}
+
   unpipe@1.0.0: {}
 
   unplugin@2.3.5:
@@ -30920,6 +31043,16 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
+  vue@3.5.26(typescript@5.8.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.26
+      '@vue/compiler-sfc': 3.5.26
+      '@vue/runtime-dom': 3.5.26
+      '@vue/server-renderer': 3.5.26(vue@3.5.26(typescript@5.8.3))
+      '@vue/shared': 3.5.26
+    optionalDependencies:
+      typescript: 5.8.3
+
   w3c-keyname@2.2.8: {}
 
   w3c-xmlserializer@5.0.0:
diff --git a/website/blog.md b/website/blog.md
index 07da0456ea..f9680120cc 100644
--- a/website/blog.md
+++ b/website/blog.md
@@ -9,6 +9,7 @@ sidebar: false
 
 <script setup>
 import { onMounted } from 'vue'
+import { Image } from '@unpic/vue'
 
 import { data as posts } from './data/posts.data.ts'
 
@@ -112,7 +113,14 @@ onMounted(async () => {
   <div class="container">
     <main>
       <div class="header">
-        <img src="/img/blog/electric-elephant.jpg" />
+        <Image
+          src="/img/blog/electric-elephant.jpg"
+          :width="720"
+          :height="720"
+          layout="constrained"
+          background="auto"
+          fallback="netlify"
+        />
         <h1>
           ElectricSQL Blog
         </h1>
diff --git a/website/package.json b/website/package.json
index 0335a00f00..78c6758a12 100644
--- a/website/package.json
+++ b/website/package.json
@@ -24,6 +24,7 @@
     "yaml": "^2.5.0"
   },
   "dependencies": {
+    "@unpic/vue": "^1.0.0",
     "posthog-js": "^1.236.4"
   }
 }
diff --git a/website/src/components/BlogPostHeader.vue b/website/src/components/BlogPostHeader.vue
index e255707c3d..400d4ff7c0 100644
--- a/website/src/components/BlogPostHeader.vue
+++ b/website/src/components/BlogPostHeader.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { useData } from 'vitepress'
 import { computed } from 'vue'
+import { Image } from '@unpic/vue'
 
 import { data as authors } from '../../data/authors.data.ts'
-import { getNetlifyImageUrl } from '../utils/netlify-images.ts'
 
 const { page, frontmatter } = useData()
 
@@ -22,31 +22,6 @@ const formattedDate = computed(() => {
     timeZone: 'UTC',
   })
 })
-
-const optimizedImageSrcset = computed(() => {
-  if (!frontmatter.value.image) return { src: '', srcset: '' }
-
-  const img1x = getNetlifyImageUrl(frontmatter.value.image, {
-    width: 1530,
-    height: 874,
-    fit: 'cover',
-    format: 'jpg',
-    quality: 80,
-  })
-
-  const img2x = getNetlifyImageUrl(frontmatter.value.image, {
-    width: 1530 * 2,
-    height: 874 * 2,
-    fit: 'cover',
-    format: 'jpg',
-    quality: 80,
-  })
-
-  return {
-    src: img1x,
-    srcset: `${img1x} 1x, ${img2x} 2x`,
-  }
-})
 </script>
 
 <style scoped>
@@ -101,9 +76,13 @@ h1 {
 <template>
   <div class="post-header">
     <p class="post-image">
-      <img
-        :src="optimizedImageSrcset.src"
-        :srcset="optimizedImageSrcset.srcset"
+      <Image
+        :src="frontmatter.image"
+        :width="1530"
+        :height="874"
+        layout="constrained"
+        background="auto"
+        fallback="netlify"
       />
     </p>
     <h1>
diff --git a/website/src/components/BlogPostListing.vue b/website/src/components/BlogPostListing.vue
index 7bf94ab4da..632bf471b3 100644
--- a/website/src/components/BlogPostListing.vue
+++ b/website/src/components/BlogPostListing.vue
@@ -1,34 +1,8 @@
 <script setup>
-import { computed } from 'vue'
+import { Image } from '@unpic/vue'
 import { data as authors } from '../../data/authors.data.ts'
-import { getNetlifyImageUrl } from '../utils/netlify-images.ts'
 
 const { post } = defineProps(['post'])
-
-const optimizedImageSrcset = computed(() => {
-  if (!post.image) return { src: '', srcset: '' }
-
-  const img1x = getNetlifyImageUrl(post.image, {
-    width: 896,
-    height: 428,
-    fit: 'cover',
-    format: 'jpg',
-    quality: 80,
-  })
-
-  const img2x = getNetlifyImageUrl(post.image, {
-    width: 896 * 2,
-    height: 428 * 2,
-    fit: 'cover',
-    format: 'jpg',
-    quality: 80,
-  })
-
-  return {
-    src: img1x,
-    srcset: `${img1x} 1x, ${img2x} 2x`,
-  }
-})
 </script>
 
 <style scoped>
@@ -117,11 +91,13 @@ const optimizedImageSrcset = computed(() => {
   <div class="post">
     <a :href="post.path" class="no-visual">
       <div class="post-image">
-        <img
-          :src="optimizedImageSrcset.src"
-          :srcset="optimizedImageSrcset.srcset"
-          width="896"
-          height="428"
+        <Image
+          :src="post.image"
+          :width="896"
+          :height="428"
+          layout="constrained"
+          background="auto"
+          fallback="netlify"
         />
       </div>
       <div class="post-body">
diff --git a/website/src/utils/netlify-images.ts b/website/src/utils/netlify-images.ts
deleted file mode 100644
index 2be193b38f..0000000000
--- a/website/src/utils/netlify-images.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Generate optimized image URL using Netlify Image CDN
- * @param imagePath - The path to the image (can be relative or absolute URL)
- * @param options - Image optimization options
- * @returns Netlify CDN URL with optimization parameters
- */
-export function getNetlifyImageUrl(
-  imagePath: string,
-  options: {
-    width?: number
-    height?: number
-    fit?: `contain` | `cover` | `fill` | `inside` | `outside`
-    format?: `jpg` | `png` | `webp` | `avif`
-    quality?: number
-  } = {}
-): string {
-  const { width, height, fit = `cover`, format = `jpg`, quality = 80 } = options
-
-  // Get current origin (works in browser and SSR)
-  // In SSR: use Netlify's DEPLOY_PRIME_URL or fallback to production
-  // In browser: use current window location
-  const origin =
-    typeof window !== `undefined`
-      ? window.location.origin
-      : import.meta.env?.DEPLOY_PRIME_URL || `https://electric-sql.com`
-
-  // Convert relative paths to absolute URLs using current origin
-  const fullImageUrl = imagePath.startsWith(`http`)
-    ? imagePath
-    : `${origin}${imagePath}`
-
-  // Build Netlify Image CDN URL with query parameters using current origin
-  const params = new URLSearchParams({
-    url: fullImageUrl,
-    fit,
-    fm: format,
-    q: quality.toString(),
-  })
-
-  if (width) params.set(`w`, width.toString())
-  if (height) params.set(`h`, height.toString())
-
-  return `${origin}/.netlify/images?${params.toString()}`
-}