1. 이미지 형식 바꾸기
Webp 및 AVIF와 같은 이미지 형식은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량이 적습니다. 하지만 Webp를 지원하지 않는 브라우저가 있기 때문에 상황에 따라 WebP를 지원하면 WebP, 지원하지 않는다면 JPEG와 같은 다른 형식을 사용하도록 설정할 수 있습니다.
<picture>
<source srcSet="/images/example.webp" type="image/webp" />
<source srcSet="/images/example.jpg" type="image/jpg" />
<img src="/images/example.jpg" alt="example image" />
</picture>2. 이미지 크기 적절하게 설정하여 사용하기
필요한 이미지의 사이즈에 맞게 렌더링하여 데이터를 절약하고 로드 시간을 단축할 수 있습니다. 화면의 크기에 따라 이미지를 렌더링 하는 방법은 다음과 같습니다. srcset을 통해 브라우저에 제공할 이미지들의 목록과 사이즈를 정의하고 sizes를 통해 화면의 크기에 따른 이미지의 최적 크기를 정의합니다.
<img srcset="test-320.jpg 320w,
test-480.jpg 480w,
test-800.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="test-800.jpg" alt="test image"3. 이미지 요소에 width, height 설정하기
이미지의 width와 height를 설정해주면 레이아웃 변경 횟수를 줄이고 누적 레이아웃 변경을 개선할 수 있습니다. aspect-ratio를 사용하면 width값에 맞는 비율로 알아서 height를 결정합니다.
img {
width: 300px;
height: 300px;
}
img {
width: 300px;
aspect-ratio: 16/9
} 4. 이미지 Lazy Loading
화면에 보여지는 이미지만 불러오는 것을 말합니다. 페이지에 총 30개의 사진이 있지만 현재 화면에서 5개의 사진만 보여진다면 30개의 사진을 모두 불러올 필요가 없기 때문입니다. Lazy Loading을 위해서는 img태그가 제공하는 loading 속성을 lazy로 설정하면 됩니다. 지원하지 않는 브라우저의 경우 Intersection Observer API를 통해 이미지 요소를 감시하여 이미지를 로드하는 기법입니다.
5. 이미지 Pre Loading
이미지가 보여져야하는 상황이 오기 전에 미리 이미지를 불러와 로드를 앞당기는 기법입니다. 예를들어 버튼을 눌렀을 때 이미지를 보여줘야한다면 버튼에 hover 했을 때 이미 이미지를 불러온다면 클릭했을때 기다리지 않고 더 빠르게 이미지를 볼 수 있습니다.
const handleMouseOver = () => {
const image = new Image()
image.src ="test.jpg"
}
...
<button onMouseOver={handleMouseOver} onClick={handleClick}>이미지</button>