블로그에 올릴 사진이 너무 크거나, PNG 파일 때문에 페이지가 무거워졌나요? BlogFlow 이미지 압축은 JPG·PNG·WebP 파일의 용량과 크기를 브라우저에서 조정하는 도구입니다. 파일을 선택하고 결과를 확인한 뒤 내려받으면 됩니다.
선택한 이미지의 압축 처리는 브라우저 안에서 진행합니다. 원본을 덮어쓰지 않으므로 결과를 비교한 뒤 사용할 파일을 골라 주세요.
어떤 작업에 쓰면 좋을까요?
- 블로그 사진 준비: 필요한 표시 크기에 맞춰 줄이고 파일 용량을 비교할 때
- 개발 문서의 스크린샷: 작은 글자가 읽히는지 확인하면서 PNG·WebP 결과를 고를 때
- 투명 배경 로고: 투명도를 유지할 수 있는 PNG·WebP로 결과를 만들 때
이 도구는 이미지 파일을 다룹니다. CSS로 찌그러진 이미지, 잘못된 이미지 주소, Next.js의 외부 호스트 허용 오류를 고치는 도구는 아닙니다. 작은 원본을 크게 만든다고 잃어버린 디테일이 복원되지도 않습니다.
처음 사용하는 순서
- 원본을 따로 보관합니다. 한 장으로 먼저 비교하면 여러 파일을 다시 작업하는 수고를 줄일 수 있습니다.
- ‘이미지 선택’에서 파일을 고릅니다. JPG·PNG·WebP를 사용할 수 있습니다. 첫 시도는 실제 게시할 이미지 한 장이면 충분합니다.
- ‘설정으로 이동’을 누릅니다. 처음에는 자동 형식과 기본 품질로 시작하세요. 크기를 그대로 두면 형식·품질 변경의 효과부터 비교할 수 있습니다.
- 필요할 때만 크기를 줄입니다. 가로 또는 세로 한쪽만 입력하면 비율을 맞추기 쉽습니다. 두 값을 모두 지정하면 해당 크기로 바뀌어 이미지가 찌그러질 수 있습니다. 원본보다 크게 만드는 것은 피하세요.
- ‘압축 시작’을 누르고 결과를 비교합니다. 용량뿐 아니라 작은 글자, 사진의 경계, 투명 배경을 확인하세요. 글자가 뭉개지면 품질을 높이거나 다른 형식으로 다시 시도합니다.
- ‘다운로드’를 눌러 파일을 저장합니다. 다운로드 요청 안내만 보고 끝내지 말고 브라우저의 다운로드 목록이나 저장 폴더에서 파일을 확인하세요. 파일을 열어 본 뒤 블로그에 업로드하면 됩니다.
사진·스크린샷·로고는 무엇을 다르게 볼까요?
| 이미지 종류 | 첫 시도 | 꼭 확인할 부분 |
|---|---|---|
| 사진 | 자동 형식으로 먼저 비교 | 얼굴·윤곽·하늘의 색이 뭉개지거나 얼룩지지 않는지 |
| 코드·화면 스크린샷 | 원본 크기를 유지하고 PNG·WebP 비교 | 실제로 표시할 크기에서 작은 글자와 기호가 읽히는지 |
| 투명 로고·아이콘 | PNG 또는 WebP | 가장자리와 반투명 부분이 유지되는지 |
JPEG는 투명 배경을 표현하지 못합니다. 이 도구에서 JPEG를 직접 선택하면 투명한 부분이 흰색 배경으로 바뀝니다. 어두운 배경 위에 사용할 로고라면 PNG·WebP 결과를 실제 배경 위에서도 확인하세요.
자동 설정도 모든 이미지에 가장 좋은 결과를 보장하지는 않습니다. 이미 최적화된 파일은 줄어드는 폭이 작을 수 있습니다. 용량이 작은 결과보다 독자가 내용을 제대로 읽을 수 있는 결과를 우선하세요.
실제로 얼마나 줄어드나요?
동작 검수에 사용한 한 PNG 파일은 888.8KB에서 WebP 9.1KB로 줄었고, 가로·세로 1254px은 유지됐습니다. 이는 해당 이미지 한 장의 결과이며 모든 사진이나 스크린샷에서 같은 비율로 줄어든다는 뜻은 아닙니다.
투명도는 별도의 작은 RGBA 테스트 이미지로 확인했습니다. PNG를 WebP로 변환한 뒤에도 투명·반투명 값이 남아 있었습니다. 다만 본인의 로고와 스크린샷도 내려받은 결과를 직접 열어 확인하는 것이 안전합니다.
파일 제한과 저장 방식
- 입력 형식: JPEG(JPG), PNG, WebP. 정지 이미지를 기준으로 사용하세요. 움직이는 WebP의 애니메이션 유지를 기대하면 안 됩니다.
- 한 번에 선택: 최대 20개, 파일당 20MB, 전체 합계 100MB까지입니다.
- 픽셀 크기: 가로·세로 각각 최대 8192px이며 총 2400만 픽셀 제한도 함께 적용됩니다. 파일 용량이 작아도 픽셀 수가 크면 처리할 수 없습니다.
- 처리 위치: 선택한 이미지의 압축은 브라우저에서 수행합니다. 사이트 페이지를 불러오는 통신과 이미지 파일을 서버로 보내는 것은 다른 일입니다.
- 자주 쓰는 설정: 선택 기능입니다. 저장소 접근이 제한되면 현재 페이지에서만 임시 유지되고, 새로고침이나 페이지 이동 시 사라집니다. 영구 저장이나 기기 간 동기화를 전제로 사용하지 마세요.
결과가 이상할 때 확인할 것
다운로드가 안 보이면?
브라우저의 다운로드 목록과 다운로드 차단 표시를 먼저 확인하세요. 결과 파일이 저장됐는지 확인한 뒤 다시 시도하고, 여러 번 눌러 같은 파일을 반복 저장하지 않도록 주의하세요.
용량은 줄었는데 글자가 흐리면?
품질을 높이고 원본 크기로 다시 비교하세요. 캡처 이미지의 작은 글자는 과한 축소에 특히 약합니다. 읽을 수 있는 크기를 확보한 뒤 용량을 줄이는 순서가 좋습니다.
업로드한 이미지만 찌그러지거나 오류가 나면?
내려받은 파일 자체가 정상이라면 웹페이지의 표시 설정을 확인해야 합니다. 아래 글에서 CSS 크기·비율, 반응형 이미지와 Next.js 외부 이미지 설정을 따로 점검할 수 있습니다.
함께 읽으면 좋은 글
- HTML·CSS 이미지 깨짐과 화질 점검하기 — 파일과 화면 표시 문제를 구분합니다.
- Next.js 외부 이미지 설정 확인하기 — 외부 호스트 허용 오류를 해결합니다.
이 글이 도움이 되었나요?
새 글 받아보기
RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.