perf: use OptimizedImage in ProductCard

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>