이미지 최적화를 통해 성능 향상이 얼마나 될까?

웹사이트의 절반 이상이 image를 로딩하는데 쓰고 있다.

Raster Image (jpeg , gif, png)

픽셀로 표현하는 방식

Vector Image (svg)

수학 방정식을 포함해 계산식으로 연산해 이미지 제공

무손실 이미지와 손실 이미지

무손실 이미지 : GIF, PNG

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

손실 이미지 : JPEG

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

1. 리사이징

Squoosh

리사이징을 통한 이미지 파일 최적화

2. 파일 형식 변환 (압축)

JPG, JPEG

• 높은 압축률 (손실이 생길 수 있음)
• 투명 배경 사용 불가
• 단조로운 컬러 팔레트

이미지 퀼리티가 크게 중요하지 않고 용량을 줄이는데 집중하고 싶을 때 사용합니다.

PNG

• 낮은 압축률
• 투명 배경을 사용 가능
• 풍부한 컬러 팔레트

이미지 퀼리티가 크게 중요할 때 사용합니다.

Webp

• 손실 없는 압축이 가능하면서도 엄청난 압축률
• PNG 처럼 투명 배경 지원, PNG 와 거의 동일한 품질의 컬러 팔레트 제공
• 구형 브라우저에서는 이 이미지 형식을 지원하지 않음

3. image-webpack-loader plugin 이용

1,2번과 달리 gif나 많은 이미지 일괄 압축 처리를 위해 webpack의 플러그인 사용

일단 이미지 압축 플러그인은 굉장히 다양함 .

아래 규칙을 webpack.config.js에 코드 추가

module: {
  rules: [
    {
      test: /\.(png|jpg|jpeg|gif|webp)$/i,
      loader: 'image-webpack-loader',
      enforce: 'pre',
    },
  ]
}

4. 브라우저 사이즈에 맞춰 제공

1. 태그의 srcset 속성 사용하기
2. 태그 사용하기
3. 이미지 lazy loading 사용하기 (다양한 라이브러리 존재함)

<img loading="lazy">

or

<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")
	}
}

참고 :
https://codingmoondoll.tistory.com/entry/프론트엔드-성능-최적화-4-이미지-파일-최적화
https://oliveyoung.tech/blog/2021-11-22/How-to-Improve-Web-Performance-with-Image-Optimization/