From 9c238bd542780d48df1c6c537ed05582061510cc Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Fri, 15 May 2026 13:30:05 +0500
Subject: [PATCH] perf: use OptimizedImage in ProductPage

---
 client/src/pages/product/ui/ProductPage.tsx | 38 +++++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/client/src/pages/product/ui/ProductPage.tsx b/client/src/pages/product/ui/ProductPage.tsx
index 3390551..708db46 100644
--- a/client/src/pages/product/ui/ProductPage.tsx
+++ b/client/src/pages/product/ui/ProductPage.tsx
@@ -25,6 +25,7 @@ import { formatPriceRub } from '@/shared/lib/format-price'
 import { reviewsCountRu } from '@/shared/lib/reviews-count-ru'
 import { $user } from '@/shared/model/auth'
 import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
+import { OptimizedImage } from '@/shared/ui/OptimizedImage'
 
 export function ProductPage() {
   const user = useUnit($user)
@@ -91,9 +92,6 @@ export function ProductPage() {
               {imageUrls.map((url, idx) => (
                 <SwiperSlide key={url}>
                   <Box
-                    component="img"
-                    src={url}
-                    alt={p.title}
                     onClick={() => {
                       setViewerIndex(idx)
                       setViewerOpen(true)
@@ -101,12 +99,21 @@ export function ProductPage() {
                     sx={{
                       width: '100%',
                       height: 420,
-                      objectFit: 'cover',
-                      display: 'block',
                       cursor: 'zoom-in',
                       userSelect: 'none',
                     }}
-                  />
+                  >
+                    <OptimizedImage
+                      src={url}
+                      alt={p.title}
+                      sizes="(max-width: 600px) 320px, (max-width: 1024px) 640px, 1024px"
+                      sx={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  </Box>
                 </SwiperSlide>
               ))}
             </Swiper>
@@ -219,18 +226,27 @@ export function ProductPage() {
                     )}
                     {rv.imageUrl && (
                       <Box
-                        component="img"
-                        src={rv.imageUrl}
-                        alt="Фото к отзыву"
                         sx={{
                           width: 140,
                           height: 140,
-                          objectFit: 'cover',
                           borderRadius: 1.5,
                           border: 1,
                           borderColor: 'divider',
+                          overflow: 'hidden',
                         }}
-                      />
+                      >
+                        <OptimizedImage
+                          src={rv.imageUrl}
+                          alt="Фото к отзыву"
+                          widths={[140, 320]}
+                          sizes="140px"
+                          sx={{
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                          }}
+                        />
+                      </Box>
                     )}
                   </Stack>
                 </Paper>