이미지 로드 최적화

[1] 이미지 사이즈 최적화

이미지 포멧
PNG - 무손실 압축(투명이미지 가능)
JPG - 약간의 화질저하
WEBP - 구글에서 나온 차세대 / JPG보다 좋은 최신 이미지 포멧 지원 범위 확인필요

• picture tag 를 통해서 환경을 지원해줘야함.

https://squoosh.app/editor 사용

[2] 이미지 레이지 로딩

import { useEffect, useRef } from "react";

function Component(props) {
  const imageRef = useRef(null);

  useEffect(() => {
    const callback = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const target = entry.target;
          target.src = target.dataset.src;
          target.previousElementSibling.srcset =
            target.previousElementSibling.dataset.srcset;
          observer.unobserve(entry.target);
        }
      });
    };

    const options = {};

    const observer = new IntersectionObserver(callback, options);
    observer.observe(imageRef.current);
  }, []);

  return (
    <picture>
      <source data-srcset={props.webp} type="image/webp" />
      <img ref={imageRef} data-src={props.image} />
     </picture>
	)
}

export default Card;