Add image placeholders to prevent layout shift

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>

website/package.json

@@ -24,6 +24,7 @@
     "yaml": "^2.5.0"
   },
   "dependencies": {
+    "@unpic/vue": "^1.0.0",
     "posthog-js": "^1.236.4"
   }
 }

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>