이미지(데이터가 커서 웹에서 많은 비율 차지)를 통한 웹 성능 개선하기.
이미지 렌더링/로딩 개선으로 사용자 경험 향상.

1. 이미지 형식 결정하기

PNG - 무손실 압축을 사용하여, 최고 품질 이미지를 제공하지만 다른 형식에 비해 크기가 훨씬 큼.
JPEG - 손실 압축을 사용하여, PNG에 비해 용량 작음
WebP - 구글에서 2010년 발표한 JPEG보다 더 나은 압축과 더 많은 기능 제공(범용성 up)
AVIF - AOMedia에서 2019년 발표, WebP와 유사하게 높은 압축률.

WebP를 지원하지 않는 브라우저 -> JPEG
WebP를 지원하는 브라우저 -> WebP

2. 적절한 크기의 이미지 사용하기

적절한 크기의 이미지를 게제하여 데이터 절약 및 로드 시간 단축

반응형 이미지 제공하기.
Image CDN 사용하기.

3. CLS(누적 레이아웃 변경) 개선

CLS란 - 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화하고, 시각적 안정성을 나타내는 지표.

CLS 개선 - width및 height 명시, aspect-ratio(세로/가로 비율) 사용
브라우저에게 이미지의 공간을 알려, 레이아웃이 바뀌는 상황을 막음.

4. 이미지 Lazy Loading

문제 - 화면에 안보이는 이미지까지 한번에 Load
LazyLoading이란 - 스크롤에 내려감에 따라 이미지 Load
Loading 속성 사용(Loading="lazy") - 지원안하는 브라우저도 있음.
Intersection Observer API 사용

5. 이미지 Pre Loading

문제 - 고해상도 이미지를 로드할 때 버벅이거나 느림.
PreLoading이란 - 미리 이미지 Load
ex) 마우스 커서를 버튼 위에 올렸을 경우, 이미지 Preload