개발하는데 다 이유가 있겠지

1. 이미지 포맷 최적화

전통적인 JPEG나 PNG 대신 압축 효율이 높은 최신 포맷을 사용하면 이미지 품질을 유지하면서도 파일 크기를 크게 줄일 수 있습니다.

최신 이미지 포맷

• `WebP`
• `AVIF`

이러한 최신 포맷들은 일부 구버전 브라우저에서 지원되지 않을 수 있습니다. 이 경우 <picture> 요소를 사용해 호환성 문제를 해결할 수 있습니다:

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

브라우저는 위에서부터 순서대로 지원하는 포맷을 선택하여 표시합니다:

1. AVIF 지원 시 -> image.avif 사용
2. WebP 지원 시 -> image.webp 사용
3. 둘 다 미지원 시 -> image.jpg 사용

 

---

 

2. 이미지 사이즈 조정

실제 화면에 표시되는 크기보다 큰 이미지는 불필요한 데이터 전송을 야기합니다.

최적화 방법

• 서버에서 필요한 크기로 `리사이징`하여 전송
• `Responsive Images` 기술 활용
  • srcset과 sizes 속성을 사용하여 디바이스 해상도에 맞는 이미지 제공
  • 브라우저가 현재 화면에 최적화된 이미지를 자동 선택

 

---

 

3. 지연 로딩(Lazy Loading)

모든 이미지를 한 번에 로드하지 않고, 사용자의 viewport에 들어올 때 로드하는 방식입니다.

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

이를 통해 얻을 수 있는 이점:

• 초기 페이지 로딩 속도 개선
• 불필요한 데이터 전송 방지
• 사용자의 데이터 사용량 절약

 

---

 

4. CDN(Content Delivery Network) 활용

CDN을 사용하면 사용자와 가까운 서버에서 이미지를 전송받을 수 있어 로딩 속도가 개선됩니다.

CDN의 장점

• 지리적 이점을 통한 로딩 속도 향상
• 서버 부하 분산
• 안정적인 서비스 제공