From 9662e70fa770afe84cc5fa55c3a885bee03569c0 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 4 Nov 2023 11:34:37 +0600
Subject: [PATCH] optimize image loading

---
 src/components/node/NodeImageLazy/index.tsx         | 13 +++++++------
 .../node/NodeImageSwiperBlock/styles.module.scss    |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/node/NodeImageLazy/index.tsx b/src/components/node/NodeImageLazy/index.tsx
index 4d785916..0e1d62ab 100644
--- a/src/components/node/NodeImageLazy/index.tsx
+++ b/src/components/node/NodeImageLazy/index.tsx
@@ -1,10 +1,11 @@
 import { FC } from 'react';
 
+import Image from 'next/future/image';
+
 import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { normalizeBrightColor } from '~/utils/color';
 import { getURL } from '~/utils/dom';
-import { getFileSrcSet } from '~/utils/srcset';
 
 interface NodeImageLazyProps {
   className?: string;
@@ -34,17 +35,17 @@ const NodeImageLazy: FC<NodeImageLazyProps> = ({
   }
 
   return (
-    <img
-      data-srcset={getFileSrcSet(file)}
-      data-src={getURL(file, imagePresets[1600])}
+    <Image
+      src={getURL(file, imagePresets[1200])}
       width={file.metadata?.width}
       height={file.metadata?.height}
-      onLoad={onLoad}
+      onLoadingComplete={onLoad}
       onClick={onClick}
       className={className}
       color={normalizeBrightColor(file?.metadata?.dominant_color)}
       alt=""
-      sizes="(max-width: 560px) 100vw, 50vh"
+      sizes="100vw"
+      quality={90}
     />
   );
 };
diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss
index 4e59a912..e5c9499c 100644
--- a/src/components/node/NodeImageSwiperBlock/styles.module.scss
+++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss
@@ -117,7 +117,7 @@
 }
 
 .image {
-  max-inline-size: calc(100vh - 150px);
+  max-inline-size: calc(100vh - 160px);
   writing-mode: vertical-rl;
   block-size: auto;
   border-radius: $radius;