Added images sizes

components/Food/FoodCard.vue

@@ -37,6 +37,8 @@ const { createdBy, assignedToGroup } = await useFood(props.food);
     >
       <NuxtLink :to="'/food/' + food.id">
         <NuxtImg
+          format="webp"
+          sizes="100vw sm:50vw md:400px"
           :src="food.image ? food.image : `/pizza.jpeg`"
           class="h-full w-full object-cover object-center sm:h-full sm:w-full"
         />

package.json

@@ -17,13 +17,13 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.22",
     "@heroicons/vue": "^2.1.5",
-    "@nuxt/eslint": "^0.5.1",
-    "@nuxt/image": "^1.7.0",
+    "@nuxt/eslint": "^0.5.3",
+    "@nuxt/image": "^1.7.1",
     "@nuxt/ui": "^2.18.4",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "nuxt": "^3.12.4",
+    "@tailwindcss/typography": "^0.5.14",
+    "nuxt": "^3.13.0",
     "nuxt-twemoji": "^3.6.1",
     "vue": "latest",
     "vue3-carousel-nuxt": "^1.1.2",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.24",
     "@nuxtjs/tailwindcss": "^6.12.1",
-    "@openapitools/openapi-generator-cli": "^2.13.4",
+    "@openapitools/openapi-generator-cli": "^2.13.5",
     "@types/js-cookie": "^3.0.6",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.27.0",