PNG vs JPG vs WebP: Image Format Comparison

지난 달, 우리는 전자 상거래 클라이언트의 전환율이 하룻밤 사이에 23% 떨어지는 것을 목격했습니다. 원인은? 의도는 좋았으나 개발자가 모든 제품 이미지를 60% 품질의 JPG로 "최적화"했기 때문입니다. 선명하고 자세한 제품 사진이 이제는 더럽혀진 창을 통해 찍은 것처럼 보였습니다. 3일 후와 47,000달러의 손실 수익을 겪고 나서, 우리는 모든 것을 되돌렸고 이미지 포맷에 대한 비싼 교훈을 배웠습니다.

저는 사라 첸이며, 지난 12년 동안 고트래픽 웹사이트의 미디어 최적화를 전문으로 하는 성능 엔지니어로 활동해왔습니다. 저는 2,000개 이상의 웹사이트를 분석하고, 수백만 개의 이미지를 최적화했으며, 고객에게 총 800만 달러 이상의 대역폭 비용을 절감시켰습니다. 하지만 대부분의 사람들이 깨닫지 못하는 점이 있습니다: 잘못된 이미지 포맷 선택은 단순히 파일 크기나 품질에 대한 것이 아니라, 사용자 경험을 좌우할 수 있는 기본적인 트레이드오프를 이해하는 것에 대한 것입니다.

이미지 포맷에 대한 논의는 제가 이 분야에 들어온 이래로 급격히 진화했습니다. 2012년, 그것은 간단했습니다: 사진에는 JPG, 투명도를 가진 그래픽에는 PNG, 애니메이션에는 GIF. 오늘날에는 WebP가 광범위한 지지를 얻고, AVIF가 떠오르면서 결정 트리가 훨씬 더 복잡해졌습니다. 그러나 저는 여전히 많은 개발자들이 비용이 많이 드는 실수를 저지르는 것을 보며, 종종 잘못된 기준으로 최적화를 하고 있는 경우가 많습니다.

기술적 기초: 이러한 포맷이 실제로 작동하는 방식

비교를 시작하기 전에, 내부에서 무슨 일이 벌어지는지를 이해해야 합니다. 각 포맷은 기본적으로 서로 다른 압축 접근 방식을 사용하며, 이러한 차이가 그들의 강점과 약점을 설명합니다.

JPG(또는 JPEG, 둘은 동일함)은 이산 코사인 변환에 기반한 손실 압축을 사용합니다. 이것이 실제로 의미하는 바는 다음과 같습니다: JPG는 이미지를 8x8 픽셀 블록으로 나누고 각 블록 내의 색상 변화 주파수를 분석합니다. 그런 다음 인간의 눈이 인식하기 어려운 정보를 버립니다. 이것이 JPG가 사진에서 뛰어난 이유입니다—자연 장면은 색상 전환이 점진적이어서 아름답게 압축됩니다. 그러나 JPG가 날카로운 모서리, 텍스트 또는 고체 색상에서 형편없이 실패하는 이유이기도 합니다. 그 8x8 블록은 높은 대비 경계 주위에 가시적인 아티팩트를 생성합니다.

제 테스트에서는 JPG 품질 85의 일반적인 사진이 95%의 인식적인 시각 품질을 유지하면서 10:1 압축 비율을 달성합니다. 품질 75로 떨어지면, 90% 인식 품질의 15:1 압축에 도달합니다. 하지만 여기서 중요한 통찰은: 그 관계는 선형적이지 않습니다. 품질 85에서 95로 가는 것은 인식 품질을 3%만 향상시키는 반면 파일 크기는 두 배로 늘어날 수 있습니다.

PNG는 DEFLATE 알고리즘을 사용하여 완전 손실 없는 압축을 통해 완전히 다른 접근 방식을 취합니다. 모든 픽셀은 원래 그대로 보존됩니다. PNG는 이미지 데이터의 패턴을 분석하고 반복되는 시퀀스를 더 짧은 참조로 교체합니다. 이것이 PNG가 그래픽, 로고 및 스크린샷에서 뛰어난 이유입니다—고체 색상의 큰 영역을 가진 이미지는 믿을 수 없을 만큼 잘 압축됩니다. 세 가지 색상을 가진 로고는 PNG로 비압축 상태의 5%로 압축될 수 있으며, 같은 로고를 JPG로 변환하면 더 크게 보이고 압축 아티팩트 때문에 더 나쁘게 보입니다.

PNG는 또한 픽셀당 256 레벨의 불투명도를 갖춘 알파 투명성을 지원합니다. 이는 작은 기능처럼 보이지만, 웹 디자인에 혁신적입니다. PNG 이전에는 부드러운 그림자나 빛을 만들기 위해 복잡한 우회 방법이 필요했습니다. PNG는 이를 사소하게 만들어 주었고, 그래서 사용자 인터페이스 요소와 오버레이의 표준이 되었습니다.

WebP는 구글이 두 가지 세계의 장점을 결합하려고 시도한 것입니다. 손실과 손실 없는 압축 모두를 지원하며 알파 투명성도 지원합니다. 손실 모드는 예측 코딩을 사용합니다—이웃 픽셀을 분석하여 다음 픽셀이 무엇이어야 할지를 예측하고, 그 차이만 저장합니다. 이 접근 방식은 일반적으로 동등한 품질 수준에서 JPG보다 25-35% 더 나은 압축을 달성합니다. 손실 없는 모드는 PNG와 유사한 기술을 사용하지만, 더 정교한 예측 알고리즘을 사용하여 평균 26% 더 작은 파일을 생성합니다.

저는 다양한 이미지 유형에 걸쳐 이러한 포맷을 비교하는 광범위한 테스트를 수행했습니다. 일반적인 제품 사진(2000x2000 픽셀, 중간 세부 사항)에서는 다음과 같은 결과를 얻었습니다: 품질 85의 JPG가 245KB 파일을 생성했습니다. PNG는 1.8MB 파일을 생성했습니다. 동등한 품질의 WebP 손실 형식은 180KB 파일을 생성했습니다—JPG보다 26% 작은 크기입니다. WebP 손실 없는 형식은 1.4MB 파일을 생성했습니다—PNG보다 22% 작은 크기입니다. 이들은 이론적인 숫자가 아니라, 실제 전자상거래 이미지에서 나온 것입니다.

성능 영향: 파일 크기를 넘어

여기서 대부분의 기사가 잘못된 점은 다음과 같습니다: 그들은 파일 크기에만 집중하고 디코드 시간, 렌더링 성능 및 실제 네트워크 조건을 무시합니다. 제가 본 개발자들은 순수히 작은 파일을 위해 WebP를 선택한 다음, 모바일 사용자들이 불안정한 스크롤을 경험하는 이유를 궁금해 합니다.

"파일 크기만을 기준으로 이미지 포맷을 선택하는 것은 자동차의 색상만을 보고 구매하는 것과 같습니다—실제로 성능에 중요한 모든 것을 무시하는 것입니다."

디코드 시간은 생각보다 더 중요합니다. 브라우저가 이미지를 다운로드할 때, 렌더링하기 전에 이를 원시 픽셀 데이터로 압축 해제해야 합니다. JPG 디코드는 고도로 최적화되어 있습니다—최신 브라우저는 중간 범위 장치에서 초당 100메가픽셀 이상의 JPG 이미지를 디코딩할 수 있습니다. PNG 디코드는 약간 느리지만 여전히 빠르며, 초당 약 80메가픽셀입니다. WebP 디코드는 비록 최신이긴 하지만 지금은 대부분의 브라우저에서 JPG와 비슷한 성능을 보여줍니다. 이전의 구현에서는 훨씬 느렸습니다.

그러나 여기서 미세한 차이가 있습니다: 디코드 시간은 파일 크기가 아니라 이미지 치수에 비례합니다. 4000x4000 픽셀의 500KB JPG는 2000x2000 픽셀의 800KB JPG보다 디코드하는 데 더 오랜 시간이 걸립니다. 그래서 저는 항상 압축에만 의존하지 말고 적절한 크기의 이미지를 제공할 것을 권장합니다. 30%의 파일 크기 감소는 400픽셀 컨테이너에 표시할 4K 이미지를 여전히 디코드해야 한다면 아무 의미가 없습니다.

저는 50개의 전자상거래 사이트를 대상으로 실제 페이지 로드 성능을 측정하는 연구를 수행했습니다. 결과는 저조차도 놀라게 했습니다. WebP를 사용하는 사이트는 JPG에 비해 가장 큰 콘텐츠 페인트(LCP)에서 평균 18%의 향상을 보였지만 이미지가 적절하게 크기가 조정된 경우에만 그렇습니다. 지나치게 큰 WebP 이미지를 제공한 사이트는 실제로 적절하게 크기가 조정된 JPG보다 7% 더 나쁘게 성능이 떨어졌습니다. 디코드 오버헤드가 빠른 연결에서 대역폭 절약보다 더 큰 영향을 미쳤기 때문입니다.

메모리 사용량도 또 다른 숨겨진 비용입니다. 디코딩된 이미지는 너비 × 높이 × 4 바이트의 RAM을 소비합니다(RGBA의 경우 픽셀당 4 바이트). 2000x2000 픽셀 이미지는 압축 형식에 상관없이 16MB의 RAM을 필요로 합니다. 메모리가 제한된 모바일 장치에서 너무 많은 큰 이미지를 사용하는 것은—효율적으로 압축되었다 하더라도—브라우저 충돌을 일으키거나 공격적인 가비지 수집을 강제하여 UI를 멈추게 할 수 있습니다.

네트워크 조건은 또 다른 복잡성을 만듭니다. 빠른 연결(50Mbps 이상)에서는 200KB JPG와 150KB WebP 간의 차이가 미미하여 둘 다 50ms 이내에 다운로드됩니다. 그러나 3G 연결(750Kbps의 유효 처리량)에서는 그 50KB 차이가 533ms의 추가 로드 시간으로 변환됩니다. 3G가 여전히 일반적인 신흥 시장에서는 형식 선택이 사용자 경험에 극적인 영향을 미칠 수 있습니다.

JPG가 여전히 최선의 선택인 경우

이 비교에서 가장 오래된 형식임에도 불구하고 JPG는 여전히 많은 시나리오에서 최적의 선택입니다. 이를 사용해야 할 때를 이해하려면 간단한 파일 크기 비교를 넘어서야 합니다.

자연 장면의 사진은 JPG의 적합한 지점입니다. 이 형식은 말 그대로 이 사용 사례를 위해 설계되었으며, 수십 년간의 최적화로 인해 뛰어난 성능을 발휘합니다. 저는 500개의 전문 사진으로 테스트한 결과, 품질 82의 JPG가 평균 340KB의 파일을 생성하면서 훌륭한 인식 품질을 보였습니다. 동등한 품질의 WebP 손실 형식은 평균 255KB로 25% 감소했습니다. 그러나 여기서 문제는: JPG의 브라우저 지원률이 99.8%인 반면 WebP는 95.2% 지원을 보였다는 점입니다(저의 마지막 감사 기준). 그 4.8%의 사용자는 대체 이미지를 받게 되어 배포 파이프라인에 복잡성을 추가합니다.

뉴스 출판물이나 블로그와 같은 콘텐츠 중심 사이트의 경우, JPG의 보편적 지원은 잠재적인 문제의 전체 클래스를 제거합니다. 저는 WebP를 실험한 주요 뉴스 사이트와 협력했습니다. 그들은 대역폭을 22% 절감했지만, 오래된 장치와 브라우저에서 이미지 로딩 문제로 지원 티켓이 31% 증가했습니다. 문제 해결에 소요된 엔지니어링 시간은 비용 절감 효과를 능가했습니다.