이미지 최적화 (WebP/AVIF & Lazy Loading)

이미지 최적화 (WebP/AVIF & Lazy Loading) → 웹 성능에서 가장 큰 비중을 차지하는 요소는 이미지임. 최신 브라우저는 WebP, AVIF 같은 차세대 이미지 포맷을 지원하므로, JPG/PNG보다 훨씬 작은 용량으로 같은 화질을 제공할 수 있음. 또한 loading="lazy" 속성을 이용하면 화면에 보이지 않는 이미지는 스크롤할 때 불러와 페이지 초기 로딩 속도를 크게 개선할 수 있음.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="예시 이미지" loading="lazy" width="600" height="400">
</picture>
 

<picture> 요소를 사용하면 브라우저가 지원하는 최적의 포맷을 자동 선택

loading="lazy" 속성은 크롬, 파이어폭스, 사파리 최신 버전에서 기본 지원

width/height 속성을 명시하면 CLS(레이아웃 시프트) 문제도 예방 가능

필요시 CDN이나 gulp-imagemin 같은 빌드 툴로 자동 압축 처리 가능

이렇게 적용하면 페이지 속도 점수가 확 달라지고, 트래픽 절약 효과도 큼.