이미지 최적화

[hookor]

• 1 .이미지 폭을 조절.

• 2. 최적화된 이미지 포맷을 사용.

• 실사의 경우 jpeg, 그래픽 이미지의 경우 png가 압축시 용량 이점을 가짐.

• 서비스 고려 실사위주지만 jpeg의 경우 압축손실률이 높아 저품질의 이미지 제공 우려

• webp :웹사이트의 트래픽 감소 및 로딩 속도 단축을 겨냥한 것으로, 주로 사진 이미지 압축 효과가 높음

• 따라서 기존 png 저장 방식 => webp 저장으로 변경

• 3 .<img>에 width, height 값을 선언해 Reflow를 방지.

• Reflow: DOM요소의 크기나 위치 등을 변경하면 해당 노드의 하위 노드와 상위의 노드들을 포함하여 Layout 단계를 다시 수행

• 사이즈가 없는 이미지들은 reflow를 발생시켜 성능 저하

• 반응형의 경우 =>

• 다음과 같은 방식을 사용할 때 이미지가 다운된 이후에만 이미지를 위한 공간을 할당 가능 => 이미지 로딩 후 reflow

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

• 이를 방지하기 위해 aspect-ratio를 사용

• 4. 여러 버전의 이미지를 제공.

• 5. 이미지 크기 조절 툴을 사용.

• 6. Image CDNs을 사용.

• 7. CSS Sprite 기법을 사용.

• 서버로의 요청 횟수를 최소화(icon)

• 8. lazy loading을 활용.

• loading="lazy" 사용시

1. 영역의 크기에 대한 정보가 없으면, 브라우저는 해당 영역의 크기를 알 수 없어 해당 영역을 0x0으로 처음에 인식 =>
2. 만약 해당 이미지 영역으로 스크롤 할 경우 이미지가 로드 되면서 layout shift 발생가능, 해당 img 태그에 명시적으로 높이/너비 값을 지정

• 페이지의 첫 시작부터 보이는 이미지에 대해서는 lazy-loading을 사용X