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

이미지 용량은 페이지 로딩 속도에 직접적인 영향을 미치며 특히 LCP(Largest Contentful Paint) 지표와 밀접하게 연관된다.

불필요하게 큰 이미지는 초기 렌더링을 지연시키고 사용자 이탈률을 높일 수 있기 때문에 적절한 압축과 포맷 변환이 필요하다. 이에 유용한 두 가지 도구를 소개한다.

1. TinyPNG

첫 번째로 소개할 사이트는 TinyPNG이다. 지능형 손실 압축 기술을 활용하여 이미지 품질 저하를 최소화하면서도 파일 용량을 획기적으로 줄여주는 웹 기반 이미지 최적화 서비스이다.

PNG, JPEG, WebP는 물론 최신 고효율 이미지 포맷인 AVIF까지 압축 및 변환을 지원하며 별도의 설정값을 조정하지 않아도 드래그 앤 드롭만으로 최적의 압축 알고리즘이 자동 적용되어 사용이 매우 간편하다.

또한 REST API를 제공하기 때문에 이미지 최적화 자동화 시스템을 구축하기 용이하며 이미지 압축뿐만 아니라 가로/세로 비율에 맞춘 리사이징 기능도 함께 제공한다.

웹 무료 버전 기준으로 한 번에 최대 20장의 이미지를 업로드할 수 있으며 파일당 최대 5MB까지 지원한다. 사용 횟수 제한은 없지만 압축률을 사용자가 직접 미세하게 조정할 수 없고 개별 파일 용량 제한이 존재한다. 대신 사용 방법이 매우 간단하고 여러 이미지를 동시에 처리하기에 효율적이다.

2. Squoosh

두 번째로 소개할 도구는 Squoosh이다. TinyPNG와 달리 압축 알고리즘과 이미지 품질을 사용자가 직접 미세하게 조정할 수 있는 고성능 이미지 최적화 도구이다.

WebAssembly 기술을 활용하여 브라우저 내부에서 복잡한 압축 알고리즘을 네이티브 애플리케이션 수준의 속도로 실행하며 이미지를 서버에 업로드하지 않고 사용자의 브라우저 환경에서 직접 처리한다. 따라서 개인정보 보호가 중요한 환경이나 기업 내부 보안 이미지 처리에 적합하다.

또한 PWA를 지원하여 한 번 접속하면 오프라인 상태에서도 이미지 압축 기능을 사용할 수 있다.

화면 중앙의 슬라이더를 통해 원본 이미지와 압축 후 이미지를 픽셀 단위로 비교할 수 있으며 WebP와 AVIF는 물론 고성능 JPEG 인코더인 MozJPEG까지 지원하여 세밀한 품질 조정이 가능하다.

다만 웹 인터페이스에서는 한 번에 한 장의 이미지만 처리할 수 있어 대량의 이미지를 동시에 최적화해야 하는 상황에는 다소 비효율적이다. 이러한 경우에는 CLI 도구를 활용하거나 서드파티 서비스인 'Bulk Squoosh'를 통해 보완할 수 있다.