스크린샷에는 PNG 또는 WebP? 세 파일 비교

다시 편집할 계획이 있는 스크린샷이라면 PNG 원본을 유지하세요. 웹사이트에 올릴 이미지라면 WebP를 시도한 다음, 공유하기 전에 가장 작은 텍스트를 확인하세요.

우리는 세 개의 샘플 이미지를 만들어 CozyToolkit의 이미지 변환기를 통해 내보냈습니다. 아래에서 모든 결과를 검사하고 다운로드할 수 있습니다.

세 개의 파일, 동일한 크기

작은 라벨이 있는 인터페이스, 컬러 텍스트가 있는 코드 편집기, 그라데이션 포스터를 그렸습니다. 각각 1200 × 750 픽셀입니다. 이는 합성 예시이며, 고객 파일의 스크린샷이 아닙니다.

PNG 내보내기는 브라우저의 PNG 인코더를 사용합니다. WebP 내보내기는 품질 85를 사용하며, 크기 조정이나 자르기는 없습니다. 표는 저장된 파일의 크기를 보여줍니다.

그라데이션이 가장 큰 절감 효과를 보였습니다. PNG에는 부드럽게 변화하는 픽셀 값이 많이 포함되어 있는데, 손실 있는 WebP 인코더가 이를 훨씬 더 간결하게 근사할 수 있습니다. 텍스트가 많은 두 샘플도 작아졌지만, 파일 크기만으로는 텍스트가 사용 목적에 충분히 좋은지 알 수 없습니다.

이것은 동등한 품질 비교가 아닙니다. 여기서 PNG는 무손실입니다. 이 설정의 WebP는 손실이 있어 픽셀이 변경될 수 있습니다. 세 가지 예시로 일반적인 스크린샷의 평균 절감 효과를 확립할 수 없으며, 다른 인코더의 최적화된 PNG가 우리 것보다 더 작을 수도 있습니다.

다운로드 전에 확인할 사항

위의 두 형식 사이를 전환하고 확대해 보세요. 특히 다음을 확인하세요:

• 코드 샘플의 컬러 구두점. 큰 텍스트가 괜찮아 보여도 미세한 컬러 가장자리가 흐려질 수 있습니다.
• 인터페이스의 작은 "Ready to share" 라벨.
• 포스터의 부드러운 전환. 연속적인 그라데이션이 아닌 눈에 띄는 밴딩이 있는지 확인하세요.

이미지를 의도된 표시 크기에서도 평가하세요. 400%에서 보이는 결함은 작은 미리보기에서는 무관할 수 있지만, 도움말 문서에서 흐릿한 라벨은 문제입니다.

작업에 맞는 형식 선택

마스터 사본, 픽셀 수준 비교, 또는 정확해야 하는 텍스트에는 PNG를 유지하세요. 이미지를 받는 앱이 WebP를 지원하지 않을 경우에도 합리적인 대안입니다.

저장된 파일이 충분히 좋아 보일 때 웹 페이지와 미리보기에는 WebP를 시도하세요. 투명도를 지원하므로 투명한 배경만으로는 피할 이유가 없습니다. WebP는 무손실 및 손실 인코딩을 모두 지원하지만, 이 테스트에서 사용된 브라우저 품질 슬라이더는 전용 무손실 스위치가 아닙니다. 100으로 설정한다고 해서 내보내기가 무손실이라는 보장은 없습니다. 차이점은 Google의 WebP 형식 문서를 참조하세요.

스크린샷으로 시도해 보기

1. 이미지 변환기를 열고 PNG를 추가하세요.
2. 출력 형식으로 WebP를 선택하세요. 품질 85에서 시작하고 크기는 변경하지 마세요.
3. 변환하고 결과를 확대하여 원본과 비교하세요.
4. 작은 세부 사항이 손상되면 품질을 높이세요. 결과가 여전히 이상해 보이면 PNG를 유지하세요.

이미지가 현재 너비의 절반으로만 표시될 경우, 크기 조정이 형식 변경보다 더 많은 용량을 절약할 수 있습니다. 크기를 줄이기 전에 생각해 보세요: 더 작은 이미지는 동일한 세부 사항을 유지할 수 없습니다.

이 비교가 만들어진 방법

2026년 9월 28일 macOS의 Chrome 153.0.8010.53에서 도구와 동일한 변환 기능을 사용하여 테스트했습니다. 테스트 이미지는 시스템 글꼴로 브라우저 캔버스에 그려졌습니다. PNG 변환은 팔레트 축소를 사용하지 않았으며, WebP는 품질 인수 0.85로 브라우저 인코더를 사용했습니다.

측정값 다운로드에는 정확한 바이트 수와 파일 해시가 포함됩니다. 브라우저 인코더와 글꼴은 다를 수 있으므로 다른 시스템에서 예시를 다시 실행하면 다른 크기가 나올 수 있습니다. 위의 백분율은 특정 다운로드를 설명하는 것이지, 여러분의 결과를 보장하는 것이 아닙니다.