이미지 압축·크기 조절

이미지 압축·크기 조절 소개

이 압축기는 별도 코덱을 내려받지 않고 브라우저에 내장된 인코더(canvas.toBlob)로 이미지를 다시 저장합니다. 그래서 결과는 쓰는 브라우저에 따라 조금씩 다르고, 크롬에서 되던 AVIF가 다른 브라우저에서는 선택지에서 아예 사라지기도 합니다. 인코딩할 수 없는 포맷을 요청하면 브라우저가 조용히 PNG로 바꿔 저장해 파일이 오히려 커지기 때문에, 도구가 처음에 지원 여부를 확인해 목록에서 빼 둡니다.

파일을 넣으면 220px로 줄인 사본에서 투명 픽셀이 있는지, 색이 얼마나 다양한지 셉니다. 기본 추천은 WebP이고, 색이 극히 적은 로고·아이콘(샘플의 고유색 비율 3% 미만, JPEG 입력 제외)으로 판정되면 품질 탐색을 건너뛰고 92로 고정합니다. 사진은 35·45·55·65·75·85·95 일곱 단계로 실제 인코딩해 용량 곡선이 꺾이는 지점을 고릅니다.

사진과 스크린샷은 품질값을 다르게 잡는다

사진은 원래 노이즈와 미세한 질감이 많아서 JPEG·WebP가 버리는 고주파 정보가 눈에 잘 띄지 않습니다. 화면 표시용이면 WebP 70~80, JPEG 75~85 구간에서 대부분 차이를 찾기 어렵고, 도구의 기본값(WebP 80, JPEG 82, AVIF 55)도 이 범위에 맞춰 두었습니다. AVIF는 같은 숫자에서 화질이 더 높게 나오므로 품질값을 그대로 비교하면 안 됩니다.

스크린샷, 표, 코드 캡처는 반대입니다. 흰 바탕 위 검은 글자처럼 경계가 날카로운 곳에서 손실 압축은 글자 주변에 얼룩(링잉)을 만듭니다. 이런 이미지는 품질을 90 이상으로 두거나, 파일 크기가 문제되지 않는다면 PNG로 남기는 편이 낫습니다.

PNG 스크린샷을 JPEG로 바꿔도 별로 안 줄어드는 이유

PNG는 한 줄씩 옆·위 픽셀과의 차이를 계산하는 필터를 거친 뒤 deflate로 압축합니다. 단색 배경이 넓은 스크린샷은 차이값이 대부분 0이라 이미 매우 작게 압축돼 있습니다. JPEG는 8×8 블록마다 주파수 성분을 저장하는 방식이라 넓은 단색면에서 얻는 이득이 PNG만큼 크지 않고, 글자 경계를 지키려고 품질을 올리면 PNG보다 커지기도 합니다.

반대로 사진을 PNG로 저장하면 픽셀마다 값이 달라 필터가 효과를 못 보고, 같은 사진의 JPEG보다 몇 배 커지는 게 보통입니다. 이 도구가 PNG를 자동 추천하지 않고 수동 선택으로만 두는 것도 그 때문입니다. PNG를 고르면 품질 슬라이더는 비활성화됩니다.

빨간 글씨가 번지는 건 크로마 서브샘플링 때문

JPEG와 손실 WebP는 밝기와 색 정보를 나눠 저장하고, 사람 눈이 색 해상도에 둔감하다는 점을 이용해 색 정보를 가로세로 절반 해상도로 줄이는 경우가 많습니다(4:2:0). 사진에서는 거의 티가 안 나지만, 흰 바탕의 얇은 빨간 글씨나 파란 선은 색이 옆 픽셀로 번지고 가장자리가 탁해집니다.

브라우저 인코더는 서브샘플링 방식을 바꾸는 옵션을 주지 않으므로 이 도구에서도 조절할 수 없습니다. 색 글씨가 많은 배너나 도표라면 품질을 올려도 번짐이 완전히 사라지지 않을 수 있으니, PNG를 유지하거나 무손실 저장이 가능한 편집 프로그램을 쓰는 것이 현실적입니다.

용량을 줄이는 가장 큰 손잡이는 해상도

파일 크기는 대략 픽셀 수에 비례합니다. 4000×3000 사진을 가로 2000px로 줄이면 픽셀 수가 4분의 1이 되어, 품질을 85에서 60으로 내리는 것보다 대개 더 많이 줄면서 화면에서는 더 선명해 보입니다. 블로그나 메신저 전송용이라면 최대 크기에 1600~2560 정도를 넣고 품질은 높게 두는 조합을 먼저 시도해 보세요.

최대 크기 칸은 가로·세로 중 긴 쪽이 그 값을 넘지 않도록 비율을 유지해 줄이고, 원본보다 크게 키우지는 않습니다.

회전 정보와 메타데이터는 어떻게 되나

휴대폰 사진은 픽셀은 가로로 저장하고 EXIF에 「90도 돌려서 보여라」는 표시만 남기는 경우가 많습니다. 현재 브라우저는 이 표시를 적용해 이미지를 그리므로(CSS image-orientation 기본값 from-image), 캔버스를 거친 결과는 보이는 방향 그대로 픽셀이 굳어집니다.

대신 촬영 일시, 카메라 기종, GPS 좌표 같은 EXIF와 색 프로필은 결과 파일에 옮겨지지 않습니다. 위치 정보를 지우고 올리고 싶을 때는 장점이지만, 사진 정리 프로그램에서 촬영 날짜로 정렬해야 한다면 원본을 따로 보관해야 합니다. 원본에 EXIF가 있으면 도구가 빠진다는 안내를 띄웁니다. 아이폰 사진처럼 Display P3 같은 sRGB가 아닌 색 프로필이 들어 있으면, 프로필이 제거되어 sRGB로 바뀌면서 아주 선명한 빨강·초록 등의 색이 조금 달라질 수 있다는 경고도 함께 보여 줍니다.

크기 조절 모드: 정확한 픽셀이 필요할 때

크기 조절 탭은 압축 추천 없이 원하는 크기로만 다시 그립니다. 방식은 세 가지입니다. 「픽셀 지정」은 너비나 높이를 직접 넣고, 비율 고정을 켜 두면 한쪽만 넣어도 다른 쪽이 계산됩니다. 비율 고정을 끄고 4:3 사진에 1080×1080처럼 다른 비율을 넣으면 잘라내지 않고 늘이거나 눌러서 맞추므로 얼굴이 길쭉해집니다. 「비율(%)」은 슬라이더로 1~1000%를 고르고, 「최대 크기 맞춤」은 긴 변을 기준값(기본 1920) 이하로 줄이되 원본보다 키우지는 않습니다.

비율(%) 모드로 100%를 넘기면 확대가 되지만 없던 디테일이 생기지는 않고, 픽셀 수만 늘어 파일이 커집니다. 반대로 크게 줄일 때(예: 4000px을 300px로)는 한 번에 줄이지 않고 2000→1000→500→300px처럼 절반씩 단계적으로, 고품질 보간으로 축소해서 가는 선이나 촘촘한 무늬의 계단·물결무늬를 줄입니다. 출력은 JPEG·PNG·WebP 중에서 고르고, 파일명에 「이름-너비x높이」가 붙습니다. 투명 PNG를 JPEG로 저장하면 투명 부분은 흰색으로 채워집니다.

예시

사용 방법

1. 이미지를 끌어다 놓습니다(JPEG·PNG·WebP·AVIF, 200MB까지).
2. 추천된 포맷·품질을 확인하고 필요하면 슬라이더와 드롭다운으로 바꿉니다.
3. 용량이 더 필요하면 최대 크기를 입력해 해상도를 줄입니다.
4. 비교 슬라이더로 확대해 보고 내려받습니다.

자주 묻는 질문

관련 가이드

• 이미지 압축은 어떻게 작동하나: JPEG·PNG·WebP·AVIF의 원리
• PDF 압축률이 파일마다 다른 이유: 이미지·글꼴·스트림과 압축 필터