이미지 압축, 브라우저에서 바로.

이미지 압축은 실제로 어떻게 작동하나 — 그리고 티 안 나게 하는 법

압축이 파일을 줄이는 방식은 둘 중 하나입니다. 같은 픽셀을 더 영리하게 저장하거나, 눈이 애초에 알아채지 못할 디테일을 덜어내거나. 핵심은 둘 중 무엇이 일어나는지 아는 것입니다 — 앞의 방식은 공짜이고 뒤의 방식은 대가가 있기 때문입니다. 이 도구는 포맷과 품질이라는 두 개의 손잡이를 주고, 둘 다 브라우저 안에서 실행되므로 내 파일에서 용량이 변하는 걸 보며 조절하되 아무것도 업로드되지 않습니다.

손실 vs 무손실: 실제로 버려지는 것

무손실 압축은 똑같은 픽셀을 더 적은 바이트로 담도록 파일을 다시 쓰는 것입니다 — 버리는 것이 없고, 열었을 때 원본과 한 비트도 다르지 않습니다. 여기서 PNG가 그렇게 최적화되며, 절감은 실제로 있지만 대개 5~25% 정도로 완만합니다. 완벽하게 지켜야 하는 픽셀을 얼마나 촘촘히 담느냐에는 한계가 있기 때문입니다. 큰 폭의 감소는 손실 압축 — JPEG·WebP·AVIF 경로 — 에서 나옵니다. 눈이 가장 알아채기 어려운 디테일(미묘한 그라데이션, 미세한 노이즈, 사람 눈이 구분 못 하는 색 차이)을 버리기 때문에 50~80%가 흔합니다. 다만 손실 저장은 매번 조금씩 더 버리므로, 이미 한 번 압축한 파일이 아니라 항상 원본에서 압축하세요. 라인아트나 텍스트가 가득한 스크린샷처럼 한 톨의 변화도 허용할 수 없다면, PNG와 '원본 유지'에서 나타나는 무손실 토글을 켜세요.

품질은 어느 정도로 맞춰야 하나?

품질 슬라이더는 10부터 100까지이고 80에서 시작합니다. 높이면 디테일이 더 남고 파일이 커지며, 낮추면 그 반대입니다. 정답인 숫자는 없고, 이미지가 무엇이냐에 달렸습니다:

• 사진 — 80~85가 최적점으로, 원본과 눈으로 구별하기 어려우면서 용량은 훨씬 작습니다.
• 스크린샷·로고·텍스트·평면 UI — 90 이상을 유지하거나 무손실 포맷을 쓰세요. 낮은 품질은 또렷한 가장자리를 번진 얼룩으로 만듭니다.
• 썸네일·작은 미리보기 — 60~70이면 충분합니다. 200픽셀 이미지를 확대해 보는 사람은 없으니까요.
• 50 아래 — 약간의 블록 노이즈보다 용량 제한을 맞추는 게 더 중요할 때만.

슬라이더를 움직이면 모든 이미지가 곧바로 다시 처리되므로, 가장 빠른 방법은 차이가 겨우 보일 때까지 품질을 내렸다가 한 칸 되올리는 것입니다.

품질 슬라이더보다 포맷이 더 중요하다

가장 큰 지렛대는 옆에 붙은 숫자가 아니라 포맷일 때가 많습니다. 같은 체감 품질에서 WebP는 보통 JPEG보다 25~35% 작고, AVIF는 대개 그보다도 작습니다. 반대도 성립합니다 — 사진을 PNG로 저장하면 같은 사진의 WebP보다 몇 배 클 수 있는데, PNG는 연속 톤 사진이 아니라 가장자리가 뚜렷한 평면 그래픽을 위해 만들어졌기 때문입니다. '원본 유지'는 포맷을 그대로 두고, 특정 포맷을 고르면 압축하면서 변환합니다. 정말 가능한 한 작은 파일이 목표라면, 낡은 JPEG나 PNG에서 품질 슬라이더를 쥐어짜는 것보다 WebP나 AVIF로 바꾸는 편이 대개 낫습니다. 변환 도구는 같은 엔진에 포맷 선택을 전면에 둔 것이고, PNG를 WebP로 바꾸기 가이드가 실제 파일에서 용량 차이를 보여줍니다.

한 다발을 통째로 압축하기

폴더를 놓으면 모든 이미지가 같은 포맷과 품질로 압축되어 하나의 zip으로 함께 돌아옵니다 — 블로그 글 하나 분량의 사진이나 제품 카탈로그를 한 번에 처리할 때 유용합니다. 설정 하나가 전부에 적용되므로, 같은 처리를 원하는 이미지끼리 묶으세요 — 사진은 80으로 한 번, 스크린샷은 95로 또 한 번 돌리는 편이 둘에 같은 숫자를 강요하는 것보다 낫습니다. 아무것도 업로드되지 않으므로 200장짜리 다발도 내 기기에서 돌아가고, 서버 할당량이나 하루 제한이 아니라 오직 메모리에만 제약을 받습니다.

압축이 소용없을 때

어떤 파일은 더 내줄 게 별로 없습니다. 이미 품질 80으로 저장된 JPEG는 다시 80으로 압축해도 거의 얻는 게 없고 오히려 새 아티팩트가 낄 수 있습니다 — 절감 배지는 이를 정직하게 보여줘서, 파일이 실제로 커지면 −%가 아니라 +%를 표시합니다. 아이콘이나 200픽셀 썸네일 같은 작은 이미지는 이미 바닥에 가깝습니다. 그리고 '압축한' 파일이 여전히 무거운 가장 흔한 이유는 압축이 아니라 치수입니다 — 6000픽셀 휴대폰 사진은 바이트를 쥐어짜도 여전히 6000픽셀 사진입니다. 픽셀 수가 표시되는 크기보다 훨씬 크다면, 실제로 쓰는 폭으로 크기를 먼저 줄이고 — 대부분의 웹 레이아웃은 1600px면 충분합니다 — 그다음 압축하세요. 이미지가 필요 이상으로 클 때는 치수를 줄이는 쪽이 더 큰 이득입니다.

무거운 이미지를 처음부터 끝까지 줄이는 흐름은 이미지 파일 용량 줄이기에서, 픽셀을 하나도 잃지 않고 압축하는 법은 품질 손실 없이 압축하기에서 확인하세요.