Use nuxt-img in home page to see performance

.github/workflows/deploy-frontend-dev.yml

@@ -1,12 +1,9 @@
 name: DeployFrontendServerlessDev
 
 on:
-  workflow_run:
-    workflows: ["DeployBackendDev"]
-    types:
-      - completed
+  push:
     branches:
-      - "master"
+      - "use-nuxt-image-to-show-images"
 
 jobs:
   deploy-frontend-dev:

nuxt-frontend/components/home-new/BlogSection.vue

@@ -162,12 +162,17 @@
           </nuxt-link>
         </div>
       </div>
-      <img
+      <nuxt-img
+        src="/blog/bg/bg2400.svg"
+        class="absolute top-0 -right-5 sm:right-0 h-full z-[-1]"
+        alt="blog-background-image"
+      />
+      <!-- <img
         class="absolute top-0 -right-5 sm:right-0 h-full z-[-1]"
         :src="bg"
         :srcset="`${bg} 400w, ${bg400} 800w, ${bg2400} 1200w`"
         alt="blog-background-image"
-      />
+      /> -->
     </div>
   </section>
 </template>
@@ -192,7 +197,7 @@ const resources = computed(() => store.items);
 const status = computed(() => store.status);
 
 await useAsyncData("blogs", () =>
-  store.loadResources(config.SHOW_DRAFT_POSTS, false, 0, 3),
+  store.loadResources(config.SHOW_DRAFT_POSTS, false, 0, 3)
 );
 
 if (status.value === config.SUCCESS) {

nuxt-frontend/components/home-new/ClientReviewSection.vue

@@ -37,10 +37,15 @@
                     REVIEWED ON
                   </span>
 
-                  <img
+                  <!-- <img
                     :src="reviewImage"
                     class="mr-2 w-[5.0625rem] h-[1.4375rem]"
                     alt="reviewClutchImage"
+                  /> -->
+                  <nuxt-img
+                    src="/clients/v3-client/ReviewImage.webp"
+                    class="mr-2 w-[5.0625rem] h-[1.4375rem]"
+                    alt="reviewClutchImage"
                   />
                 </div>
                 <div class="flex flex-col mt-2.5 sm:mt-5 sm:justify-end">
@@ -84,10 +89,15 @@
                       REVIEWED ON
                     </span>
 
-                    <img
+                    <!-- <img
                       :src="reviewImage"
                       class="mr-2 w-[5.3125rem] h-[1.5rem]"
                       alt="reviewClutchImage"
+                    /> -->
+                    <nuxt-img
+                      src="/clients/v3-client/ReviewImage.webp"
+                      class="mr-2 w-[5.3125rem] h-[1.5rem]"
+                      alt="reviewClutchImage"
                     />
                   </div>
                   <div class="flex flex-col mt-2.5 sm:mt-5 sm:justify-end">

nuxt-frontend/components/home-new/LandingSection.vue

@@ -2,12 +2,17 @@
   <div
     class="relative bg-gradient-to-t from-pink-5 to-white landing-bg-mobile-clip-path md:landing-bg-clip-path overflow-hidden px-0 pb-[3.125rem] md:pb-[6.25rem] 3xl:outer-container"
   >
-    <img
+    <!-- <img
       :src="background400"
       :srcset="`${background400} 400w, ${background800} 800w, ${background1200} 1200w, ${background2100} 2100w`"
       class="absolute top-0 left-0 w-full h-full -z-[1] object-contain"
       alt="canopas-landing"
       loading="eager"
+    /> -->
+    <nuxt-img
+      src="/landing/bg/background-2100w.webp"
+      class="absolute top-0 left-0 w-full h-full -z-[1] object-contain"
+      alt="canopas-landing"
     />
     <div
       class="relative container flex flex-col items-center lg:flex-row-reverse lg:items-start pb-[1.563rem] lg:pb-[3.125rem]"
@@ -16,11 +21,16 @@
         class="flex-[45%] lg:block hidden mt-10 2xl:mt-6"
         height="66%"
       >
-        <img
+        <!-- <img
           class="w-full h-full object-contain"
           :src="landing400"
           :srcset="`${landing400} 400w, ${landing800} 800w`"
           alt="landing-view-image"
+        /> -->
+        <nuxt-img
+          src="/landing/landing-800w.webp"
+          class="w-full h-full object-contain"
+          alt="landing-view-image"
         />
       </aspect-ratio>
       <div

nuxt-frontend/components/home-new/PortfolioCTASection.vue

@@ -1,15 +1,20 @@
 <template>
   <div
-    class="h-[352px] lg:h-[420px] xl:h-[476px] from-[#FF835B] to-[#F2709C] bg-gradient-[174deg] lg:bg-gradient-[180deg] 3xl:outer-container"
+    class="h-[352px] lg:h-[383px] xl:h-[468px] from-[#FF835B] to-[#F2709C] bg-gradient-[174deg] lg:bg-gradient-[180deg] 3xl:outer-container"
   >
-    <div class="container flex flex-col lg:flex-row py-4 lg:py-0">
+    <div class="h-full container flex flex-col lg:flex-row py-4 lg:py-0">
       <div class="hidden lg:block lg:w-full">
-        <img
+        <!-- <img
           :src="CTAImage[3]"
           :srcset="`${CTAImage[0]} 400w, ${CTAImage[1]} 800w, ${CTAImage[2]} 1600w, ${CTAImage[3]} 2400w`"
           alt="portfolio-cta-image"
           class="w-full object-fill 2xl:object-contain h-[420px] xl:h-[476px]"
           loading="lazy"
+        /> -->
+        <nuxt-img
+          src="/portfolio/new-portfolio/cta-2400w.webp"
+          class="w-full object-contain h-full"
+          alt="portfolio-cta-image"
         />
       </div>
 

nuxt-frontend/nuxt.config.js

@@ -19,7 +19,21 @@ export default defineNuxtConfig({
     "@canopassoftware/nuxt-blog-kit",
     "nuxt-lazy-hydrate",
     "@nuxtjs/sitemap",
+    "@nuxt/image",
   ],
+  image: {
+    dir: "assets/images",
+    screens: {
+      xs: 420,
+      sm: 576,
+      md: 768,
+      lg: 992,
+      xl: 1200,
+      xxl: 1330,
+      "2xl": 1400,
+      "2x": 1600,
+    },
+  },
   site: {
     url: config.BASE_URL,
   },

nuxt-frontend/package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.388.0",
+    "@nuxt/image": "^1.7.0",
     "@nuxtjs/tailwindcss": "^6.8.0",
     "@pinia/nuxt": "^0.4.11",
     "@vueuse/core": "^9.3.0",