PNG

PNG(Portable Network Graphics)는 픽셀 데이터를 정확히 보존하는 무손실 이미지 형식입니다. 글자의 선명함과 색 정확성이 중요한 스크린샷의 기본 선택입니다.

PNG 압축의 작동 방식

PNG는 두 단계로 압축합니다. 먼저 픽셀의 각 행을 패턴이 압축되기 쉬운 형태로 바꾸는 필터를 거칩니다. 주변 픽셀을 바탕으로 각 픽셀값을 예측하고 차이만 저장합니다. 단색 영역에서는 이 차이가 긴 0의 연속이 됩니다.

다음으로 필터를 거친 데이터를 ZIP 파일에도 쓰는 DEFLATE 알고리즘으로 압축합니다. DEFLATE는 반복되는 바이트 시퀀스를 찾아 짧은 참조로 바꿉니다. 단색 배경, 평평한 UI 표면, 일정한 테두리처럼 같은 색이 넓게 이어진 영역은 매우 잘 압축됩니다. 복잡한 질감과 사진의 잡음은 잘 줄지 않습니다.

이 두 단계 덕분에 PNG는 스크린샷에 뛰어납니다. 대부분의 스크린샷에는 넓은 단색 영역, 선명한 글자 가장자리, 정확한 기하학적 모양이 있어 필터 결과가 잘 압축됩니다. 1920x1080인 일반적인 UI 스크린샷은 PNG로 200~500KB까지 줄어들 수 있지만 비압축 비트맵으로는 6MB를 넘습니다.

PNG는 투명도를 위한 알파 채널, 24비트 색상(1,670만 색), 감마 보정과 색상 프로필 정보를 담는 선택적 메타데이터 청크도 지원합니다.

PNG, JPG, WebP 비교

각 형식의 목적은 다릅니다.

• PNG — 무손실이며 모든 픽셀을 정확히 재현하고 투명도를 지원합니다. 글자가 선명해야 하는 스크린샷, UI 요소, 도표에 적합합니다. 손실 형식보다 파일이 큽니다.
• JPG — 시각 정보를 버려 파일을 줄이는 손실 형식입니다. 픽셀 정확성이 필요하지 않은 사진과 부드러운 그라데이션 이미지에 맞습니다. 투명도를 지원하지 않고 글자와 날카로운 가장자리에 압축 흔적이 보입니다.
• WebP — 손실과 무손실 모드를 모두 지원합니다. 같은 화질에서 대체로 무손실 PNG나 손실 JPG보다 작은 파일을 만들고 투명도도 지원합니다. 최신 브라우저에서는 널리 지원되지만 모든 이미지 편집기와 문서 형식에서 보편적인 것은 아닙니다.

글자가 있는 스크린샷에는 PNG가 가장 안전한 기본값입니다. JPG는 글자 가장자리를 흐리게 만들어 작은 글자를 읽기 어렵게 합니다. 결과물을 쓰는 환경이 WebP를 지원하고 파일 크기가 중요하다면 무손실 WebP도 좋은 대안입니다.

PNG가 알맞은 상황

• 글자가 있는 스크린샷 — UI 라벨, 코드, 터미널 출력, 읽어야 하는 콘텐츠가 있는 캡처입니다. 글자 가장자리를 흐리지 않고 모두 보존합니다.
• 투명도가 있는 이미지 — 다른 콘텐츠 위에 합성할 로고, 아이콘, 오버레이, 그래픽에 사용합니다.
• 픽셀 정확한 문서 — 모든 픽셀이 원본과 같아야 하는 기술 도표, 와이어프레임, 주석 캡처에 맞습니다.
• 원본 에셋과 보관 파일 — 나중에 편집, 자르기, 다시 내보낼 이미지입니다. 무손실 원본에서 시작하면 편집할 때마다 품질 저하가 쌓이지 않습니다.
• 일괄 캡처 결과 — 스크린샷 수백 장을 만드는 자동 작업에서도 무손실을 보장합니다. 형식이 이미지를 바꾸지 않아 캡처 뒤 일일이 품질을 확인할 필요가 없습니다.

흔한 실수

• 큰 사진을 PNG로 저장합니다. 원본 해상도 사진은 PNG에서 10MB를 쉽게 넘습니다. JPG나 WebP는 화면에서 거의 같은 모습으로 훨씬 작은 파일을 만듭니다. 무손실 품질이 중요한 콘텐츠에만 PNG를 쓰세요.
• PNG 파일을 최적화하지 않습니다. 대부분의 캡처 도구가 내보내는 기본 PNG는 최적으로 압축되지 않습니다. 최적화 도구를 거치면 픽셀을 그대로 유지하면서 20~50% 줄어들 수 있습니다.
• JPG를 PNG로 바꾸면 품질이 좋아진다고 생각합니다. 변환해도 JPG에 이미 생긴 압축 흔적은 없어지지 않고 더 큰 PNG에 그대로 남습니다. 형식을 바꾸려면 원본에서 시작하세요.
• 웹에서 파일 크기를 무시합니다. 최적화하거나 알맞게 줄이지 않은 PNG 스크린샷은 페이지 로딩을 늦춥니다. 표시 크기에 맞추고 최적화하거나 더 작은 무손실 WebP를 고려하세요.