diff --git a/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx b/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
index 23e2658..77d0a0a 100644
--- a/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
+++ b/client/src/widgets/catalog-slider/ui/CatalogSlider.tsx
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography'
 import { useQuery } from '@tanstack/react-query'
 import type { CatalogSliderSlide } from '@/entities/catalog-slider'
 import { fetchCatalogSlider } from '@/entities/catalog-slider'
+import { OptimizedImage } from '@/shared/ui/OptimizedImage'
 
 const AUTO_MS = 5500
 
@@ -62,20 +63,26 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
               }}
             >
               <Box
-                component="img"
-                src={slide.url}
-                alt={captionText || 'Слайд каталога'}
-                loading={i === 0 ? 'eager' : 'lazy'}
                 sx={{
                   position: 'absolute',
                   inset: 0,
                   width: '100%',
                   height: '100%',
-                  objectFit: 'cover',
-                  display: 'block',
                   zIndex: 0,
                 }}
-              />
+              >
+                <OptimizedImage
+                  src={slide.url}
+                  alt={captionText || 'Слайд каталога'}
+                  priority={i === 0}
+                  sizes="(max-width: 600px) 320px, (max-width: 1024px) 1024px, 1600px"
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                  }}
+                />
+              </Box>
               {captionText ? (
                 <Box
                   sx={{