Added lazy loading for static images

canopas · Mar 8, 2024 · b01d819 · b01d819
1 parent 816e9ac
commit b01d819
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/website/components/Hero/index.tsx b/website/components/Hero/index.tsx
@@ -27,6 +27,7 @@ const Hero = () => {
                 fill
                 className="h-full w-full object-cover"
                 alt="banner-slide-image"
+                loading="lazy"
               />
             </SwiperSlide>
             <SwiperSlide>
@@ -38,13 +39,15 @@ const Hero = () => {
                     height={500}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                   <Image
                     src="/images/banner/3.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                 </div>
                 <div className="flex h-1/2 w-full">
@@ -54,13 +57,15 @@ const Hero = () => {
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                   <Image
                     src="/images/banner/5.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                 </div>
               </div>
@@ -74,13 +79,15 @@ const Hero = () => {
                     height={500}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                   <Image
                     src="/images/banner/7.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                 </div>
                 <div className="flex h-1/2 w-full">
@@ -90,13 +97,15 @@ const Hero = () => {
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                   <Image
                     src="/images/banner/9.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                 </div>
               </div>
@@ -110,13 +119,15 @@ const Hero = () => {
                     height={500}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                   <Image
                     src="/images/banner/11.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                 </div>
                 <div className="flex h-1/2 w-full">
@@ -126,13 +137,15 @@ const Hero = () => {
                     height={1000}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                   <Image
                     src="/images/banner/13.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
+                    loading="lazy"
                   />
                 </div>
               </div>