블로그

스크린샷에는 PNG와 JPEG 중 무엇이 좋을까? 실제 63장으로 측정했습니다

작성 InSnap · 게시 · PNG, JPEG, WebP, 스크린샷 용량, 파일 크기, 스크린샷 형식

스크린샷에는 PNG와 JPEG 중 무엇이 좋을까? 실제 63장으로 측정했습니다

인터페이스 스크린샷은 JPEG가 PNG보다 작지 않은 경우가 많습니다. 실제 스크린샷 63장으로 PNG, JPEG, WebP를 비교해 파일 크기, 텍스트 손상, 용량을 줄이는 방법을 정리했습니다.

인터페이스 창의 스크린샷은 JPEG가 PNG보다 작지 않은 경우가 많습니다. 실제 인터페이스 스크린샷 63장으로 시험했을 때, 품질 85의 JPEG는 중앙값 기준으로 PNG 크기의 96%였고, 이미지의 40%에서는 오히려 더 컸습니다. 파일을 확실히 줄이려면 품질 70 이하로 낮춰야 하는데, 그러면 텍스트 주변에 헤일로가 생깁니다.

더 큰 절약은 다른 곳에 있습니다. Retina 스크린샷을 1x로 축소하는 것입니다. 가장 먼저 찾아볼 설정입니다.

측정 방법

InSnap 자체 인터페이스의 스크린샷 63장을 Retina(2x) 크기, 각 1840 × 1320픽셀로 렌더링했습니다. 설정 페이지 20장, 기록 보기 18장, 이미지 편집기 화면 7장, 가이드 편집기 화면 13장, 비디오 편집기 화면 5장입니다. 저장된 그대로의 PNG 중앙값은 약 195 KB였습니다.

각 이미지를 최적화한 PNG로 다시 인코딩했고, JPEG는 품질 95, 85, 70, 50으로, WebP는 무손실과 손실 두 가지로 인코딩했습니다. 결과마다 PNG 대비 파일 크기와, 색상 채널 중 하나라도 255 중 8을 넘게 달라진 픽셀의 비율(눈에 띄게 바뀐 픽셀)을 기록했습니다.

사진이 없는 평평한 인터페이스 콘텐츠, 즉 일반적인 "앱 스크린샷"입니다. Retina 디스플레이 전체는 이 창들보다 픽셀이 대략 세 배 많으므로, 여러분의 화면에서는 절대 크기가 더 크게 나올 것입니다.

결과

PNG 대비 JPEG와 WebP의 파일 크기, 화면 종류별
인코딩PNG 대비 크기(다섯 가지 화면 종류의 범위)눈에 띄게 바뀐 픽셀
PNG100%0%
JPEG, 품질 95107% ~ 181%0.5% ~ 1.2%
JPEG, 품질 8570% ~ 119%1.4% ~ 1.8%
JPEG, 품질 7054% ~ 94%2.5% ~ 3.0%
JPEG, 품질 5045% ~ 78%3.5% ~ 4.1%
WebP, 무손실31% ~ 55%0%
WebP, 품질 9030% ~ 44%0.5% ~ 1.3%

눈에 띄는 점은 세 가지입니다.

  • 고품질 JPEG는 PNG보다 더 클 수 있습니다. 평평한 색과 날카로운 경계는 PNG가 가장 잘 압축하고 JPEG가 가장 못 다루는 부분입니다. 색상 정보를 모두 보존하는 JPEG(4:4:4)는 색이 있는 텍스트를 더 깔끔하게 유지하지만 용량은 더 컸습니다. 품질 85에서 PNG의 93%~155%였습니다.
  • 무손실 WebP가 무손실 옵션 중 가장 작았습니다. PNG의 31%~55%입니다. InSnap은 PNG나 JPEG만 저장하므로, 이것은 다른 인코더가 무엇을 할 수 있는지를 보여 줄 뿐 여러분이 고를 수 있는 설정이 아닙니다. 업로드하려는 곳이 WebP를 받는지 먼저 확인하세요.
  • 손실 압축의 매 단계마다 텍스트가 바뀝니다. JPEG를 작게 만드는 대가는 여러분이 가장 보고 싶은 바로 그 픽셀에서 치러집니다.
JPEG 네 가지 품질로 본 같은 버튼

품질 85에서는 버튼 텍스트가 거의 똑같고 파일 크기도 PNG와 같아서 얻을 것이 없습니다. 70과 50에서는 파일이 줄어들지만, 흰색 글자 주변에 희미한 헤일로가 나타납니다.

실제로 스크린샷 용량을 줄이는 방법

크기를 줄이는 데는 재인코딩보다 축소가 효과적입니다. Retina 스크린샷은 1x 스크린샷보다 픽셀이 네 배 많은데, InSnap에서는 이것이 옵션 하나입니다.

변경 (63장의 중앙값)2x PNG 대비 크기
1x로 축소, PNG 유지67%
1x로 축소한 뒤 JPEG 품질 8537%
2x에서 JPEG 품질 8596%

평평한 인터페이스 이미지는 워낙 잘 압축되어서, 픽셀 수를 4분의 3으로 줄여도 PNG는 3분의 1만 줄어듭니다. 하지만 1x와 JPEG를 함께 쓰는 조합이 텍스트를 읽을 수 있게 유지하면서 가장 작은 옵션입니다.

InSnap에서는 설정 › 저장을 열고 Retina 스크린샷을 1x로 축소를 켠 다음, 같은 곳에서 이미지 형식을 고르세요. 자세한 내용은 PNG, JPEG와 클립보드 형식에 있고, 용량이 너무 큰 파일을 위한 전체 점검 목록은 스크린샷 용량이 너무 커서 업로드가 안 될 때에 있습니다.

어떤 형식을 쓸지

상황사용할 형식
문서, 버그 리포트, 슬라이드, 텍스트가 있는 모든 것PNG
이메일이나 양식에 올리기에는 너무 큼먼저 Retina 스크린샷을 1x로 축소하고, 대상이 필요로 하면 JPEG 품질 85 이상
사진이나 동영상 프레임JPEG. 사진은 측정하지 않았지만 JPEG는 사진을 위해 설계되었습니다
나중에 다시 편집하거나 자를 예정PNG. JPEG는 다시 저장할 때마다 손실이 조금씩 늘어납니다

자주 묻는 질문

스크린샷에서 JPEG가 PNG보다 작은가요?

항상 그렇지는 않습니다. 평평한 인터페이스 스크린샷에서 우리 시험의 JPEG 품질 85는 PNG와 크기가 거의 같았고, 이미지의 40%에서는 더 컸습니다. 품질을 낮추면 작아지지만, 텍스트 주변에 눈에 보이는 아티팩트가 생깁니다.

JPEG 스크린샷이 PNG보다 큰 이유는 무엇인가요?

스크린샷은 대부분 평평한 색과 날카로운 경계로 이루어져 있습니다. PNG는 이런 내용을 아주 효율적으로 저장하지만, JPEG는 흐려짐을 막기 위해 경계에 비트를 더 씁니다. 사진은 그 반대로 동작합니다.

Retina 스크린샷을 1x로 줄이면 화질이 떨어지나요?

너비와 높이가 절반이 되므로 텍스트는 픽셀 4분의 1로 그려집니다. 문서, 채팅, 이메일에는 충분합니다. 이미지를 Retina 화면에서 볼 때나 다시 자를 때는 원래 해상도를 유지하세요.

스크린샷에는 WebP가 PNG보다 좋은가요?

우리 시험에서 무손실 WebP는 픽셀 변화 없이 PNG의 31%~55% 크기였습니다. InSnap은 PNG나 JPEG만 저장하며, 일부 업로드 대상은 WebP를 받지 않으므로 변환하기 전에 대상이 무엇을 받는지 확인하세요.

다음 스크린샷은 단축키 하나면 됩니다.

macOS 14.4+(Apple 실리콘 및 Intel) · Windows 10+(64비트)