diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
index 93c0d93..b6edb17 100644
--- a/src/components/Carousel.tsx
+++ b/src/components/Carousel.tsx
@@ -23,6 +23,7 @@ interface CarouselProps<T> {
     className?: string;
     hideArrows?: boolean;
     hideDots?: boolean;
+    mode?: "snap" | "free" | "free-snap"
 }
 
 const Carousel = <T,>({
@@ -35,23 +36,31 @@ const Carousel = <T,>({
                           autoplayInterval = 3000,
                           className,
                           hideArrows = false,
-    hideDots = false
+    hideDots = false,
+    mode = "snap"
                       }: CarouselProps<T>) => {
     const [currentSlide, setCurrentSlide] = useState(0);
     const [loaded, setLoaded] = useState(false);
     const [gridConfig, setGridConfig] = useState(gridLg);
 
     useEffect(() => {
+        const mqSm = window.matchMedia("(max-width: 640px)");
+        const mqMd = window.matchMedia("(max-width: 1024px)");
+
         const updateGrid = () => {
-            const width = window.innerWidth;
-            if (width <= 640) setGridConfig(gridSm);
-            else if (width <= 1024) setGridConfig(gridMd);
+            if (mqSm.matches) setGridConfig(gridSm);
+            else if (mqMd.matches) setGridConfig(gridMd);
             else setGridConfig(gridLg);
         };
+
         updateGrid();
-        window.addEventListener("resize", updateGrid);
-        return () => window.removeEventListener("resize", updateGrid);
-    }, [gridSm, gridMd, gridLg]);
+        mqSm.addEventListener("change", updateGrid);
+        mqMd.addEventListener("change", updateGrid);
+        return () => {
+            mqSm.removeEventListener("change", updateGrid);
+            mqMd.removeEventListener("change", updateGrid);
+        };
+    }, [gridSm, gridMd, gridLg])
 
     const itemsPerSlide = gridConfig.itemsPerSlide ?? gridConfig.cols * gridConfig.rows;
     const groupedItems = React.useMemo(() => {
@@ -65,7 +74,8 @@ const Carousel = <T,>({
 
     const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
         loop: true,
-        mode: "snap",
+        mode: mode,
+        renderMode: "precision",
         slides: { perView: 1, spacing: 15 },
         slideChanged: (slider) => setCurrentSlide(slider.track.details.rel),
         created: () => setLoaded(true),
@@ -135,43 +145,50 @@ const Carousel = <T,>({
     );
 };
 
-const Slides = ({className, sliderRef, renderItem, groupedItems, gridConfig, itemsPerSlide}) => {
-    if (itemsPerSlide === 1) {
+interface SlidesProps<T> {
+    className: string;
+    sliderRef: (node: HTMLDivElement) => void;
+    renderItem: (item: any, index: number) => React.ReactNode;
+    groupedItems:  T[][]
+    gridConfig: GridConfig;
+    itemsPerSlide: number;
+}
+
+const Slides = React.memo<SlidesProps<any>>(
+    ({ className, sliderRef, renderItem, groupedItems, gridConfig, itemsPerSlide }) => {
+        if (itemsPerSlide === 1) {
+            return (
+                <div ref={sliderRef} className={`keen-slider`}>
+                    {groupedItems.map((group, i) => (
+                        <div key={i} className={`keen-slider__slide grid gpu-optimized transform-gpu ${className}`}>
+                            {group.map((item) => renderItem(item, i))}
+                        </div>
+                    ))}
+                </div>
+            );
+        }
+
         return (
             <div ref={sliderRef} className={`keen-slider`}>
-                    {
-                        groupedItems.map((group, i) => {
-                        return (
-                            <div key={i} className={`keen-slider__slide flex justify-center ${className}`}>
-                                {group.map((item, j) => renderItem(item, i))}
-                            </div>
-                        );
-                    })}
-            </div>
-        )
-    }
-
-    {/* Slides */}
-    return (<div ref={sliderRef} className={`keen-slider`}>
-        {groupedItems.map((group, i) => (
-            <div key={i} className="keen-slider__slide flex justify-center flex-grow">
-                <div
-                    className={`flex flex-wrap gap-2 w-full justify-center items-center ${className}`}
-                >
-                    {group.map((item, j) => (
+                {groupedItems.map((group, i) => (
+                    <div key={i} className="keen-slider__slide gpu-optimized">
                         <div
-                            key={j}
+                            className={`grid gap-2 w-full items-center place-items-center justify-center gpu-optimized ${className}`}
                             style={{
-                                flex: `0 0 calc(${100 / gridConfig.cols}% - 1rem)`, // -1rem para compensar el gap
+                                gridTemplateColumns: `repeat(${gridConfig.cols}, minmax(0, 1fr))`,
                             }}
                         >
-                            {renderItem(item, i * itemsPerSlide + j)}
+                            {group.map((item, j) => (
+                                <div className="w-full place-items-center transform-gpu" key={j}>
+                                    {renderItem(item, i * itemsPerSlide + j)}
+                                </div>
+                            ))}
                         </div>
-                    ))}
-                </div>
+                    </div>
+                ))}
             </div>
-        ))}
-    </div>)
-}
+        );
+    }
+);
 
 export default React.memo(Carousel);
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
index baa59bf..20bcad1 100644
--- a/src/components/Gallery.tsx
+++ b/src/components/Gallery.tsx
@@ -1,14 +1,14 @@
 import React, {useState} from 'react';
 import {X, ChevronLeft, ChevronRight, Heart} from 'lucide-react';
-import posadevFila from '@/img/posadev-fila.jpg';
-import posadevReferentes from '@/img/IMG_7461.jpg';
-import posadevAsistencia from '@/img/PXL_20241208_011903817.jpg';
-import posadevTecnologia from '@/img/IMG_7425.jpg';
-import voluntarios from '@/img/gallery/voluntarios.jpg';
-import hazzim from '@/img/gallery/Hazzim.jpg';
-import dinamicas from '@/img/gallery/Dinamicas.jpg';
-import gabriel from '@/img/gallery/Gabriel.jpg';
-import posadev from '@/img/gallery/posadev.jpg'
+import posadevFila from '@/img/gallery/posadev-fila.webp';
+import posadevReferentes from '@/img/gallery/IMG_7461.webp';
+import posadevAsistencia from '@/img/gallery/PXL_20241208_011903817.webp';
+import posadevTecnologia from '@/img/gallery/IMG_7425.webp';
+import voluntarios from '@/img/gallery/voluntarios.webp';
+import hazzim from '@/img/gallery/Hazzim.webp';
+import dinamicas from '@/img/gallery/Dinamicas.webp';
+import gabriel from '@/img/gallery/Gabriel.webp';
+import posadev from '@/img/gallery/posadev.webp'
 import dinamicaSponsor from '@/img/gallery/DinamicaSponsor.png'
 import invocacionDemo from '@/img/gallery/invocacionDemo.png'
 import tamales from '@/img/gallery/tamales.png'
@@ -101,9 +101,7 @@ const Gallery = () => {
     const renderPhoto = React.useCallback(
         (image: IImage, index: number) => (
             <Photo key={image.id} index={index} image={image} setSelectedImage={setSelectedImage} />
-        ),
-        [setSelectedImage]
-    );
+        ), []);
 
     const closeLightbox = () => {
         setSelectedImage(null);
@@ -151,11 +149,13 @@ const Gallery = () => {
             <div className="w-28 h-1 bg-gradient-to-r from-posadev-darkPink to-posadev-brightPink mx-auto my-8 rounded-full "></div>
             {/* Gallery grid */}
             <Carousel
+                mode="free"
                 gridLg={gridLg}
                 gridMd={gridMd}
                 gridSm={gridSm}
                 items={images}
-                renderItem={renderPhoto}/>
+                renderItem={renderPhoto}
+            />
             {/* Lightbox */}
             {selectedImage !== null && (
                 <div className="fixed inset-0 z-50 lightbox-overlay flex items-center justify-center p-4">
diff --git a/src/components/Photo.tsx b/src/components/Photo.tsx
index cd08288..809ac72 100644
--- a/src/components/Photo.tsx
+++ b/src/components/Photo.tsx
@@ -15,21 +15,23 @@ const Photo: React.FC<PhotoProps> = ({image, setSelectedImage, index}) => {
     };
   return (
       <figure
-          className="relative group cursor-pointer overflow-hidden rounded-3xl bg-posadev-alternative-800 w-full"
+          className="relative group cursor-pointer overflow-hidden rounded-3xl bg-posadev-alternative-800 w-full h-64"
       >
           <button
               aria-label={`Ver imagen completa de ${image.title}`}
-              className="w-full h-full text-left focus:outline-none"
+              className="w-full h-full text-left focus:outline-none overflow-hidden"
               onClick={() => openLightbox(index)}
           >
               <img
                   src={image.src}
                   alt={image.alt}
+                  decoding="async"
                   loading="lazy"
-                  className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110 hover-scale"
+                  fetchPriority="low"
+                  className="w-full object-cover transition-transform duration-500 group-hover:scale-110 hover-scale"
               />
               {/* Overlay */}
-              <div className="absolute flex justify-between align-middle inset-0 bg-gradient-to-t from-posadev-black/70 via-transparent to-transparent opacity-100 lg:opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              <div className="absolute inset-0 bg-black/60 group-hover:bg-black/60 flex justify-between align-middle via-transparent to-transparent opacity-100 lg:opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                   <figcaption
                       className="text-white font-semibold text-lg mb-2 flex flex-col justify-end p-4">
                       <span>{image.title}</span>
diff --git a/src/components/Speakers.tsx b/src/components/Speakers.tsx
index f4d3bbc..3ac0eb7 100644
--- a/src/components/Speakers.tsx
+++ b/src/components/Speakers.tsx
@@ -2,13 +2,12 @@ import React from 'react';
 import Speaker from "@/components/Speaker.tsx";
 import Carousel, {GridConfig} from "@/components/Carousel.tsx";
 import {useAppContext} from "@/context/AppContext.tsx";
-import {useIsMobile} from "@/hooks/use-mobile.tsx";
 import {ISpeaker} from "@/types/speakers.ts";
 
 const Speakers = () => {
     const {speakers} = useAppContext();
 
-    const gridLg: GridConfig = {cols: 4, rows: 2, itemsPerSlide: 5};
+    const gridLg: GridConfig = {cols: 3, rows: 2, itemsPerSlide: 5};
     const gridMd: GridConfig = {cols: 2, rows: 1, itemsPerSlide: 2};
     const gridSm: GridConfig = {cols: 1, rows: 1, itemsPerSlide: 1};
 
diff --git a/src/img/gallery/DinamicaSponsor.webp b/src/img/gallery/DinamicaSponsor.webp
new file mode 100644
index 0000000..391a6fb
Binary files /dev/null and b/src/img/gallery/DinamicaSponsor.webp differ
diff --git a/src/img/gallery/Dinamicas.webp b/src/img/gallery/Dinamicas.webp
new file mode 100644
index 0000000..e319473
Binary files /dev/null and b/src/img/gallery/Dinamicas.webp differ
diff --git a/src/img/gallery/Frank.webp b/src/img/gallery/Frank.webp
new file mode 100644
index 0000000..8539d5f
Binary files /dev/null and b/src/img/gallery/Frank.webp differ
diff --git a/src/img/gallery/Gabriel.jpg b/src/img/gallery/Gabriel.jpg
deleted file mode 100644
index 1f2c4d4..0000000
Binary files a/src/img/gallery/Gabriel.jpg and /dev/null differ
diff --git a/src/img/gallery/Gabriel.webp b/src/img/gallery/Gabriel.webp
new file mode 100644
index 0000000..446eef8
Binary files /dev/null and b/src/img/gallery/Gabriel.webp differ
diff --git a/src/img/gallery/Hazzim.jpg b/src/img/gallery/Hazzim.jpg
deleted file mode 100644
index 430d78b..0000000
Binary files a/src/img/gallery/Hazzim.jpg and /dev/null differ
diff --git a/src/img/gallery/Hazzim.webp b/src/img/gallery/Hazzim.webp
new file mode 100644
index 0000000..2195d92
Binary files /dev/null and b/src/img/gallery/Hazzim.webp differ
diff --git a/src/img/IMG_7425.jpg b/src/img/gallery/IMG_7425.jpg
similarity index 100%
rename from src/img/IMG_7425.jpg
rename to src/img/gallery/IMG_7425.jpg
diff --git a/src/img/gallery/IMG_7425.webp b/src/img/gallery/IMG_7425.webp
new file mode 100644
index 0000000..b2b392b
Binary files /dev/null and b/src/img/gallery/IMG_7425.webp differ
diff --git a/src/img/IMG_7461.jpg b/src/img/gallery/IMG_7461.jpg
similarity index 100%
rename from src/img/IMG_7461.jpg
rename to src/img/gallery/IMG_7461.jpg
diff --git a/src/img/gallery/IMG_7461.webp b/src/img/gallery/IMG_7461.webp
new file mode 100644
index 0000000..8f0c6e5
Binary files /dev/null and b/src/img/gallery/IMG_7461.webp differ
diff --git a/src/img/PXL_20241208_011903817.jpg b/src/img/gallery/PXL_20241208_011903817.jpg
similarity index 100%
rename from src/img/PXL_20241208_011903817.jpg
rename to src/img/gallery/PXL_20241208_011903817.jpg
diff --git a/src/img/gallery/PXL_20241208_011903817.webp b/src/img/gallery/PXL_20241208_011903817.webp
new file mode 100644
index 0000000..c4e0680
Binary files /dev/null and b/src/img/gallery/PXL_20241208_011903817.webp differ
diff --git a/src/img/gallery/aliados.webp b/src/img/gallery/aliados.webp
new file mode 100644
index 0000000..6fef1d8
Binary files /dev/null and b/src/img/gallery/aliados.webp differ
diff --git a/src/img/gallery/globos.webp b/src/img/gallery/globos.webp
new file mode 100644
index 0000000..974e53a
Binary files /dev/null and b/src/img/gallery/globos.webp differ
diff --git a/src/img/gallery/invocacionDemo.webp b/src/img/gallery/invocacionDemo.webp
new file mode 100644
index 0000000..8574f8b
Binary files /dev/null and b/src/img/gallery/invocacionDemo.webp differ
diff --git a/src/img/gallery/organizadores.webp b/src/img/gallery/organizadores.webp
new file mode 100644
index 0000000..4cba45f
Binary files /dev/null and b/src/img/gallery/organizadores.webp differ
diff --git a/src/img/posadev-fila.jpg b/src/img/gallery/posadev-fila.jpg
similarity index 100%
rename from src/img/posadev-fila.jpg
rename to src/img/gallery/posadev-fila.jpg
diff --git a/src/img/gallery/posadev-fila.webp b/src/img/gallery/posadev-fila.webp
new file mode 100644
index 0000000..640995d
Binary files /dev/null and b/src/img/gallery/posadev-fila.webp differ
diff --git a/src/img/gallery/posadev.webp b/src/img/gallery/posadev.webp
new file mode 100644
index 0000000..efa63ac
Binary files /dev/null and b/src/img/gallery/posadev.webp differ
diff --git a/src/img/gallery/standSponsor.webp b/src/img/gallery/standSponsor.webp
new file mode 100644
index 0000000..e4317c6
Binary files /dev/null and b/src/img/gallery/standSponsor.webp differ
diff --git a/src/img/gallery/tamales.webp b/src/img/gallery/tamales.webp
new file mode 100644
index 0000000..17ee514
Binary files /dev/null and b/src/img/gallery/tamales.webp differ
diff --git a/src/img/gallery/voluntarios.jpg b/src/img/gallery/voluntarios.jpg
deleted file mode 100644
index f424e98..0000000
Binary files a/src/img/gallery/voluntarios.jpg and /dev/null differ
diff --git a/src/img/gallery/voluntarios.webp b/src/img/gallery/voluntarios.webp
new file mode 100644
index 0000000..3cbd9fb
Binary files /dev/null and b/src/img/gallery/voluntarios.webp differ
diff --git a/src/index.css b/src/index.css
index 1198ee6..b9fd983 100644
--- a/src/index.css
+++ b/src/index.css
@@ -171,6 +171,14 @@ All colors MUST be HSL.
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 2.5px 5px rgba(207, 15, 71, 0.3);
   }
+
+  .keen-slider__slide {
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    contain: layout paint;
+  }
+
 }
 
 /* Lightbox overlay */
@@ -199,4 +207,19 @@ All colors MUST be HSL.
             white 10px 20px
     );
   }
+  .gpu-optimized {
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    contain: layout paint;
+
+    img {
+      object-fit: cover;
+      max-width: 100%;
+      height: auto;
+      image-rendering: optimizeSpeed;
+      will-change: transform;
+      transform: translateZ(0);
+    }
+  }
 }
\ No newline at end of file