웹에 이미지를 올리기 전에 거의 항상 두 가지 작업이 필요합니다. 포맷을 바꾸는 것과 크기를 줄이는 것입니다. 스마트폰으로 찍은 4MB짜리 사진을 그대로 올리면 페이지가 느려지고, 투명 배경이 필요한 로고를 JPG로 저장하면 배경이 검게 나옵니다.
이 도구는 그 작업을 브라우저 캔버스에서 처리합니다. PNG·JPG·WebP·GIF·AVIF·SVG를 읽어 PNG·JPEG·WebP로 내보내며, 가로·세로·배율로 크기를 조정하고 품질 슬라이더로 용량을 조절합니다. 파일이 서버로 올라가지 않으므로 계약서 스캔본이나 사내 자료 이미지도 안심하고 다룰 수 있습니다.
사용 방법
- 이미지 올리기 — 점선 영역을 클릭해 파일을 고르거나 파일을 끌어다 놓습니다. 원본의 크기와 용량이 표시되며, 이미지는 브라우저 메모리에서만 처리되고 네트워크로 전송되지 않습니다.
- 출력 포맷 고르기 — 용량을 줄이는 것이 목적이라면 WebP가 가장 효율적입니다. 투명 배경이 필요하면 PNG나 WebP를, 사진이면서 호환성이 최우선이면 JPEG를 고르세요. JPEG를 고르면 투명한 부분을 채울 배경색을 지정할 수 있습니다.
- 크기 조정하기 — 가로 기준, 세로 기준, 상자에 맞춤, 배율 중에서 고릅니다. 웹 본문 이미지는 보통 가로 1200px 이하면 충분하고, 썸네일은 400px 안팎이면 됩니다. 상자에 맞춤은 지정한 크기 안에 비율을 유지하며 들어가도록 축소하되 원본보다 키우지는 않습니다.
- 품질 조절하고 내려받기 — 품질 슬라이더를 움직이면 용량이 즉시 다시 계산됩니다. 오른쪽 미리보기에서 화질 저하가 눈에 띄는지 확인하면서 조절하세요. 만족스러우면 다운로드 버튼을 누릅니다. 파일명은 원본 이름에 새 확장자를 붙여 만들어집니다.
자주 묻는 질문
품질을 몇 퍼센트로 두는 게 좋나요?
사진은 75~85% 사이가 대체로 최적입니다. 이 구간에서는 용량이 크게 줄면서도 화질 저하가 눈에 잘 띄지 않습니다. 90%를 넘기면 용량만 늘고 눈에 보이는 개선은 거의 없습니다.
다만 이미지 성격에 따라 다릅니다. 그라데이션이 넓게 깔린 이미지나 글자가 들어간 스크린샷은 낮은 품질에서 얼룩과 번짐이 도드라지므로 90% 이상이 필요합니다. 슬라이더를 움직이면서 오른쪽 미리보기를 확대해 확인하는 것이 가장 확실합니다.
PNG를 JPG로 바꿨더니 배경이 검게 나옵니다.
JPEG 형식 자체가 투명도를 지원하지 않기 때문입니다. 투명한 픽셀을 어떤 색으로 채울지 정해야 하는데, 아무것도 지정하지 않으면 보통 검정이 됩니다.
이 도구는 JPEG를 고르면 배경색 선택기가 나타나며 기본값이 흰색입니다. 페이지 배경색과 같은 값으로 맞추면 자연스럽게 보입니다. 투명도가 꼭 필요하다면 JPEG 대신 PNG나 WebP를 쓰세요. WebP는 투명도를 지원하면서 PNG보다 용량이 훨씬 작습니다.
변환했는데 용량이 오히려 커졌습니다.
몇 가지 경우에 그렇습니다. 이미 잘 압축된 JPEG를 PNG로 바꾸면 PNG는 무손실이라 용량이 크게 늘어납니다. 사진에는 PNG가 맞지 않습니다.
반대로 색이 적은 단순한 그래픽이나 로고를 JPEG로 바꿔도 커질 수 있습니다. JPEG는 사진처럼 색이 부드럽게 변하는 이미지에 최적화되어 있어서, 단색 면과 뚜렷한 경계가 많은 이미지에는 비효율적입니다. 사진은 JPEG나 WebP, 로고와 아이콘은 PNG나 WebP가 기본 원칙입니다.
여러 장을 한꺼번에 변환할 수 있나요?
현재는 한 번에 한 장씩 처리합니다. 모든 처리가 브라우저 메모리에서 일어나기 때문에, 큰 이미지 여러 장을 동시에 올리면 탭이 멈추거나 메모리 부족으로 죽을 수 있어 의도적으로 한 장씩만 받도록 했습니다.
수십 장을 일괄 처리해야 한다면 ImageMagick(magick mogrify -resize 1200x -quality 82 *.jpg)이나 sharp 같은 CLI 도구가 적합합니다. 이 도구는 몇 장을 눈으로 확인하며 다듬는 용도에 맞춰져 있습니다.
알아두면 좋은 개념
무손실과 손실 압축의 차이
PNG는 무손실 압축이라 원본 픽셀이 그대로 보존됩니다. 몇 번을 저장하고 다시 열어도 화질이 변하지 않습니다. 반면 JPEG와 WebP(손실 모드)는 사람 눈이 잘 알아채지 못하는 정보를 버려서 용량을 줄입니다.
중요한 차이는 누적입니다. JPEG를 열어 편집하고 다시 저장하는 일을 반복하면 매번 정보가 조금씩 더 버려져 화질이 계속 나빠집니다. 그래서 편집 중인 원본은 PNG나 원본 포맷으로 보관하고, JPEG 변환은 배포 직전에 한 번만 하는 것이 원칙입니다.
WebP가 실제로 얼마나 작은가
같은 화질에서 JPEG보다 25~35%, PNG보다 훨씬 큰 폭으로 작습니다. 투명도를 지원하면서 손실 압축도 가능하다는 점이 결정적인 장점으로, PNG의 투명도와 JPEG의 압축률을 동시에 갖습니다.
호환성 걱정은 이제 거의 없습니다. 모든 주요 브라우저가 WebP를 지원한 지 오래이고, 사파리도 14 버전부터 지원합니다. 남은 문제는 웹이 아닌 곳입니다. 일부 이메일 클라이언트, 오래된 이미지 편집 프로그램, 카카오톡 같은 메신저의 미리보기가 WebP를 제대로 처리하지 못하는 경우가 있으니 배포 경로를 고려해 고르세요.
화면 크기의 두 배로 준비하기
레티나 디스플레이는 CSS 픽셀 하나를 실제 픽셀 두 개 이상으로 그립니다. 그래서 화면에 600px로 표시할 이미지를 600px로 준비하면 고해상도 화면에서 흐릿하게 보입니다.
일반적으로는 표시 크기의 2배로 준비합니다. 다만 무작정 키우면 용량이 네 배가 되므로, 2배 크기로 만들되 품질을 조금 낮추는 조합이 효율적입니다. 사람 눈은 해상도 부족보다 압축 아티팩트를 덜 민감하게 인지하기 때문에, 큰 이미지를 낮은 품질로 두는 편이 작은 이미지를 높은 품질로 두는 것보다 대체로 낫습니다.