🖼️ 웹 성능을 위한 이미지 압축 도구 정리 (TinyPNG & Squoosh)

프론트엔드 개발을 하다 보면 로딩 속도를 개선하기 위해 정적 이미지들을 최적화해야 할 때가 많다. 대표적인 무료 웹 도구인 TinyPNG와 Squoosh를 활용해 이미지를 간편하게 최적화해보자.
 

이미지 최적화를 해야 하는 이유?

단순하게는 페이지가 빠르게 로딩되어야 사용자 경험이 좋아지고 이탈률을 줄일 수 있기 때문이다. 또한 Google 같은 검색엔진은 로딩 속도를 중요한 평가 기준으로 삼기 때문에 검색 노출(SEO)에도 도움이 되며 사용자가 많아질수록 트래픽 비용 절감에도 효과적이다.

그럼 본격적으로 이미지를 최적화하는 방법을 알아보자.
 

1. TinyPNG

첫 번째로 소개할 사이트는 TinyPNG이다.

사용법은 굉장히 단순한데 메인 화면에서 이미지를 업로드하기만 하면 별다른 설정 없이 자동으로 압축이 진행된다.

동시에  20장까지 업로드할 수 있기 때문에 여러 이미지를 한꺼번에 압축할 때 유용하다.
 

2. Squoosh

두 번째로 소개할 사이트는 Squoosh이다. 구글에서 제공하는 웹 기반 이미지 최적화 도구로 미리 보기 화면을 통해 압축 전/후를 비교하거나 WebP 등 다양한 포맷 지원 및 압축률, 해상도 등의 상세한 설정이 가능하여 조금 더 정밀한 최적화가 가능하다.
 

WebP란?

Google이 개발한 이미지 포맷으로 기존의 JPEG, PNG, GIF를 대체할 수 있도록 만든 고효율 압축 이미지 포맷

단점이라면 여러 이미지를 업로드할 수 없기 때문에 한 장씩 일일이 변환해야만 한다.
 

정리

TinyPNG의 경우 API도 지원하기 때문에(부분 무료) 이미지 압축을 자동화하고 싶거나 빠르고 간단하게 압축하고 싶을 때 사용하는 것이 좋다.

반면 Squoosh의 경우 웹 환경에 맞게 PNG나 JPG를 WebP, AVIF 등 최신 포맷으로 변환하고 싶을 때 혹은 압축 전/후 품질을 실시간으로 비교하면서 세밀하게 조절하고 싶을 때 적합하다.