add explicit image dimensions

components/app/navbar.vue

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

components/recipe/card.vue

@@ -16,6 +16,8 @@ defineProps<{
         :src="pictureUrl"
         alt="`${title} picture`"
         :placeholder="[300]"
+        width="300"
+        height="300"
         format="webp"
       />
     </figure>

pages/categories/[name].vue

@@ -35,7 +35,7 @@ useSeoMeta({
       class="hero h-[40vh] bg-cover bg-center relative"
       :style="`background-image: url(${category!.picture})`"
     >
-      <div class="hero-overlay bg-opacity-60"></div>
+      <div class="hero-overlay bg-opacity-60" />
       <div class="hero-content text-center text-neutral-content">
         <h1 class="text-5xl font-bold">{{ category?.name || categoryName }}</h1>
       </div>
@@ -64,6 +64,8 @@ useSeoMeta({
               :src="recipe.pictureUrl"
               :alt="recipe.title"
               :placeholder="[300]"
+              height="300"
+              width="300"
               format="webp"
             />
           </figure>

pages/categories/index.vue

@@ -42,6 +42,8 @@ useSeoMeta({
             :src="category.picture"
             :alt="category.name"
             :placeholder="[160, 100]"
+            height="100"
+            width="160"
             format="webp"
             loading="lazy"
           />

pages/index.vue

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

pages/search.vue

@@ -49,6 +49,9 @@ watch(searchQuery, async (newQuery) => {
             :alt="recipe.title"
             format="webp"
             loading="lazy"
+            :placeholder="[350]"
+            height="350"
+            width="350"
           />
         </figure>
         <div class="card-body">