빠른 답: 사진은 JPEG로, 뚜렷한 가장자리나 투명도가 있는 그래픽은 PNG로. 다른 건 아무것도 기억하지 못해도, 그 규칙이 결정의 90%를 올바르게 처리한다. 이 페이지의 나머지는 그 이유를 설명해, 경계 사례를 스스로 판단할 수 있게 한다.
중요한 단 하나의 구분
JPEG와 PNG는 서로 다른 종류의 이미지를 위해 만들어졌다.
- JPEG는 사진에 맞춰 조율된 손실 포맷이다. 부드러운 그라데이션 — 피부, 하늘, 초점 나간 배경 — 에 뛰어나고, 당신 눈이 무시하는 가는 세부를 기꺼이 버린다. 1200만 화소 사진을 2MB에 맞추는 방식이 그것이다.
- PNG는 단색, 선명한 선, 텍스트를 위해 만들어진 무손실 포맷이다. JPEG가 전혀 못 하는 투명도도 지원한다. 로고, 아이콘, UI 스크린샷, 도표는 PNG에 속한다.
잘못 쓰면 즉시 느낀다. 로고를 JPEG로 저장하면 뚜렷한 가장자리에 회색 "모기 노이즈"가 지저분하게 낀다. 사진을 PNG로 저장하면 눈에 보이는 이점 없이 파일이 다섯 배, 열 배로 부푼다.
빠른 결정 가이드
두 질문을 순서대로 던져라:
- 투명도가 필요한가? 그렇다면 → PNG(또는 WebP). JPEG는 투명도가 전혀 없다.
- 사진이거나 그라데이션이 많은 사진 같은 이미지인가? 그렇다면 → JPEG. 단색, 선명한 텍스트, 선화라면 → PNG.
스크린샷이 고전적 함정이다. 사진 위주 웹 페이지의 스크린샷은 JPEG로 더 잘 압축된다. 코드, 스프레드시트, UI의 스크린샷은 PNG로 선명하고 작게 유지된다. 헷갈리면 둘 다 해보고 비교하라. 그러면 도구 이야기로 이어진다.
서로 변환하기
포맷이 틀렸다면 전환은 사소하다. IMG.DIY의 이미지 변환기는 브라우저 안에서 바로 PNG, JPG, WebP, AVIF 사이를 오간다. (참고: 브라우저는 캔버스를 통해 AVIF를 인코딩하지 못하므로 AVIF 출력은 WebP로 대체된다. WebP는 거의 그만큼 작고 보편적으로 지원된다.) 전체 일괄을 한 번에 변환할 수 있다.
가장 흔한 승리: 디자이너가 PNG 사진 폴더를 건넸다. JPG로 변환하고 폴더가 눈에 보이는 손실 없이 80% 이상 줄어드는 것을 지켜보라.
각 포맷을 올바르게 압축하기
포맷 선택은 절반의 일일 뿐이다. 여전히 파일을 작게 하고 싶다.
- JPEG(와 WebP): 품질 슬라이더를 써라. 75~85 범위는 대부분의 사진에서 시각적으로 무손실이면서 크기를 크게 줄인다.
- PNG: 무손실이라 품질 슬라이더가 없다. 대신 색상 수를 줄여라. 대부분의 PNG는 허용된 것보다 훨씬 적은 색을 쓰므로, 256색 팔레트로 양자화하면 보통 눈에 보이는 변화 없이 60~80%를 절약하고 — 투명도는 그대로 유지된다.
IMG.DIY의 이미지 압축기는 넣는 포맷에 따라 올바른 방법을 자동으로 적용하고, 원본보다 큰 파일을 절대 내보내지 않는다. JPG와 PNG가 섞인 폴더를 일괄 처리하면 각각이 필요한 처리를 받는다.
WebP는 어떤가?
언급할 가치가 있다. WebP는 두 일을 다 한다. JPEG처럼 사진을 압축하고 동시에 PNG처럼 투명도를 지원하며, 대개 둘 중 어느 것보다 작은 크기로. 당신 독자가 현대 브라우저(이제 거의 모두)를 쓴다면 WebP로 변환하는 것이 종종 최고의 한 수다. 아주 오래된 소프트웨어를 지원해야 할 때만 JPEG나 PNG 대체본을 유지하라.
결론
사진 → JPEG. 로고, 아이콘, 텍스트, 투명도 → PNG. 압축 과 투명도가 둘 다 필요하거나 가능한 한 작은 파일을 원하면 → WebP를 고려하라. 그다음 포맷에 맞는 방법으로 압축하라. 여기 모든 단계는 전적으로 브라우저에서 돌아간다. 아무것도 업로드되지 않고, 첫 방문 이후 도구가 오프라인에서 작동한다.