From b52471ec9761ef1665bb27a4dfddba6621fe9a8e Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Fri, 15 May 2026 13:29:45 +0500
Subject: [PATCH] perf: use OptimizedImage in ProductCard

---
 .../src/entities/product/ui/ProductCard.tsx   | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/entities/product/ui/ProductCard.tsx b/client/src/entities/product/ui/ProductCard.tsx
index e2d4b90..b320251 100644
--- a/client/src/entities/product/ui/ProductCard.tsx
+++ b/client/src/entities/product/ui/ProductCard.tsx
@@ -12,6 +12,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/css'
 import type { Product } from '@/entities/product/model/types'
 import { formatPriceRub } from '@/shared/lib/format-price'
+import { OptimizedImage } from '@/shared/ui/OptimizedImage'
 import type { Swiper as SwiperType } from 'swiper/types'
 
 type Props = { product: Product; mediaHeight?: number; actions?: ReactNode }
@@ -86,21 +87,27 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
               {imageUrls.map((url) => (
                 <SwiperSlide key={url}>
                   <Box
-                    component="img"
-                    src={url}
-                    alt={product.title}
                     className="product-card__media"
                     sx={{
                       width: '100%',
                       height: mediaHeight,
-                      objectFit: 'cover',
-                      display: 'block',
                       transition: 'transform 320ms ease',
                       '@media (prefers-reduced-motion: reduce)': { transition: 'none' },
                       userSelect: 'none',
                       bgcolor: 'grey.50',
                     }}
-                  />
+                  >
+                    <OptimizedImage
+                      src={url}
+                      alt={product.title}
+                      sizes={`(max-width: 600px) ${mediaHeight}px, (max-width: 1024px) ${Math.round(mediaHeight * 1.5)}px, ${mediaHeight}px`}
+                      sx={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  </Box>
                 </SwiperSlide>
               ))}
             </Swiper>