이미지 크기 줄이기·압축하는 법
리사이즈(픽셀 크기 변경)와 압축(품질 조절로 용량 줄이기)의 차이, JPG·PNG·WebP 포맷 선택, 브라우저 처리의 개인정보 이점까지 정리했습니다. 리사이저로 바로 줄여 보세요.
사진을 업로드하려는데 "용량이 너무 큽니다"라는 안내를 받아 본 적이 있을 겁니다. 이때 흔히 헷갈리는 것이 리사이즈와 압축의 차이입니다. 둘은 목적이 다른 작업입니다. 각각이 무엇인지, 어떤 포맷을 골라야 하는지 정리하고 이미지 리사이저로 직접 줄이는 방법을 알아봅니다.
한눈에 보기
- 리사이즈: 이미지의 가로·세로 픽셀 크기를 바꾸는 것.
- 압축: 품질을 조절해 파일 용량을 줄이는 것.
- 둘은 서로 다른 작업이며, 함께 쓰면 효과가 큽니다.
- 포맷: JPG(손실, 사진용), PNG(무손실·투명), WebP(고효율).
- 브라우저에서 처리하면 서버 업로드 없이 개인정보 노출 위험이 적습니다.
리사이즈와 압축은 다르다
가장 먼저 구분해야 할 개념입니다.
| 구분 | 리사이즈 | 압축 |
|---|---|---|
| 바꾸는 것 | 가로·세로 픽셀 크기 | 품질(용량) |
| 예시 | 4000×3000 → 1200×900 | 품질 90% → 70% |
| 결과 | 화면에 표시되는 크기 변화 | 파일 용량 감소 |
리사이즈는 이미지의 픽셀 수 자체를 줄입니다. 4000×3000 사진을 웹용으로 1200×900으로 바꾸면 화면에 맞는 크기가 됩니다. 압축은 픽셀 크기는 그대로 두고 품질을 조절해 용량만 줄입니다. 두 작업은 별개지만, 큰 사진을 적정 픽셀로 리사이즈한 뒤 압축까지 하면 용량이 크게 줄어듭니다.
포맷 고르기 — JPG·PNG·WebP
어떤 포맷으로 저장하느냐도 용량과 품질에 큰 영향을 줍니다.
- JPG(JPEG): 손실 압축 방식으로, 색이 풍부한 사진에 적합합니다. 품질을 조금 낮춰도 용량 절감 효과가 큽니다.
- PNG: 무손실 압축이라 품질 저하가 없고 투명 배경을 지원합니다. 로고·아이콘·스크린샷에 어울리지만 사진에는 용량이 커집니다.
- WebP: 비교적 최신 포맷으로 고효율입니다. 같은 품질에서 JPG·PNG보다 용량이 작은 경우가 많습니다.
사진이라면 JPG나 WebP, 투명이 필요하면 PNG나 WebP를 고르는 식으로 용도에 맞춰 선택하면 됩니다.
웹용 이미지의 핵심
웹에 올릴 이미지는 적정 픽셀 크기 + 압축의 조합이 핵심입니다. 화면에 1200px 너비로 보이는 이미지를 4000px 원본 그대로 올릴 필요는 없습니다. 표시 크기에 맞게 리사이즈하고, 품질을 적당히 낮춰 압축하면 화질 차이는 거의 느끼지 못하면서 용량은 크게 줄어듭니다.
이미지 리사이저로 픽셀 크기를 먼저 맞춘 뒤, 이미지 압축기로 용량을 한 번 더 줄이면 효과적입니다.
브라우저 처리의 이점
요즘 도구 중에는 이미지를 서버로 보내지 않고 브라우저(내 기기) 안에서 직접 처리하는 것이 많습니다. 사진이 외부 서버에 올라가지 않으므로 개인정보 노출 위험이 적고, 업로드·다운로드 시간도 절약됩니다. 민감한 사진을 다룰 때 특히 유용합니다.
자주 묻는 질문
리사이즈와 압축 중 무엇을 먼저 해야 하나요?
보통 리사이즈로 픽셀 크기를 표시 크기에 맞춘 뒤 압축하는 순서가 효율적입니다. 둘은 별개 작업이므로 필요에 따라 한쪽만 해도 됩니다.
사진은 어떤 포맷이 좋나요?
JPG나 WebP가 적합합니다. 둘 다 손실 압축이라 사진의 용량을 효과적으로 줄여 줍니다. 투명 배경이 필요하면 PNG나 WebP를 쓰세요.
압축하면 화질이 많이 떨어지나요?
품질을 적당히(예: 70~85%) 유지하면 눈으로 보는 차이는 크지 않으면서 용량은 크게 줄어듭니다. 너무 낮추면 화질 저하가 보입니다.
내 사진이 서버에 올라가나요?
브라우저에서 처리하는 도구라면 기기 안에서 변환되어 서버로 전송되지 않습니다. 개인정보 측면에서 안심할 수 있습니다.
마무리
리사이즈는 픽셀 크기를, 압축은 용량을 다루는 별개의 작업이고, JPG·PNG·WebP 중 용도에 맞는 포맷을 고르는 것이 중요합니다. 웹용이라면 적정 픽셀과 압축의 조합이 답입니다. 사진을 줄여야 할 때는 이미지 리사이저로 크기를 맞추고 이미지 압축기로 용량을 정리해 보세요.
🧰 관련 도구
관련 글
텍스트 음성 변환(TTS)이란? 원리와 똑똑한 활용법
글자를 음성으로 읽어주는 TTS의 원리와 브라우저 음성 합성(Web Speech API), 교정·접근성·외국어 발음 등 활용법을 정리합니다.
CSS box-shadow 완전 정복 — 그림자 값 5가지 이해
box-shadow의 가로·세로 오프셋·번짐(blur)·확산(spread)·색과 inset, 여러 그림자 겹치기를 예시 코드로 정리합니다.
CSS 그라데이션 만드는 법 — linear·radial·conic
CSS linear-gradient·radial-gradient·conic-gradient 문법과 방향·색 정지점(color stop) 지정법을 예시 코드로 정리합니다.