Image progressive load

사이즈가 수백, 수천kb에 육박하는 이미지를 보여줄 때 적절한 처리가 필요하다. 레이아웃이 그만큼 밀릴 수도 있고 n초동안 화면에 사진이 보여지지 않다가 깜빡하고 보여지는 경우는 이슈가 될 수 있다. 이를 피할 수 있는 방법 - 간단하고 짧다

• 좌(직접구현), 우(next 기능) - load속도엔 차이가 거의 없다.

문제

• 이미지가 로드되는데 한참 걸림 그동안 흰색화면이어서 있는지 없는지 모르겠음
• 인터넷속도가 요새 많이 빠르지만 다 빠른게 아님. 일시적으로 느릴 수 있고, 사양이 좋지 못할 경우도 영향을 받음. 이런 디테일을 고려해야함

다양한 방법으로 해결할 수 있다.

1. 디바이스 사이즈에 맞게 이미지 조절
2. 이미지가 뷰포트에 위치했을 때 load하도록 하기 (lazy load)
3. 이미지 최적화(압축)
4. progressive load

4번 === 스켈레톤UI와 비슷한 개념

• 아주 작은 사이즈의 이미지를 미리 보여주고 원본 image가 load되었을 때 갈아끼운다.

const ProgressiveImage = ({
  placeHolderSrc,
  src,
  alt,
  width,
  height,
}: IProps) => {
const [imageSrc, setImageSrc] = useState()
useEffect(()=>{
  const img = new Image();
  img.src = src;
  src.onLoad = () => setImageSrc(src); //원본 src가 load되면 보여지는 src를 변경한다
  },[
])
return  <img {{src:imageSrc,...}/> // 원본 load전 까지는 작은화질로 보여짐
}

nextjs에서 할 수 있는 것

• next에서는 향상된 Image 태그가 존재한다.
• 이미지의 퀄리티를 props로 조절하여 최적화할 수 있음
• 우선순위를 조절하여 preload를 시킬 수 있음
• 자동으로 lazyload가 적용됨
• 위 사항을 구현하지 않고도 placeholder를 blur로 주어 구현할 수 있음

next 짱