[SoundLink] 이미지 크기 최적화로 페이지 속도 개선하기

이번 글에서는 Lighthouse에서 발생한 "Properly size images" 경고를 해결하며, 이미지 크기 최적화를 통해 렌더링 속도를 높이고자 합니다.

---

Properly size images란 무엇일까?

Lighthouse 분석 결과, "Properly size images" 경고가 나타났습니다.

이 경고는 화면에 표시되는 크기보다 원본 이미지 크기가 불필요하게 클 때 발생하며, 그로 인해 로딩 속도 저하가 발생할 수 있습니다.

이를 해결하기 위해서는 필요한 만큼만 리사이즈해 이미지 크기를 줄이면 됩니다.

---

❓ 이미지 사이즈는 몇으로 줄여야 할까?

이미지 최적화 시에는 디스플레이 해상도를 고려해야 합니다.

레티나(고해상도) 디스플레이에서는 선명함을 위해 표시 크기의 2배 해상도로 준비하는 것이 일반적입니다.

예) 메인 페이지에서 80×80으로 보이는 이미지는 160×160으로 준비.

---

ImageKit을 이용하여 이미지 리사이즈하기

ImageKit이란?
ImageKit은 이미지·동영상을 실시간으로 최적화·변환·전송해주는 미디어 CDN 서비스입니다.

여러 이미지를 동일하게 리사이즈하기 위해 공통 이미지 컴포넌트를 만들었습니다.

export default function ImageKitImg({
  src,
  width,
  height,
  alt = '앨범 이미지',
  className = '',
}) {

  return (
    <img
      className={className}
      src={`https://ik.imagekit.io/${import.meta.env.VITE_IMAGEKIT_ID}/${imagePath}?tr=w-${width},h-${height}`}
      alt={alt}
    />
  );
}

ImageKit의 동작 흐름

1. 브라우저가 이미지 URL 을 요청합니다.

   https://ik.imagekit.io/[IMAGEKIT_ID]/[이미지 주소]?tr=w-${width},h-${height}`

2. ImageKit이 원본 저장소에서 이미지를 가져와 실시간으로 리사이즈/최적화합니다.

3. 브라우저는 줄어든 크기로 내려받아 렌더링합니다.

---

⏱️ 적용 전/후 비교

변경 전

• 평균 응답 시간: 약 55ms

변경 후

• 평균 응답 시간: 약 12ms
• 파일 크기: 목표 해상도(160×160) 로 축소

---

🚀 결과

최적화 적용 후 Lighthouse에서 "Properly size images" 경고 문제을 해결 했습니다.

• 평균 응답 시간: 약 4.6배 단축 (55 ms → 12 ms)
• 이미지 파일 크기: 약 7배 축소 (320 KB → 45 KB)

그 결과, 전송 용량을 줄이고 렌더링 속도를 개선할 수 있었습니다.

출처

• https://imagekit.io/