😲 이미지 최적화 이유?

• 웹 페이지 바이트 절약 → 성능 향상
• 다운로드 해야하는 바이트 줄어듬 → 클라이언트 대역폭에 여유 생김
• 콘텐츠를 더 빨리 다운로드하여 화면 렌더링 → 최적의 사용자 경험
• 서버 공간이 적게 필요
• SEO 순위 결정 시, 모바일 응답성을 고려하여 검색 상위 노출이 가능

😲 이미지 최적화 방법론

이미지 폭을 조절한다.

• 1000px 이상은 넘지 않도록 하는게 좋다.

최적화된 이미지 포멧을 사용한다.

• JPG - 카메라로 실제 찍은 사진
• PNG - 디자인 툴을 사용해서 만든 이미지
• JPEG - 손실이 많은 압축 디지털 이미지를 만드는 데 사용하는 압축 방법
• WebP - 구글이 2010년 발표한 포맷으로 파일 크기를 줄이기 위해 손실 없는 압축과 무손실 압축을 모두 사용하고 있다. 웹 사이트의 트래픽 감소 및 로딩 속도 단축을 겨냥한 것으로, 주로 사진 이미지 압축 효과가 높은 것으로 알려져 있다.
• AVIF - 이미지 포맷으로 손실 압축과 비 손실 압축을 전부 지원하기 때문에 GIF, PNG, JPEG등의 사용 이미지 포멧을 대체할 수 있다. 애니메이션 기능이 있어 움짤로 쓸 수 있고, 압축 효율이 뛰어나다는 점에서 WebP와 유사함

브라우저 지원 상황에 따라 AVIF → WebP → png → jpeg 순으로 사용한다. (용량 적은 순임)

<picture>
  <source srcset="supercar.avif" type="image/avif" />
  <source srcset="supercar.webp" type="image/webp" />
  <img src="supercar.jpeg" alt="Fast red car" />
</picture>

<img>에 width & height 값을 선언에 리플로우 방지하자.

치수가 없는 이미지들은 리플로우를 발생시켜 퍼포먼스를 저하시키기 때문에, 이를 해결하기 위해 이미지 및 비디오 요소에 width와 hgieht 속성을 항상 포함하거나 CSS를 사용해서 필요한 공간 aspect-radio를 잡는다.
이 방법을 사용하면 이미지가 로드되는 동안 브라우저가 문서의 공간을 올바르게 할당할 수 있다.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

💡 **Reflow(리플로우)** 어떤 액션이나 이벤트에 의해 DOM 요소의 크기나 위치 등을 변경하면 해당 노드의 하위 노드와 상위 노드를 포함하여 레이아웃 단계를 다시 수행하게 된다. HTL 요소들의 위치와 크기 등 재계산을 해야하기 때문에 브라우저의 퍼포먼스르를 저하시키는 요인이다.

여러 버전의 이미지를 제공한다.

여러 이미지 버전을 지정하면 브라우저에서 사용하기에 가장 적합한 버전을 선택한다.

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"     
  sizes="(max-width: 500px) 444px,
         (max-width: 800px) 777px,
         1222px"
  src="images/heropy.png"
  alt="HEROPY" />

srcset

• 같은 비율의 다양한 크기를 가지는 동일 이미지들은 최소 2개 이상 명시하는 속성
• srcset 보다는 미디어쿼리를 사용하는게 보다 명시적임
• 이미지 파일명 + width | density 설명을 쉼표로 구분한다.
• 480w - 480px 임을 브라우저에게 말해준다. → 너비를 명시하려면 px 단위 대신 w 단위를 사용

size

• 이미지가 표시될 때 너비를 설정한다.

이미지 크기 조절 툴을 사용하자.

Image CDN을 사용하자

CSS Sprite 기법을 사용하자

Lazy Loading을 활용하자

---

Reference

웹 성능을 위한 이미지 최적화

JavaScript | Reflow 란 (feat. 브라우저 렌더링)