[면접] 이미지 최적화

[Hah-nna]

이미지 최적화

이미지 최적화가 필요한 이유를 말해주세요

이미지의 용량은 다른 콘텐츠에 비해서 높은 편입니다 이미지를 많이 활용하는 웹사이트라면 이미지를 적절하게 조절하고 최적화하면 렌더링 성능이 빨라지고, 사용자들의 이탈률이 낮아지기 때문에 필요합니다

이미지 최적화 방법에 대해서 설명해주세요

1. 브라우저 사이즈에 맞춰 적절한 크기의 이미지 제공 브라우저 사이즈에 맞게 브레이크 포인트를 걸어 과도한 리소스를 사용하지 못하도록 하게 합니다 미디어 쿼리와 img 태그의 srcet 속성을 사용해서 브레이크 포인트를 걸 수 있습니다

• 미디어 쿼리 사용 미디어 쿼리를 사용해 브라우저 사이즈나 호버 상태 여부 등 다양한 조건에 따라서 다른 스타일을 적용할 수 있습니다 이를 사용해 브라우저 사이트에 따라서 이미지 크기에 브레이크 포인트를 걸어 최적화를 할 수 있습니다

.image-box {
  max-width: 100%;
  width: 400px;
  height: 400px;
  background-image: url(./small.png);
  background-repeat: no-repeat;
  background-size: contain;
  padding: 10px
}

@media (min-width: 401px) {
    .image-box {
    width: 700px;
    height: 700px;
    background-image: url(./midium.png);
  }
}

@media (min-width: 701px) {
    .image-box {
    width: 1000px;
    height: 1000px;
    background-image: url(./large.png);
  }
}

• img 태그의 srcset 속성
  • srcset는 다양한 크기를 가지는 동일 이미지를 명시하는 속성을 말합니다
  • 단위는 px가 아니라 w 디스트럽터 혹은 x 디스크립터, 작은 크기의 이미지부터 순서대로 입력해야함
  • size 속성은 미디어 조건과 그 조건에 해당하는 이미지의 최적화 출력 크기를 지정함
  • 익스플로러는 지원하지 않음

<img 
   srcset="./small.png 400w,
           ./medium.png 700w,
           ./large.png 1000w"
   sizes="(max-width: 401px) 400px,
          (max-width: 700px) 7000px,
          1000px"
   src="./large.png"
/>

2. lazy loading 사용자가 처음부터 보이지 않는 부분을 초기 렌더링 시 로드하게 되면 정작 사용자가 보이는 화면의 로딩 시간이 지연되게 됨 화면 밖의 콘텐츠들을 Above the fold라고 하고 이런 이미지들은 lazy loading을 사용해 사용자 경험 저하를 막을 수 있음

// 태그 자체에서 지원하는 레이지 로딩
<img loading="lazy">

// 자바스크립트를 활용해 레이지 로딩을 하는 방법

<img src="1px.gif" data-src="book.jpg" onload="loadReal(this)"/>

function loadReal(img) {
    if(img.style.display != "none"){
        img.onload = null;
        img.src = img.getAttribute("data-src")
    }
}

img 태그에서 지원하는 loading은 아직 비표준이기 때문에 자바스크립트를 이용한 방법 추천

3. Image CDN 사용 이미지 CDN을 사용하면 이미지 다운로드 속도를 40~80% 줄일 수 있다고 함 또한 HTTP 캐시를 사용해 이미지 캐싱이 가능해지게 됨 단 이런 CDN을 활용한 캐시는 삭제가 쉽지 않아 적절한 캐시 컨트롤과 max-age를 통해 제어하는 것이 필요함

4. CSS Image Sprite Sprite Image는 여러 개의 이미지를 하나로 합친 것을 말함 첫 페이지의 로딩 속도를 줄여주는 가장 대표적인 방법 Sprite Image를 사용하면 10번 요청할 이미지 요청을 1번으로 줄일 수 있고 트래픽을 절약할 수 있음 ex: 아이콘이나 버튼 등의 이미지들을 하나로 합쳐 position으로 이미지들을 사용하는 것

.img-box {
  background: url(/img/imgSet.png) no-repeat;
}

.img-box > .a {
  background-position: 0 0;
}
.img-box > .b {
  background-position: 0 -15px;
}
.img-box > .c {
  background-position: 0 -30px;
}

이미지 최적화 방법 중 사용해본 것이 있나요?

앞서 말했던 방법들 중에서는 미디어 쿼리를 사용해 모바일, 태블릿, pc일 때 이미지 크기를 조절하여 최적화보았습니다. 그리고 다른 방법으로는 이미지를 업로드할 때 이미지 압축 라이브러리를 사용해 이미지 크기를 줄여 로딩 속도를 줄인 적이 있습니다