웹 성능 최적화를 위한 이미지 처리 방법
웹사이트의 시각적 매력을 높이는 중요한 요소인 이미지는 성능 병목현상의 주요 원인이 된다. 이미지 파일 크기가 크고, 이로 인해 Largest Contentful Paint(LCP)가 지연될 뿐 아니라, 제대로 처리하지 않으면 Cumulative Layout Shift(CLS)에도 문제를 일으킬 수 있다. 특히, 개발자들이 종종 이미지 최적화를 간과하곤 한다.
1. 올바른 이미지 포맷 선택
이미지 포맷 선택은 파일 크기와 로딩 속도에 큰 영향을 미친다.
- JPG: 색상과 그라데이션이 많은 사진에 적합하며, 손실 압축을 사용해 파일 크기를 줄인다.
- PNG: 그래픽, 로고 및 투명도에 적합하며, 무손실 압축을 사용하지만 파일 크기가 클 수 있다.
- WebP: JPG와 PNG보다 작지만 높은 품질을 유지한다.
- AVIF: WebP보다 더 나은 압축을 제공하지만 아직 모든 브라우저에서 지원되지 않는다.
기본적으로 사진에는 JPG, 그래픽에는 PNG를 사용하고, 가능하다면 현대 브라우저에선 WebP나 AVIF를 선택하는 것이 좋다.
2. 반응형 이미지 사용
사용자의 화면 크기가 일괄적이지 않기 때문에, 반응형 이미지는 디바이스에 맞춘 이미지 크기를 제공하여 불필요한 다운로드를 줄이고 로딩 시간을 개선한다. <img> 태그 대신 <picture>, srcset, sizes 속성을 사용해 특정 조건에서 로드할 이미지를 브라우저에 알려줄 수 있다.
3. 아래쪽 이미지는 지연 로드
페이지의 모든 이미지를 즉시 로딩하면 성능이 저하된다. 지연 로딩을 통해 이미지를 보기 직전에 다운로드를 연기할 수 있다. <img> 태그에 loading="lazy"를 추가하고, 항상 높이와 너비 속성을 지정하여 레이아웃 변경을 방지해야 한다.
중요한 이미지는 fetchpriority="high"를 사용해 브라우저가 즉시 로드하게 할 수 있다.
4. CDN을 통한 이미지 제공
콘텐츠 전송 네트워크(CDN)는 전 세계 여러 위치에 이미지를 저장하고, 가장 가까운 서버에서 빠르게 전달하여 로드 속도를 개선하고 대역폭 비용을 줄인다. CDN은 종종 최신 HTTP 프로토콜, 예를 들어 HTTP/3을 사용하여 성능을 크게 향상한다.
5. HTTP 캐싱 헤더
HTTP 캐싱 헤더는 반복 방문자가 이미지를 더 빠르게 로드할 수 있도록 브라우저가 로컬에 캐시를 저장하도록 지시한다. 적절한 캐싱은 모든 정적 자산의 속도를 높인다.
요약
이미지는 웹 성능을 개선할 수 있는 막대한 기회를 제공한다. 올바른 포맷 선택, 효율적인 압축, 지연 로딩, CDN과 현대 프로토콜을 활용하면 사이트 속도를 대폭 향상시킬 수 있다.
출처 : 원문 보러가기