서비스의 속도를 빠르게 :: 이미지 최적화

https://web.dev/fast/#optimize-your-images 를 참고하여 요약한 블로그 글입니다.*

도입

서비스의 속도는 UX에 영향을 미치고, UX는 곧 사용자의 유입을 결정한다. 서비스 속도 개선에는 다양한 최적화가 필요한데, 이번에는 이미지 최적화를 살펴보자.

 

이미지 종류

이미지는 2가지 종류로 구분할 수 있다.

• vector 이미지
• raster 이미지

vector 이미지는 선, 점, 면 등의 벡터적 요소를 사용하여 이미지를 표현하는 방식이며, 간단한 기하학 모양 (로고, 글자, 아이콘 등)을 나타내는 데에 적합하다. vector 이미지는 사이즈에 따른 깨짐 없이 이미지를 전달할 수 있다는 장점이 있지만, 표현해야 하는 모양이 복잡할 경우 데이터 양이 많아진다는 단점이 있다.

raster 이미지는 흔히 듣는 png, jpeg, webp 등의 포맷을 갖는 표현 방식이다. pixel 단위로 이미지 데이터를 encoding 하며, 사이즈에 따라 이미지가 깨지므로 이를 방지하기 위해 다양한 사이즈의 이미지를 준비해야 하는 불편함이 있다.

• raster 이미지의 구분은 lossy filter 과정과 lossless filter 과정에서 어떤 알고리즘을 사용하는 지에 따라 이루어진다.
  • lossy filter : pixel data를 없애는 이미지 압축 방법
  • lossless filter : pixel data를 소멸 없이 압축하는 이미지 압축 방법

 

꿀팁

1. GIF는 video element로 표현할 수 있다.

<video autoplay loop muted playsinline></video>

video tag의 autoplay(자동 재생), loop, muted 속성을 이용하면 GIF와 같이 표현 가능하다. source는 webm ⇒ mp4로 기재하여 fallback 시 mp4를 사용하도록 처리할 수 있다.

> gif의 포맷 변경은 https://www.ffmpeg.org/ 에서 가능하다.

 

2. 간단한 모양은 vector format인 svg를 활용하자.

 

3. svg assets은 불필요한 정보를 담고 있으므로 압축하자.

> SVGO 를 통해 가능하다.

 

4. webp는 다른 raster format보다 낫지만, 하위 브라우저에서 지원하지 않을 수도 있다.

> raster 이미지는 cwebp나 imagemin 플러그인을 사용하여 convert 할 수 있다.

 

5. 반응형 이미지는 브라우저에게 미리 정보를 주자.

<img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">​

srcset은 이미지 파일명 width가 comma로 이어져 있고, 브라우저에게 어떤 이미지가 어떤 width를 가지고 있는지 설명해준다. 이는 브라우저가 해당 이미지의 사이즈를 알기 위해 이미지를 다운로드하지 않아도 되도록 해준다.size와 srcset 속성이 없으면 fallback으로 src 속성을 찾아 이미지를 다운로드한다.

size 속성은 이미지가 표시될 때 얼마나 넓게 표시되어야 할 지를 나타낸다. css는 여전히 필요하고 size 속성이 너비를 결정하는 것은 아니지만, 브라우저가 해당 속성을 이용하여 어떤 이미지가 load되어야 하는지 결정한다.

 

6. cdn은 쉽게 생각해서 이미지를 최적화하고 변환하고 전달해주는 api 콘텐츠를 사용자와 가까운 곳에서 전송해주는 서버이다.

 

7. 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지 스프라이트 기법도 있다.

 

측정

이미지 최적화에 대한 측정은 lighthouse로 가능하다.

efficiently encode images 항목을 보거나 lighthouse > options > performance에서 resize 되어야 할 이미지들의 목록을 볼 수 있다.

 

 

 부정확한 정보가 담겨있을 수 있습니다! 

 댓글로 알려주세요 :)