이미지 압축기

이미지 압축은 보이는 모습을 원본에 최대한 가깝게 유지하면서 차지하는 바이트 수를 줄이도록 다시 쓰는 작업입니다. 이 도구는 JPEG, PNG, WebP, AVIF 파일을 디코딩해 HTML canvas에 다시 그린 뒤, 더 낮은 품질이나 더 작은 해상도로 재인코딩합니다. 이 모든 과정은 브라우저에 내장된 이미지 API를 통해 사용자의 기기에서 이루어지므로, 10MB짜리 사진이라도 기기 밖으로 나가지 않습니다.

제공되는 방식은 네 가지입니다. 품질만, 크기만, 품질+크기, 그리고 목표 파일 크기이며, 마지막 방식은 지정한 KB 안에 들어올 때까지 여러 번 반복해 처리합니다.

픽셀 크기는 이미 용도에 맞는데 파일만 지나치게 무거울 때는 품질만을 선택합니다. 표시될 크기보다 훨씬 큰 이미지, 예컨대 800픽셀 칼럼에 넣을 4000픽셀짜리 카메라 원본에는 크기만이 더 알맞습니다. 썸네일을 한꺼번에 준비할 때처럼 과감하게 줄이고 싶다면 둘을 함께 씁니다.

업로드 상한이나 성능 예산 때문에 상한선이 정확히 정해져 있다면 목표 파일 크기가 제격입니다. 슬라이더를 감으로 움직이는 대신 원하는 수치를 입력하면 도구가 그 값에 맞춰 반복 조정합니다.

카메라 사진이 3.8MB, 4032×3024 픽셀로 저장되는데 페이지에서는 가로 1200픽셀로만 보여 준다고 해 봅시다. 품질+크기를 선택하고 너비 상한을 1200으로, 품질을 80% 정도로 맞춥니다. 결과 패널에는 새 파일 크기, 절약된 비율, 최종 해상도, 최적화를 몇 번 반복했는지가 표시됩니다. 3.8MB 언저리에서 시작한 파일이 300KB 아래로 떨어지는 경우가 많고, 90% 넘게 줄여도 실제로 보는 크기에서는 열화가 눈에 띄지 않습니다.

압축은 늘 절충의 문제입니다. 품질을 한 단계 낮출 때마다 되돌릴 수 없는 디테일이 버려지므로, JPEG, WebP, AVIF는 손실 압축이며 사진에 가장 잘 맞습니다. PNG는 무손실 압축이라 모든 픽셀을 정확히 보존해 로고, 스크린샷, 라인 아트에 어울리지만 그만큼 얼마나 작아질 수 있는지에는 한계가 있습니다. 같은 체감 화질이라면 WebP와 AVIF가 대체로 JPEG를 앞섭니다.

투명도도 유의하세요. PNG와 WebP는 알파 채널을 담지만, 투명한 이미지를 JPEG로 저장하면 비치는 영역이 단색 배경으로 채워집니다. 결과물이 원본보다 커질 것 같으면 도구가 이를 알려 주므로 원본을 그대로 둘 수 있습니다.