fix: image loading

src/components/AboutSection.jsx

@@ -14,8 +14,11 @@ export default function AboutSection() {
               <img
                 src={siteConfig.about.image}
                 alt="About ASME NIT Rourkela"
+                loading="lazy"
+                decoding="async"
                 className="w-full h-[400px] md:h-[500px] transition-transform duration-300 hover:scale-105 object-cover"
               />
+
               <div className="absolute inset-0 ring-1 ring-black/10 rounded-xl"></div>
             </div>
           </div>

src/components/AchievementCard.jsx

@@ -6,6 +6,7 @@ import {
   ChevronRight,
 } from "lucide-react";
 import { useState, useEffect } from "react";
+import { getOptimizedImageUrl } from "../utils/imageOptimizer";
 
 const ImageCarousel = ({ images, title }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -28,8 +29,10 @@ const ImageCarousel = ({ images, title }) => {
     <div className="mb-4 overflow-hidden rounded-lg relative group">
       <div className="w-full h-48 bg-gray-100 dark:bg-slate-700 flex items-center justify-center">
         <img
-          src={images[currentIndex]}
+          src={getOptimizedImageUrl(images[currentIndex], { width: 800 })}
           alt={`${title} - Image ${currentIndex + 1}`}
+          loading="lazy"
+          decoding="async"
           className="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105"
           onError={(e) => {
             e.target.style.display = "none";

src/components/EventCard.jsx

@@ -5,6 +5,7 @@ import {
   FaCalendar,
   FaMapMarkerAlt,
 } from "react-icons/fa";
+import { getOptimizedImageUrl } from "../utils/imageOptimizer";
 
 const EventCard = ({ title, description, images, date, location, status }) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
@@ -67,10 +68,13 @@ const EventCard = ({ title, description, images, date, location, status }) => {
           {images && images.length > 0 ? (
             <>
               <img
-                src={images[currentImageIndex]}
+                src={getOptimizedImageUrl(images[currentImageIndex], {
+                  width: 800,
+                })}
                 alt={`${title} image ${currentImageIndex + 1}`}
                 className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                 loading="lazy"
+                decoding="async"
               />
               <div className="absolute inset-0 ring-1 ring-black/10"></div>
 

src/components/GallerySection.jsx

@@ -58,7 +58,9 @@ export default function GallerySection() {
                   alt={image.alt}
                   className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
                   loading="lazy"
+                  decoding="async"
                 />
+
                 <div className="absolute inset-0 ring-1 ring-black/10"></div>
 
                 {/* Overlay on hover */}

src/components/HeroSection.jsx

@@ -71,8 +71,12 @@ export default function HeroSection() {
               <img
                 src={siteConfig.hero.image}
                 alt="ASME NIT Rourkela - Engineering Excellence"
+                loading="eager"
+                fetchpriority="high"
+                decoding="async"
                 className="w-full h-[320px] sm:h-[380px] md:h-[500px] lg:h-[560px] object-cover transition-transform duration-300 hover:scale-105"
               />
+
               <div className="absolute inset-0 ring-1 ring-black/10 rounded-xl"></div>
             </div>
           </div>

src/components/Sponsor.jsx

@@ -68,6 +68,8 @@ const SponsorsSection = () => {
                   <img
                     src={sponsor.image}
                     alt={sponsor.name}
+                    loading="lazy"
+                    decoding="async"
                     className="max-h-32 max-w-full object-contain transition-all duration-300 group-hover:brightness-110 group-hover:scale-105"
                   />
 

src/components/Team.jsx

@@ -150,8 +150,11 @@ const TeamSlider = () => {
                       "https://via.placeholder.com/300x300?text=Photo+Coming+Soon"
                     }
                     alt={member.name}
+                    loading="lazy"
+                    decoding="async"
                     className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
                   />
+
                   <div className="absolute inset-0 ring-1 ring-black/10"></div>
                 </div>
 

src/components/shared/OptimizedImage.jsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { getOptimizedImageUrl } from "../../utils/imageOptimizer";
+
+/**
+ * Reusable Optimized Image Component
+ * Handles Cloudinary auto-format/quality optimization, lazy loading, async decoding,
+ * and smooth fade-in loading state.
+ */
+export default function OptimizedImage({
+  src,
+  alt = "",
+  width,
+  className = "",
+  loading = "lazy",
+  decoding = "async",
+  fetchPriority,
+  onError,
+  onLoad,
+  showSkeleton = true,
+  ...props
+}) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  const optimizedSrc = getOptimizedImageUrl(src, { width });
+
+  const handleLoad = (e) => {
+    setIsLoaded(true);
+    if (onLoad) onLoad(e);
+  };
+
+  const handleError = (e) => {
+    setHasError(true);
+    if (onError) onError(e);
+  };
+
+  if (hasError) {
+    return (
+      <div
+        className={`bg-slate-200 dark:bg-slate-800 flex items-center justify-center text-slate-400 text-xs text-center p-2 ${className}`}
+      >
+        <span>{alt || "Image unavailable"}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`relative overflow-hidden ${className}`}>
+      {/* Optional skeleton loader placeholder */}
+      {showSkeleton && !isLoaded && (
+        <div className="absolute inset-0 bg-slate-200 dark:bg-slate-700 animate-pulse z-0" />
+      )}
+      <img
+        src={optimizedSrc}
+        alt={alt}
+        loading={loading}
+        decoding={decoding}
+        {...(fetchPriority ? { fetchpriority: fetchPriority } : {})}
+        onLoad={handleLoad}
+        onError={handleError}
+        className={`w-full h-full object-cover transition-opacity duration-300 ${
+          isLoaded ? "opacity-100" : "opacity-0"
+        } ${className}`}
+        {...props}
+      />
+    </div>
+  );
+}

src/config/achievement.js

@@ -1,25 +1,26 @@
 // Import all year-based images
-import img2014 from "../assets/2014.png";
-import img2014_2 from "../assets/2014 (2).png";
-import img2014_3 from "../assets/2014 (3).png";
-import img2016 from "../assets/2016.png";
-import img2016_2 from "../assets/2016 (2).png";
-import img2017 from "../assets/2017.png";
-import img2017_2 from "../assets/2017 (2).png";
-import img2017_3 from "../assets/2017 (3).png";
-import img2022 from "../assets/2022.png";
-import img2023 from "../assets/2023.png";
-import img2023_2 from "../assets/2023 (2).png";
-import img2024 from "../assets/2024.png";
-import img2025 from "../assets/2025.png";
-import img2025_2 from "../assets/2025 (2).png";
-import img2025_3 from "../assets/2025 (3).png";
-import img2025_4 from "../assets/2025 (4).png";
-import img2025_5 from "../assets/2025 (5).png";
-import img2025_6 from "../assets/2025 (6).png";
+import img2014 from "../assets/2014.jpg";
+import img2014_2 from "../assets/2014 (2).jpg";
+import img2014_3 from "../assets/2014 (3).jpg";
+import img2016 from "../assets/2016.jpg";
+import img2016_2 from "../assets/2016 (2).jpg";
+import img2017 from "../assets/2017.jpg";
+import img2017_2 from "../assets/2017 (2).jpg";
+import img2017_3 from "../assets/2017 (3).jpg";
+import img2022 from "../assets/2022.jpg";
+import img2023 from "../assets/2023.jpg";
+import img2023_2 from "../assets/2023 (2).jpg";
+import img2024 from "../assets/2024.jpg";
+import img2025 from "../assets/2025.jpg";
+import img2025_2 from "../assets/2025 (2).jpg";
+import img2025_3 from "../assets/2025 (3).jpg";
+import img2025_4 from "../assets/2025 (4).jpg";
+import img2025_5 from "../assets/2025 (5).jpg";
+import img2025_6 from "../assets/2025 (6).jpg";
 import img2015 from "../assets/2015.jpeg";
 import img2026 from "../assets/2026.jpg";
 import img2026_2 from "../assets/2026 (2).jpg";
+import { optimizeCloudinaryUrl } from "../utils/imageOptimizer";
 
 // Organize images by year
 const yearImages = {
@@ -177,7 +178,10 @@ const achievementsData = [
 ];
 
 export const achivementTop = {
-  link: "https://res.cloudinary.com/dc7tu3hzv/image/upload/v1785234333/WhatsApp_Image_2026-06-29_at_18.22.43_mjqlt2.jpg",
+  link: optimizeCloudinaryUrl(
+    "https://res.cloudinary.com/dc7tu3hzv/image/upload/v1785234333/WhatsApp_Image_2026-06-29_at_18.22.43_mjqlt2.jpg",
+    { width: 1200 },
+  ),
 };
 
 export default achievementsData;

src/config/gallary.js

@@ -1,18 +1,18 @@
 import img2026_1 from "../assets/2026.jpg";
 import img2026_2 from "../assets/2026 (2).jpg";
-import img2014 from "../assets/2014.png";
-import img2014_2 from "../assets/2014 (2).png";
-import img2014_3 from "../assets/2014 (3).png";
-import img2016 from "../assets/2016.png";
-import img2016_2 from "../assets/2016 (2).png";
-import img2017 from "../assets/2017.png";
-import img2017_2 from "../assets/2017 (2).png";
-import img2017_3 from "../assets/2017 (3).png";
-import img2022 from "../assets/2022.png";
-import img2023 from "../assets/2023.png";
-import img2023_2 from "../assets/2023 (2).png";
-import img2024 from "../assets/2024.png";
+import img2014 from "../assets/2014.jpg";
+import img2014_2 from "../assets/2014 (2).jpg";
+import img2014_3 from "../assets/2014 (3).jpg";
+import img2016 from "../assets/2016.jpg";
+import img2016_2 from "../assets/2016 (2).jpg";
+import img2017 from "../assets/2017.jpg";
+import img2017_2 from "../assets/2017 (2).jpg";
+import img2017_3 from "../assets/2017 (3).jpg";
+import img2022 from "../assets/2022.jpg";
+import img2023 from "../assets/2023.jpg";
+import img2023_2 from "../assets/2023 (2).jpg";
 import img2015 from "../assets/2015.jpeg";
+import { optimizeCloudinaryUrl } from "../utils/imageOptimizer";
 
 const images = [
   {
@@ -231,18 +231,14 @@ const images = [
     alt: "ASME Image 7",
     year: "others",
   },
-  {
-    id: 34,
-    src: img2024,
-    alt: "ASME Image 8",
-    year: "others",
-  },
-  {
-    id: 35,
-    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1756627303/asme93_gbo3e7.jpg",
-    alt: "ASME Image 9",
-    year: "others",
-  },
 ];
 
-export default images;
+const optimizedImages = images.map((img) => ({
+  ...img,
+  src:
+    typeof img.src === "string"
+      ? optimizeCloudinaryUrl(img.src, { width: 1000 })
+      : img.src,
+}));
+
+export default optimizedImages;

src/config/navbarHero.js

@@ -1,6 +1,11 @@
+import { optimizeCloudinaryUrl } from "../utils/imageOptimizer";
+
 export const siteConfig = {
   navigation: {
-    logo: "https://res.cloudinary.com/dswk9scro/image/upload/v1755092284/ASME_NIT_Rourkela_Student_Section_Blue_ldskye.png",
+    logo: optimizeCloudinaryUrl(
+      "https://res.cloudinary.com/dswk9scro/image/upload/v1755092284/ASME_NIT_Rourkela_Student_Section_Blue_ldskye.png",
+      { width: 400 },
+    ),
     links: [
       { name: "Home", href: "/" },
       { name: "Team", href: "/team" },
@@ -18,8 +23,10 @@ export const siteConfig = {
       "The ASME (American Society of Mechanical Engineers) NIT Rourkela Student Section is an official technical society under the Student Activity Centre (SAC) of NIT Rourkela. It serves as a vibrant platform for undergraduate students to enhance both technical and professional capabilities, preparing them for future industrial and corporate roles while aiming to bring laurels to the institute.",
     primaryButton: "Join Us",
     secondaryLink: "Learn More",
-    image:
+    image: optimizeCloudinaryUrl(
       "https://res.cloudinary.com/ddoeahbpv/image/upload/IMG-20260118-WA0067_aofrxp.jpg",
+      { width: 1200 },
+    ),
     image1:
       "https://res.cloudinary.com/dwjcki9ey/image/upload/v1752159681/Ellipse_1_sxc0u7.png",
     image2:
@@ -31,8 +38,10 @@ export const siteConfig = {
     description:
       "ASME NIT Rourkela is dedicated to fostering engineering innovation among students. We serve as a pivotal connecting link between academia and industry, tackling technical obstacles with enthusiasm through our various initiatives and events. ASME NIT Rourkela is committed to fostering engineering innovation and practical application among students. All of us are free to make a positive impact through our various technical and non-events.",
     button: "Learn More",
-    image:
+    image: optimizeCloudinaryUrl(
       "https://res.cloudinary.com/ddoeahbpv/image/upload/IMG-20260118-WA0109_ft7m8u.jpg",
+      { width: 1000 },
+    ),
   },
 
   missions: [

src/config/sponsors.js

@@ -1,4 +1,5 @@
-// sponsors.js
+import { optimizeCloudinaryUrl } from "../utils/imageOptimizer";
+
 const sponsors = [
   {
     name: "NIT Rourkela Alumini ",
@@ -44,4 +45,9 @@ const sponsors = [
   },
 ];
 
-export default sponsors;
+const optimizedSponsors = sponsors.map((item) => ({
+  ...item,
+  image: optimizeCloudinaryUrl(item.image, { width: 400 }),
+}));
+
+export default optimizedSponsors;

src/config/teammate.js

@@ -1,3 +1,5 @@
+import { optimizeCloudinaryUrl } from "../utils/imageOptimizer";
+
 const teamMembers = [
   {
     name: "Radha Choudhary",
@@ -147,4 +149,9 @@ const teamMembers = [
   },
 ];
 
-export default teamMembers;
+const optimizedTeamMembers = teamMembers.map((member) => ({
+  ...member,
+  img: optimizeCloudinaryUrl(member.img, { width: 500 }),
+}));
+
+export default optimizedTeamMembers;