[매일메일] 로딩 속도 개선을 위한 이미지 크기 최적화 (FE.250120)

이미지 포멧 최적화

- JPEG나 PNG 대신 압축 효율이 높은 WebP 또는 AVIP로 변환

- 이미지 품질을 유지하면서 파일 크기를 줄일 수 있음

- 그러나 최신 포맷이기 때문에 구버전 브라우저에서 지원하지 않을 수 있으므로 호환성 고려 필요

    - HTML의 <picture> 요소를 통해 fallback 이미지를 적용함.

    - 고효율 포맷을 우선 설정하고, 브라우저가 지원하지 않으면  JPEG, PNG 같은 기본 포맷 로드

<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, 둘 다 안되면 img 태그의 jpg 이미지 로드

 

이미지 사이즈 조정

- 화면에 노출되는 크기에 비해 이미지가 과도하게 큰 경우, 이미지 작게 resizing

- 필요한 크기에 맞게 서버에서 작게 조정해 보냄

- Responsive Images의 scrset과 sizes 속성으로 브라우저가 현재 화면 크기에 최적화된 이미지 로드

  (다양한 디바이스 해상도에 대응 가능)

 

Lazy Loading

- 화면 스크롤 시 해당 위치에 도달하는 이미지가 로드되도록 함. (불필요한 이미지 로드 방지)

- 초기 로딩 속도를 개선할 수 있는 방법

- HTML의 loading="lazy" 속성으로 구현 가능.

 

CDN(Content Delivery Network)

- 지리적으로 가까운 서버에서 이미지를 다운로드해 로딩 속도를 단축시킴

---

 

출처

[1] 매일메일. 250120. 이미지 크기가 클 경우 렌더링 속도가 느려질 텐데, 이를 개선하기 위한 방법들을 설명해주세요. 54번. https://maeil-mail.kr

[2] 이 주제와 관련된 이 블로그의 다른 글:

웹 어플리케이션의 성능을 최적화 하는 방법 https://developer-dreamer.tistory.com/119