이미지 압축과 품질: 절충점 이해하기

JPEG는 DCT(이산 코사인 변환)라는 수학적 트릭을 사용하여 이미지를 작은 8×8 픽셀 블록으로 분해합니다. 각 블록은 색상과 밝기 변동을 나타내는 수학 공식으로 변환됩니다. 다음 마법이 일어납니다: 고주파 세부 사항(세밀한 텍스처, 샤프한 모서리)이 버려지고 저주파 성분(부드러운 색상 전환)만 유지됩니다—눈이 가장 많이 인식하는 것입니다.

이것이 품질 설정이 들어오는 곳입니다. 품질 95는 더 적은 데이터를 버립니다. 품질 70은 더 많이 버립니다. JPEG 인코더는 양자화 테이블을 사용합니다—무엇을 유지하고 무엇을 버릴지 결정하는 수학적 규칙입니다. 품질 95에서 양자화는 부드럽습니다. 품질 50에서는 공격적입니다. 인코더는 남은 데이터를 무손실 알고리즘으로 압축하여 더욱 작은 파일 크기를 얻습니다.

PNG, WebP, TIFF는 무손실 압축을 사용합니다: 데이터가 버려지지 않고 중복 정보만 제거됩니다. PNG를 품질 9(최대)로 압축하면 픽셀 완벽하게 유지됩니다. '품질'은 압축이 얼마나 걸리는지이지, 데이터가 버려지는 것이 아닙니다. 이것이 PNG 파일이 더 크지만 반복 편집에 더 안전한 이유입니다.

가장 눈에 띄는 JPEG 아티팩트는 블록성입니다: 8×8 픽셀 블록이 작은 사각형으로 보입니다. 특히 샤프한 모서리나 높은 대비 영역 주변에서 눈에 띕니다. 품질 75에서는 대부분의 이미지에서 블록성이 거의 눈에 띄지 않습니다. 품질 40에서는 명확하고 못생깁니다. 텍스트 모서리가 가장 심합니다—품질 60으로 압축된 로고는 픽셀화되고 부드러워 보입니다.

링잉 아티팩트는 샤프한 모서리 주변에서 어두운 또는 밝은 테두리로 나타납니다. 품질 60에서 흰색 배경에 검은 줄을 압축하면 줄 주변에 희미한 어두운 윤곽이 보입니다. 이는 DCT 압축이 부드러운 전환을 가정하기 때문에 발생합니다. 샤프한 경계가 혼동됩니다. 품질을 80 이상으로 올리면 링잉이 급격히 줄어듭니다.

색상 번짐은 JPEG가 색상 서브샘플링을 사용할 때 발생합니다—색상 정보를 밝기보다 낮은 해상도로 저장합니다. 밝은 빨간색 줄이 파란색 옆에 있으면 보라색으로 번질 수 있습니다. 이는 일반적으로 품질 <70에서만 보이거나 매우 포화된 색상이 있을 때만 봅니다. 그래픽이 많은 고품질 JPEG는 품질 85 이상을 사용해야 합니다.

PSNR(Peak Signal-to-Noise Ratio) 및 SSIM(Structural Similarity Index)은 압축된 이미지가 원본과 얼마나 다른지 측정하는 수학적 메트릭입니다. PSNR 40dB는 인상적으로 들리지만 인간은 PSNR로 선형적으로 품질을 인식하지 않습니다. PSNR 35dB 이미지는 허용 가능해 보일 수 있지만 PSNR 28dB는 쓰레기처럼 보입니다. 하지만 '노이즈 수준'의 차이는 숫자상으로 훨씬 큽니다.

SSIM은 지각 품질 지표보다 PSNR보다 인간 시각과 더 잘 상관합니다. SSIM 0.95는 일반적으로 이미지가 원본과 거의 동일하게 보인다는 의미입니다. 0.85는 좋습니다. 0.75는 웹 사용에 허용됩니다. 0.60은 눈에 띄게 저하됩니다. 하지만 SSIM도 인간 지각과 완벽하게 일치하지 않습니다—약간 흐릿한 이미지가 구조적으로 유사하면 높은 SSIM을 가질 수 있지만 흐림이 눈에 띕니다.

최선의 접근: 측면 비교 도구를 사용하여 다양한 품질 수준에서 자신의 이미지를 테스트합니다. 히어로 이미지(품질 85+, SSIM >0.90)에 허용되는 것은 썸네일(품질 70, SSIM 0.80)에 과할 수 있습니다. 메트릭이 아닌 눈을 믿으세요.

웹 히어로 이미지 및 제품 사진: 품질 80~90. 이들은 크고 눈에 띕니다. 방문자가 직접 보고 있습니다. JPEG 아티팩트는 낮은 품질에서 명확합니다. WebP는 비슷한 품질을 75~80에서 달성하므로 20~30% 파일 크기를 절감할 수 있습니다. 4MP 제품 사진은 품질 85에서 일반적으로 150~250KB입니다.

썸네일 및 갤러리 이미지: 품질 70~75. 더 작은 크기는 압축 아티팩트가 덜 눈에 띈다는 의미입니다. 방문자는 이들을 스크롤하고 직시하지 않습니다. 품질 70 WebP는 종종 품질 80 JPG와 구별할 수 없습니다. 파일 크기는 썸네일당 30~80KB로 떨어집니다.

보관 및 인쇄: 품질 95 또는 PNG. 원본 이미지를 향후 편집 또는 인쇄를 위해 저장하는 경우 최고 품질 또는 무손실 PNG를 사용합니다. 웹 품질 JPEG의 300DPI 인쇄는 나쁩니다. 품질 95 이상 JPEG 또는 PNG가 필요합니다. 이것이 파일 크기가 부차적인 유일한 경우입니다.

소셜 미디어: 품질 60~70. 대부분의 플랫폼이 어차피 압축합니다. 고품질 JPEG는 여전히 Instagram 또는 Facebook의 서버를 통과하면서 데이터를 잃습니다. 업로드 시간과 대역폭을 절감합니다(품질 65 JPEG). 플랫폼이 재압축합니다. 추가 작업을 하지 마세요.

이메일 첨부: 사진의 경우 품질 50~60, 그래픽의 경우 PNG. 이메일 클라이언트는 이미지 표시 방식이 다양합니다. 느린 연결의 수신자는 더 작은 파일 크기에서 이점을 얻습니다. 품질 55 JPEG 썸네일은 20~40KB입니다. 품질 75는 100KB 이상입니다. 이메일은 완벽함의 자리가 아닙니다.

일부 이미지 편집기에서는 '최대 품질' 또는 '100%'로 저장할 수 있습니다. 압축이 없는 것처럼 들립니다. JPEG에서 '품질 100'은 여전히 DCT 및 양자화를 사용합니다. 가장 온화한 양자화 테이블을 사용합니다. 품질 100의 JPEG는 여전히 손실이며 여전히 원본 압축되지 않은 이미지보다 작습니다. 대략 무손실이지만 실제로는 무손실이 아닙니다.

PNG 압축 9(최대)는 진정으로 무손실입니다—모든 픽셀이 보존되지만 파일은 ZIP과 유사한 알고리즘으로 압축됩니다. 품질 9 PNG는 압축되지 않은 픽셀 데이터보다 작지만 품질 95 JPEG보다 큽니다. 픽셀 완벽한 보존이 필요하면 품질 100 JPEG가 아닌 PNG를 사용합니다.

압축되지 않은 이미지 형식(TIFF, RAW)은 캡처되는 그대로 모든 픽셀을 정확히 저장합니다. 압축이 없습니다. 이들 파일은 JPEG보다 10~50배 더 큽니다. 하지만 보관 또는 추가 편집의 경우 완벽합니다. 웹 배송 또는 공유에는 적합하지 않으며 전문 워크플로우 및 장기 저장만 해당합니다.

JPEG를 여러 번 저장하면 손상이 곱해집니다. 이미지를 품질 90으로 압축한 후 편집기에서 열고 품질 90에서 다시 저장합니다. 각 저장은 DCT 양자화를 적용하고 데이터를 조금 더 버립니다. 3~5번 저장한 후 아티팩트는 누적됩니다: 모서리가 흐릿해지고 색상이 변하며 이미지는 점진적으로 악화됩니다. 이를 세대 손실이라고 합니다.

JPEG 파일을 직접 편집하지 마세요. 항상 원본을 PNG 또는 압축되지 않은 형식(TIFF, RAW)으로 유지합니다. 원본을 편집한 다음 완료되면 JPEG로 저장합니다. 무손실 원본에서 품질 85로 한 번 저장하면 편집되고 다시 저장되고 다시 편집된 JPEG보다 훨씬 낫습니다.

동일한 이 WebP에 적용됩니다: 여러 번 저장을 피합니다. PNG에서 편집 워크플로우를 사용한 다음 최종 단계로 WebP로 변환합니다. 일부 도구가 이를 자동화합니다—PNG를 업로드하고 WebP + JPEG을 자동으로 얻습니다—따라서 다시 저장하지 않습니다. 이는 품질을 보존하고 누적 아티팩트 문제로부터 보호합니다.

JPEG은 색상(크로마) 정보를 밝기(루마)보다 낮은 해상도로 저장할 수 있습니다. 이를 4:2:0 크로마 서브샘플링이라고 합니다—색상은 밝기 해상도의 1/4로 저장됩니다. 부드럽고 점진적인 색상의 사진의 경우 보이지 않습니다. 인간의 눈은 밝기 세부 사항보다 색상 세부 사항에 덜 민감합니다. 파일 크기는 가시적인 품질 손실 없이 10~20% 떨어집니다.

4:2:0 서브샘플링은 높은 대비 모서리에서 눈에 띄는 색상 번짐을 일으킵니다: 파란색 옆의 날카로운 빨간 줄은 그 사이에 흐릿한 보라색 전환이 있습니다. 이미지에 포화 색상, 샤프한 줄 또는 단색이 만나는 로고가 있으면 4:4:4 크로마(서브샘플링 없음)를 사용하거나 WebP를 선택합니다. 이는 이를 더 잘 처리합니다.

JPEG 품질과 크로마 서브샘플링을 선택할 때 사진가는 일반적으로 품질 75를 4:2:0과 함께 사용할 수 있고 탁월한 결과를 얻습니다. 그래픽 디자이너는 품질 85 이상을 4:4:4와 함께 사용해야 합니다. 웹 도구는 일반적으로 더 작은 파일을 위해 4:2:0으로 기본값을 설정하지만 일반적으로 이 설정을 조정할 수 있습니다. 무엇을 하고 있는지 알고 따라서 선택합니다.