개요

성능 최적화 - 이미지 두 키워드는 현대 사이트에서 빼놓을 수 없는 내용입니다. 웹 사이트에서 가장 많은 부분을 차지하는 이미지 요소를 최적화 한다는 것은 한명 한명의 유저가 소중한 Ypet 에서도 꼭 적용 되어야할 부분인것 같습니다. 잡설이 길었습니다. 본격적으로 이미지 최적화에 대해 알아보겠습니다.

차세대 이미지형식 사용

기존 PNG,JPG에서 벗어나 Webp,AVIF와 같은 이미지 형식을 사용해 리소스량을 줄일 수 있습니다.

• PNG : 무손실 압축을 사용하며, 최고 품질 이미지를 제공하지만 다른 형식에 비해 크기가 크다.
• JPG : 손실 압축을 사용하여, PNG에 비해 용량이 작다.
• WebP : 구글에서 2010년에 발표, JPEG보다 더 나은 압축과 더 많은 기능을 제공한다.
• AVIF : AOMedia에서 2019년 발표, WebP와 유사하게 높은 압축률을 자랑한다.

이미지 크기 차이

JPG -> WebP(35% 크기 절약) -> 더 낮은 품질 WebP(60%)

WebP 가 지원 되지 않는 브라우저

<picture>
  <source srcSet="cat.webp" type="image/webp" />
   <source srcSet="cat.jpg" type="image/jpg" />
  <img src="cat.jpg" alt="코치고양이" />
</picture>

반례:)https://techit.kr/view/?no=20200701213803

• 1000px이상의 대형 이미지의 경우 WebP의 장점이 사라진다
• AVIF의 경우 1000px이상의 이미지 또한 뛰어난 압축률을 자랑하지만 아직은 생소하고 낯선 규격이다.

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

100 x 100(가로,세로) 이미지

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
     // srcset = 브라우저 조건
  sizes="(max-width: 600px) 480px,
         800px" // 미디어조건
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

CLS 개선하기

CLS란? 사용자가 예상치 못한 레이아웃 변경을 수치화 하고 시각적 안정성을 나타내는 지표로 사용 됩니다.

API 호출로 인한 잦은 로딩창, 불러오기 전까진 위치가 안잡혀있는 이미지 등이 있습니다.

이것을 개선하는것은 가장 쉽습니다. 고정 높이 고정 너비를 지정해주면 됩니다.

이미지 Lazy Loading

만약 50개의 이미지를 로딩 하는 페이지가 있다면?
한번에 로딩하는 것 보다 현재 페이지 내에 보이는 이미지만 로딩하는 방향으로 진행하는 것이 좋습니다.

이미지 Pre Loading

대표 이미지 접기/보이기 페이지가 있다면 대표 이미지가 보이기전 해당 버튼에 마우스를 올렸을때 미리 로딩한다면 보다 좋은 UX가 될것입니다. 사소한 차이지만 사용자 경험엔 아주 큰 영향을 끼치게 됩니다.