Add image placeholders and preload main image

KristofVDB1 · Nov 29, 2023 · ecd8875 · ecd8875
1 parent ea80863
commit ecd8875
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/components/c-header/c-header.vue b/components/c-header/c-header.vue
@@ -19,6 +19,9 @@
     <div class="header__image-container" v-if="image">
       <div class="header__image-container__wrapper">
         <NuxtImg
+          preload
+          format="webp"
+          placeholder
           class="header__image-container__wrapper__image"
           src="/images/image.jpeg"
           :width="image?.width ?? 700"

diff --git a/components/card/card.vue b/components/card/card.vue
@@ -2,6 +2,8 @@
   <a :href="link?.href" class="card">
     <div class="card__image-container">
       <NuxtImg
+        format="webp"
+        placeholder
         class="card__image-container__image"
         src="/images/image.jpeg"
         width="350"

diff --git a/components/image-gallery/image-gallery.vue b/components/image-gallery/image-gallery.vue
@@ -5,7 +5,12 @@
     :items-to-show="1.9"
   >
     <custom-slide v-for="(image, index) in images" :key="index">
-      <NuxtImg class="image-gallery__image" :src="image?.src" />
+      <NuxtImg
+        class="image-gallery__image"
+        :src="image?.src"
+        format="webp"
+        placeholder
+      />
     </custom-slide>
 
     <template #addons>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -27,6 +27,9 @@ export default defineNuxtConfig({
   carousel: {
     prefix: 'custom',
   },
+  image: {
+    format: ['webp']
+  },
   content: {
     documentDriven: true,
     highlight: {