퍼블리싱/기타

이미지 렌더링시 영역이 사라질 때

리리히히 2024. 11. 13. 22:42
반응형

 

 
페이지가 로딩 될 때, 이미지 영역은 뒤늦게 로딩 되면서 덜컹- 하는 느낌이 들때가 있다.
(실제로 프로젝트할 때 해당 결함이 많았다.)
 
 

⭐해당 문제를 해결하기 위한 방법 정리!

 

1. 이미지를 감싸는 컨테이너에 크기를 지정 

- 실제로 내가 제일 많이 사용했던 방법 중 하나

<div style={{width: '300px', height: '200px'}}>
  <img src={myImage} alt="My image" style={{width: '100%', height: '100%'}} />
</div>

 
 

2. 또는 이미지 컨테이너에 최소 높이값을 지정

<img src="image.png" alt="" style={{minHeight : 200}}

 
위 처럼 마크업 자체에 사용해도 되고, CSS에 적용해도 됨.
 
 

3. loading="lazy" 속성을 사용

- 이미지의 지연 로딩(lazy loading)을 구현하는 HTML 속성
- 이미지가 뷰포트(화면에 보이는 영역)에 들어올 때까지 이미지 로딩 지연
- 페이지 초기 로딩 시 이미지 요청을 줄여 로딩 속도를 향상
- 사용자가 스크롤하여 이미지가 뷰포트에 가까워지면 이미지를 로드
- 불필요한 데이터 사용을 줄이고 초기 페이지 로드 성능을 개선
- 브라우저 네이티브로 지원되어 별도의 JavaScript 코드 없이 간단히 구현
- <img> 태그에 loading="lazy" 속성을 추가하는 것만으로 적용 가능
- 페이지 상단의 중요한 이미지에는 사용하지 않는 것이 좋음
- 스크롤해야 보이는 이미지들에 주로 사용
- 이 속성을 통해 웹 페이지의 초기 로딩 속도를 개선하고 사용자 경험을 향상. (단, 주요 콘텐츠 이미지에는 신중히 적용)

<img src={imageUrl} alt="" loading="lazy" />

 
 

4. 플레이스홀더

- 이미지 로딩 전 플레이스홀더를 표ㅛ시하여 레이아웃 영역을 미리 잡아줌
- 직접 사용해본적은 없고 구글링을 통해 찾은 방법 (스켈레톤과 유사한 개념인듯)

 const ProgressiveImg = ({ placeholderSrc, src, ...props }) => {
  const [imgSrc, setImgSrc] = useState(placeholderSrc || src);

  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      setImgSrc(src);
    };
  }, [src]);

  return (
    <img
      {...{ src: imgSrc, ...props }}
      alt={props.alt || ""}
      className="image"
    />
  );
};


 
 
5. 불필요한 리렌더링 방지를 위해 React.memo, useMemo, useCallback을 사용하는 방법도 있지만, 아직 직접 적용해본적이 없음... 
추후에 적용해보고 정리해볼 예정!

반응형