이미지 아무거나 쓰지 말자: 이미지 최적화

HTTP 아카이브 연구에 따르면 평균 웹사이트의 반 이상이 이미지로 이루어져 있고 이미지의 용량이 다른 콘텐츠에 비해 월등히 높은 것을 확인할 수 있습니다. 이미지의 사이즈를 줄이고 렌더링 속도를 빠르게 한다면 웹사이트의 렌더링 성능이 더욱더 빨라지겠죠? 

 

이미지 종류 

레스터 이미지: 여러 픽셀이 모여 하나의 이미지 생성

ex) JPEG, PNG, GIF 

픽셀이 커질수록 이미지의 용량도 늘어나고 렌더링 속도도 현저히 떨어지게 됩니다. 

벡터 이미지: 이미지 안에 수많은 수학 방정식 포함 

ex) SVG

사이즈가 커지거나 작아져도 이미지가 깨지거나 정보가 달라지지 않습니다. 

다만 이미지가 복잡할수록 수학적인 정보가 늘어나 용량 또한 같이 늘어나게 됩니다. 

무손실 이미지: 원본 이미지에서 이미지를 렌더링하는데 필요하지 않은 정보들을 제거한 이미지 

ex) GIF, PNG

손실 이미지: 무손실 이미지의 화질 감소를 감수하면서도 사이즈를 줄여 빠른 렌더링을 할 수 있는 이미지 

ex) JPEG, 페이스북 이미지의 85%

 

이미지 선택 

항상 좋은 이미지 타입이 있다면 이걸 공부하는 이유가 없겠죠.. 

상황에 맞는 이미지 타입을 선택해야 합니다!

화질이 중요한 배너 이미지나 메인 이미지 -> 손실이 적은 이미지 

화질과 상관없는 이미지 -> 손실률이 높지만 용량이 작은 이미지 

 

WebP: 구글이 개발한 차세대 이미지 포맷

손실 압축과 비손실 압축 전부 지원(=고화질 유지 / 용량 줄이기 둘 다 가능)하고 VP8이라는 비디오 코덱 기술을 기반으로 한 영상압축 방식을 사용하며 파일크기를 25%~35% 정도로 압축할 수 있는 이미지 포맷입니다. 

 

AVIF: 2017년 AOMedia에서 개발한 이미지 포맷

손실 압축과 비손실 압축을 전부 지원하기 때문에 WebP과 마찬가지로 GIF, PNG, JPEG 등의 상용 이미지 포맷을 대체할 수 있습니다. 압축 효율이 WebP보다 뛰어나지만 최신 포맷인 만큼 낮은 범용성으로 브라우저 지원율이 아직은 많이 낮습니다. 

 

이미지 최적화 방법

데스크탑의 이미지는 모바일 이미지보다 상대적으로 용량이 클 수밖에 없는데요, 그렇게 되면 사용자는 필요 이상의 이미지를 다운받게 되어 리소스가 낭비될 수 있습니다.

그래서 브라우저 사이즈에 맞게 적절한 브레이크 포인트를 설정하여 과도한 리소스를 사용하지 못하게 해야합니다. 

 

- 미디어 쿼리 활용

화면 크기나 환경에 따라 다른 스타일 적용 가능 

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

 

- <img> 태그의 srcset 속성 사용 

srcset은 동일한 이미지의 다양한 크기를 브라우저에 알려주고, 상황에 맞게 적절한 이미지를 선택하도록 하는 속성입니다. 

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

 

- <picture> 태그 사용

브라우저 상태에 따라 낮은 해상도가 선택되거나 비율이 다른 이미지를 쓸 때 이미지가 깨지는 문제가 생길 수 있기 때문에 <img>만으로는 모든 상황을 완벽하게 제어하기가 어렵습니다. 

<picture> 태그는 조건에 맞지 않는 이미지는 다운로드 하지 않아서 성능 측면에서 유리하지만 코드가 길어지는 단점이 있습니다. 

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

 

- 이미지 Lazy Loading

사용자에게 바로 보이는 영역만 먼저 로드하고, 나머지는 나중에 불러오는 방식입니다. 

// 태그 자체에서 지원하는 lazy loading
<img src="image.jpg" 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")
	}
}

처음에 1px짜리 투명한 파일 보여주고 필요할 시점에 data-src 이미지로 교체합니다.

 

- 이미지 CDN 

이미지 최적화와 전달 담당 서버로, 이미지 로딩 속도를 줄이고 URL만으로 다양한 크기의 이미지를 요청합니다. 

CDN (Content Delivery Network): 물리적 거리의 한계를 극복하기 위해 소비자와 가까운 곳에 컨텐츠 서버를 두는 기술 

https://velog.io/@ses2201/%EC%9D%B4%EB%AF%B8%EC%A7%80-CDN%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4-%EC%84%B1%EB%8A%A5%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0-feat.-Properly-size-images

내가 직접 프로젝트에 적용해본, 이미지 CDN을 사용해 성능최적화하기 (feat. Properly size images)

 

- CSS Sprite

여러 이미지를 하나로 합쳐서 사용하는 방식입니다. (아이콘처럼 작은 이미지가 많을 때 효과적인 방법) 

// 이미지를 하나로 합치고 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;
}

 

- Placeholder 제공 (CLS 방지) 

웹사이트 보다보면 이미지가 늦게 로드되면서 처음에는 빈공간이었다가 갑자기 영역이 커지면서 레이아웃이 밀리는 경우가 있죠? 

이런 CLS 현상을 방지하기 위해 placeholder를 사용하여 이미지가 아직 로드되지 않았더라도 미리 해당 영역의 크기를 확보해둡니다. 

import Image from 'next/image';

export default function Example() {
  return (
    <Image
      src="/images/sample.jpg"
      alt="example"
      width={800}
      height={500}
      placeholder="blur"
    />
  );
}

 

 

참고 + 기업의 이미지 최적화 방식:

https://oliveyoung.tech/2021-11-22/How-to-Improve-Web-Performance-with-Image-Optimization/

웹사이트 최적화 방법 - 이미지 파트 | 올리브영 테크블로그

https://tech.kakao.com/posts/586

FE 성능개선기 1부: 주문하기 - tech.kakao.com

https://tech.kakaoent.com/front-end/2022/220714-next-image/

Next/Image를 활용한 이미지 최적화 | 카카오엔터테인먼트 테크블로그