이미지 크기가 클 경우 개선하기 위한 방법

답변 확인

1. 이미지 최적화

• 포맷 변경: 이미지 파일 형식을 최신 압축 포맷으로 변경합니다.
  • JPEG → WebP (손실 압축)
  • PNG → WebP 또는 AVIF (무손실 압축 가능)
• 해상도 조정: 사용자 화면에서 실제로 표시되는 크기에 맞게 이미지 해상도를 줄입니다. 필요 이상으로 큰 해상도를 사용하는 것은 비효율적입니다.
• <picture> 요소를 활용하여 fallback 이미지를 설정할 수 있습니다.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image description">
</picture>

이 코드는 브라우저가 AVIF를 우선 시도하고, 지원하지 않을 경우 WebP 또는 JPEG를 로드하도록 설정합니다.

2. 이미지 사이즈 조정

• 필요한 크기에 맞게 리사이징하여 파일 크기 조정
• 다양한 디바이스 해상도에 대응하기 위해 Responsive Images 기술을 사용하는 것이 효과적
• srcset과 sizes 속성을 활용하면 브라우저가 화면 크기에 적합한 이미지를 자동으로 선택합니다.

<img
  src="image-800w.jpg"
  srcset="image-480w.jpg 480w, image-800w.jpg 800w, image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="Responsive image"
>

3. 지연 로드 (Lazy Loading)

• loading="lazy" 속성 사용: HTML에서 이미지를 지연 로드하여, 사용자 화면에 나타날 때만 이미지를 불러옵니다.

<img src="example.jpg" loading="lazy" alt="example" />

4. CDN(Content Delivery Network) 활용

• CDN을 적용하면 사용자가 지리적으로 가까운 서버에서 이미지를 다운로드하여 로딩 속도를 단축시킬 수 있음
• 대규모 트래픽 환경에서도 안정적으로 이미지를 제공할 수 있음

5. 캐싱 (Caching)

• 이미지에 캐싱 헤더를 설정하여 사용자가 같은 이미지를 다시 로드하지 않도록 합니다.
• Cache-Control 헤더 설정

Cache-Control: public, max-age=31536000