image optimization

components/CategoryCard.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { Category } from "~/types/category";
-
-defineProps<{
-  category: Category;
-}>();
-</script>
-
-<template>
-  <nuxt-link
-    :to="`/category/${category.name}`"
-    class="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
-  >
-    <img
-      :src="category.picture"
-      :alt="category.name"
-      class="mb-4 h-48 w-full object-cover rounded"
-    />
-    <h5
-      class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
-    >
-      {{ category.name }}
-    </h5>
-    <p class="font-normal text-gray-700 dark:text-gray-400">
-      {{ category.description }}
-    </p>
-  </nuxt-link>
-</template>

components/app/navbar.vue

@@ -66,7 +66,7 @@ if (route.path === "/search") {
         </ul>
       </div>
       <nuxt-link to="/" class="btn btn-ghost text-xl">
-        <NuxtImg src="/logo192.png" width="50" />
+        <nuxt-img src="/logo192.png" width="50" />
         <span style="font-family: cursive"> Chefs </span>
       </nuxt-link>
     </div>

components/recipe/card.vue

@@ -12,7 +12,12 @@ defineProps<{
   <div class="card-body items-center text-center bg-base-200">
     <h2 class="card-title">{{ title }}</h2>
     <figure class="px-10 py-5">
-      <nuxt-img :src="pictureUrl" alt="Recipe picture" />
+      <nuxt-img
+        :src="pictureUrl"
+        alt="`${title} picture`"
+        :placeholder="[300]"
+        format="webp"
+      />
     </figure>
     <div class="card-actions space-between">
       <nuxt-link :to="videoUrl" target="_blank">

pages/categories/[name].vue

@@ -60,7 +60,12 @@ useSeoMeta({
           class="card bg-base-100 shadow-xl"
         >
           <figure>
-            <img :src="recipe.pictureUrl" :alt="recipe.title" />
+            <nuxt-img
+              :src="recipe.pictureUrl"
+              :alt="recipe.title"
+              :placeholder="[300]"
+              format="webp"
+            />
           </figure>
           <div class="card-body">
             <h2 class="card-title">{{ recipe.title }}</h2>

pages/categories/index.vue

@@ -38,7 +38,13 @@ useSeoMeta({
         class="card bg-base-100 shadow-xl h-[28rem] sm:h-[32rem] md:h-[36rem] lg:h-[32rem]"
       >
         <figure>
-          <img :src="category.picture" :alt="category.name" />
+          <nuxt-img
+            :src="category.picture"
+            :alt="category.name"
+            :placeholder="[160, 100]"
+            format="webp"
+            loading="lazy"
+          />
         </figure>
         <div class="card-body">
           <h2 class="card-title">{{ category.name }}</h2>

pages/index.vue

@@ -33,6 +33,8 @@ useSeoMeta({
       <nuxt-img
         src="/chef.svg"
         class="max-w-sm h-[80vh] object-contain rounded-lg"
+        :placeholder="[400, 800]"
+        format="webp"
       />
       <div class="flex flex-col justify-center">
         <h1 class="text-5xl font-bold prose">Eat Something New</h1>

pages/search.vue

@@ -43,7 +43,14 @@ watch(searchQuery, async (newQuery) => {
         :key="recipe.id"
         class="card bg-base-100 shadow-xl"
       >
-        <figure><img :src="recipe.pictureUrl" :alt="recipe.title" /></figure>
+        <figure>
+          <nuxt-img
+            :src="recipe.pictureUrl"
+            :alt="recipe.title"
+            format="webp"
+            loading="lazy"
+          />
+        </figure>
         <div class="card-body">
           <h2 class="card-title">{{ recipe.title }}</h2>
           <p>{{ recipe.category }} • {{ recipe.origin }}</p>