생활 · 이미지 용량 줄이기
4032×3024 사진을 긴 변 1600px로 줄이면 픽셀 84% 감소: 업로드 전 이미지 용량 줄이기의 기준값
작성
한눈에 보기
- 기본값 긴 변 1600px·품질 80%·JPG: 4032×3024 사진이 1600×1200으로, 화소 수 84% 감소
- 800px은 96%, 1200px은 91%, 2048px은 74% 감소. 용량은 대체로 화소 수에 비례
- 변환은 브라우저 canvas 안에서 끝나 업로드가 없고, EXIF 촬영 정보·위치가 함께 제거됨
게시판 첨부 제한 5MB, 메신저 원본 전송 경고, 이력서 사진 크기 제한. 사진을 줄여야 할 때마다 어디에 올려서 줄이기가 찜찜합니다. 이미지 용량 줄이기는 사진을 서버로 보내지 않고 브라우저 안에서 리사이즈·압축해 내려받게 합니다. 기본값인 긴 변 1600px, 품질 80%, JPG가 무엇을 하는지 코드를 따라가며 정리했습니다.
리사이즈가 용량의 대부분을 결정한다
용량을 줄이는 요인은 두 가지, 화소 수와 압축 품질입니다. 이 중 화소 수가 압도적입니다. 요즘 폰 사진은 4032×3024, 1,220만 화소인데 긴 변을 1600px로 맞추면 1600×1200, 192만 화소로 줄어듭니다. 화소가 84% 사라지니 같은 품질이라도 용량이 그만큼 줄어듭니다.
| 긴 변 설정 | 4032×3024 사진 | 화소 수 | 화소 감소 | 용도 |
|---|---|---|---|---|
| 800px | 800×600 | 48만 | 96% | 채팅·썸네일 |
| 1200px | 1200×900 | 108만 | 91% | 블로그 본문 |
| 1600px (기본) | 1600×1200 | 192만 | 84% | 웹 일반 |
| 2048px | 2048×1536 | 315만 | 74% | SNS 원본급 |
| 원본 유지 | 4032×3024 | 1,220만 | 0% | 압축만 |
계산은 단순합니다. 긴 변 기준 비율(1600 ÷ 4032 = 0.397)을 가로세로에 똑같이 곱하고 반올림합니다. 원본이 설정값보다 작으면 비율을 1로 고정해 키우지 않습니다. 1920×1080 스크린샷을 2048px로 설정하면 그대로 1920×1080이 나오는 이유입니다.
품질 80%는 무엇을 뜻하나
리사이즈한 그림을 canvas의 toBlob에 품질 0.8로 넘겨 JPG로 인코딩합니다. JPG 품질은 눈에 안 띄는 고주파 성분을 얼마나 버릴지의 정도라서 90%에서 80%로 내리면 화질 차이는 거의 없는데 용량은 눈에 띄게 줄고, 60%부터 그라데이션과 글자 가장자리에 얼룩이 보이기 시작합니다. 그래서 기본값이 80%입니다. 선택지는 60·75·80·90%입니다.
JPG·WebP·PNG 고르기
형식은 사진이면 JPG, 더 작게 줄이려면 WebP, 투명 배경이나 UI 스크린샷처럼 선이 또렷해야 하면 PNG입니다. PNG는 무손실이라 품질 값이 무시되고, 사진을 PNG로 저장하면 오히려 커집니다. JPG는 투명을 지원하지 않아 변환 전에 흰 배경을 먼저 깔아 줍니다. 결과 표에 “원본이 더 작음”이 뜨면 원본이 이미 충분히 압축된 경우이니 원본을 그대로 쓰면 됩니다.
서버에 올라가지 않는다는 것의 의미
흐름은 파일 선택, createImageBitmap으로 디코딩, canvas에 축소해 그리기, toBlob으로 인코딩, 내려받기 링크 생성까지 전부 브라우저 안에서 일어납니다. 네트워크 요청이 없으니 비행기 모드에서도 됩니다. 한 번에 최대 20장까지 처리합니다.
부수 효과로 EXIF가 사라집니다. canvas에 그리는 순간 화소만 남고 촬영 일시, 기종, GPS 좌표 같은 메타데이터는 새 파일에 들어가지 않습니다. 중고 거래 사진이나 아이 사진을 올리기 전에 위치 정보를 지우는 용도로도 쓸 수 있습니다. 반대로 촬영 정보가 필요한 사진이면 원본을 따로 보관하세요. 최근 브라우저는 EXIF 회전 정보를 디코딩 때 적용하므로 세로 사진이 눕지 않습니다.
실제 결과 용량은 사진의 내용(하늘처럼 단순한 면이 많으면 작고, 나뭇잎처럼 복잡하면 큼)에 따라 같은 설정에서도 두세 배 차이가 나므로, 결과 표에서 전후 용량을 보고 긴 변과 품질을 한 단계씩 조정하는 것이 빠릅니다. 줄인 사진에 QR을 넣어 인쇄물을 만들 때는 QR 코드 생성기도 같은 방식으로 브라우저 안에서만 처리합니다.