muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

optimize image loading

Browse source
This commit is contained in:
Fedor Katurov 2023-11-04 11:34:37 +06:00
parent 65196bbbbb
commit 9662e70fa7
2 changed files with 8 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/node/NodeImageLazy/index.tsx
View file

@ -1,10 +1,11 @@
import { FC } from 'react'; import { FC } from 'react';
import Image from 'next/future/image';
import { imagePresets } from '~/constants/urls'; import { imagePresets } from '~/constants/urls';
import { IFile } from '~/types'; import { IFile } from '~/types';
import { normalizeBrightColor } from '~/utils/color'; import { normalizeBrightColor } from '~/utils/color';
import { getURL } from '~/utils/dom'; import { getURL } from '~/utils/dom';
import { getFileSrcSet } from '~/utils/srcset';
interface NodeImageLazyProps { interface NodeImageLazyProps {
className?: string; className?: string;
@ -34,17 +35,17 @@ const NodeImageLazy: FC<NodeImageLazyProps> = ({
} }
return ( return (
<img <Image
data-srcset={getFileSrcSet(file)} src={getURL(file, imagePresets[1200])}
data-src={getURL(file, imagePresets[1600])}
width={file.metadata?.width} width={file.metadata?.width}
height={file.metadata?.height} height={file.metadata?.height}
onLoad={onLoad} onLoadingComplete={onLoad}
onClick={onClick} onClick={onClick}
className={className} className={className}
color={normalizeBrightColor(file?.metadata?.dominant_color)} color={normalizeBrightColor(file?.metadata?.dominant_color)}
alt="" alt=""
sizes="(max-width: 560px) 100vw, 50vh" sizes="100vw"
quality={90}
/> />
); );
}; };

2
src/components/node/NodeImageSwiperBlock/styles.module.scss
View file

@ -117,7 +117,7 @@
} }
.image { .image {
max-inline-size: calc(100vh - 150px); max-inline-size: calc(100vh - 160px);
writing-mode: vertical-rl; writing-mode: vertical-rl;
block-size: auto; block-size: auto;
border-radius: $radius; border-radius: $radius;