[매일메일] 이미지 크기가 클 때, 렌더링 속도 개선법

크게 세가지 방법을 말씀드릴 수 있습니다.

 

첫째, 이미지 포맷 최적화입니다.

전통적인 JPEG나 PNG 대신, 압축 효율이 높은 WebP 또는 AVIF와 같은 최신 포맷으로 변환할 수 있습니다. 이 포맷들은 이미지 품직을 유지하면서도 파일 크기를 크게 줄여줍니다. 단, 일부 구버전의 브라우저에서는 최신 이미지 포맷을 지원하지 않으므로, 호환성 문제를 고려할 필요가 있습니다.

 

둘째, 이미지 사이즈 조정입니다.

화면에 노출되는 크기에 비해 이미지가 과도하게 큰 경우 이미지를 작게 리사이징 할 수 있습니다. 필요한 크기에 맞게 잘라 서버에서 내려줄 수 있습니다. 또한, 다양한 디바이스 해상도에 대응하기 위해 Responsive Images 기술, 즉 srcest과 sizes 속성을 활용할 수 있습니다. 이 경우, 브라우저가 현재 화면 크기에 최적화된 이미지를 선택하여 로드할 수 있습니다.

 

셋째, 지연 로딩(Lazy Loading)입니다.

사용자가 화면에 스크롤할 때 해당 위치에 도달하는 이미지가 로드되도록 설정하는 방법입니다. 지연 로딩을 통해 초기 로딩 속도를 개선할 수 있습니다. HTML loading="lazy" 속성을 통해 구현할 수 있으며, 이를 통해 불필요한 이미지 로드를 방지할 수 있습니다.

 

마지막으로, CDN(Content Delivery Network)입니다.

CDN을 적용하면 사용자가 지리적으로 가까운 서버에서 이미지를 다운로드하게 되어 로딩 속도를 단축시킬 수 있습니다.

 

🤔 WebP나 AVIF는 모든 브라우저에서 지원하지 않는다고 하셨는데, 호환성 문제를 어떻게 해결할 수 있을까요?

호환성 문제에 대비하기 위해 HTML의 <picture> 요소를 통해 fallback 이미지를 적용할 수 있습니다. <picture> 요소 내부에 WebP나 AVIF와 같은 고효율 포맷을 우선 설정하고, 브라우저가 이를 지원하지 않을 경우 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 이미지를 로드하게 됩니다.