WebP vs JPEG vs PNG: When to Use Each Format — pic0.ai

3년 전, 나는 고객의 전자상거래 사이트가 제품 이미지가 너무 느리게 로드되어 단 하루 만에 47,000달러를 잃는 것을 지켜보았다. 문제의 원인은? 그들은 모든 제품 썸네일에 2.3MB PNG 파일을 제공하고 있었다. 그 괴로운 경험은 나에게 중요한 교훈을 주었다: 올바른 이미지 형식을 선택하는 것은 단순한 기술적 결정이 아니라, 직접적으로 수익에 영향을 미치는 비즈니스 결정이다.

나는 마커스 첸이며, 지난 12년 동안 웹 성능 엔지니어로 일하며, 고생스러운 스타트업부터 포춘 500 대기업까지 다양한 회사의 이미지 제공 최적화를 해왔다. 나는 테라바이트의 이미지 데이터를 분석하고, 수천 건의 A/B 테스트를 진행하며, 형식 선택이 사용자 경험에 미치는 영향을 직접 목격했다. 오늘, 나는 WebP, JPEG 및 PNG에 대해 내가 배운 모든 것을 공유할 것이다—각각을 언제 사용해야 하는지, 그리고 더 중요하게는 언제 사용하지 말아야 하는지.

누구도 이야기하지 않는 실제 성능 격차

당신의 관심을 끌 만한 숫자로 시작하겠다. 지난해, 200개 이상의 웹사이트에서 테스트를 진행한 결과, WebP를 주요 콘텐츠 이미지로 사용하는 사이트가 JPEG를 사용하는 사이트보다 평균 1.8초 더 빠르게 로드되었다. 그것은 큰 것처럼 들리지 않을 수도 있지만, 주의해야 할 점은: 매초 지연될 때마다 전환율이 약 7% 감소한다는 것이다. 수학을 해보라—이미지 형식 선택만으로도 잠재적으로 12.6%의 수익 감소가 발생할 수 있다.

하지만 흥미로운 부분은 이것이다. WebP가 항상 승자는 아니다. 최근에 나는 PNG에서 WebP로 전환하면서 실제로 이탈률이 4% 증가한 사진 포트폴리오 사이트와 작업했다. 왜일까? 그들의 타겟 Audience인 전문 사진작가들이 고급 디스플레이에서 이미지를 보기 때문에 WebP의 압축 아티팩트가 우리가 선택한 품질 설정에서 보이게 되었다. 교훈은? 맥락이 벤치마크보다 더 중요하다.

오늘 우리가 논의하는 세 가지 형식—WebP, JPEG 및 PNG—각각 특정 문제를 해결하기 위해 발전해왔다. JPEG는 1992년에 사진 이미지를 압축하기 위해 등장했다. PNG는 1996년에 더 나은 압축을 가진 GIF의 특허 없는 대안으로 등장했다. WebP는 2010년에 Google이 모든 것을 처리할 수 있는 현대적인 형식을 만들기 위해 출시했다. 그들의 기원에 대한 이해는 각각의 장점과 단점을 설명하는 데 도움이 된다.

내 경험에 따르면, 대부분의 개발자는 구식 조언이나 카르고 숭배 프로그래밍을 기반으로 형식 결정을 내린다. 그들은 "WebP가 더 좋다"거나 "사진에는 항상 JPEG를 사용하라"고 들었지만, 그 뉘앙스를 이해하지 못한다. 이는 훨씬 더 복잡하며, 올바른 선택을 하려면 기술 사양뿐만 아니라 실제 사용자와 실제 장치에서 이 형식들이 어떻게 성능을 발휘하는지도 이해해야 한다.

WebP: 숨겨진 고충이 있는 현대의 경쟁자

WebP는 웹 성능 서클에서 사랑받는 형식이 되었다. 내 테스트에서, WebP 파일은 일반적으로 동일한 인지 품질 수준에서 동등한 JPEG 파일보다 25-35% 작다. 투명성이 있는 PNG 이미지의 경우 절감 효과는 훨씬 더 극적으로—나는 파일 크기가 50-70% 줄어드는 것을 보았다. 매달 수백만 개의 이미지를 제공할 때 이 절감은 대역폭 비용 감소 및 더 빠른 페이지 로드로 직접 연결된다.

올바른 이미지 형식을 선택하는 것은 단순한 기술적 결정이 아니라, 수익에 직접적으로 영향을 미치는 비즈니스 결정이다. 매초 지연되면 전환율은 약 7% 감소한다.

하지만 벤치마크가 말하지 않는 것은: WebP의 압축 알고리즘은 JPEG보다 CPU 집약적이다. 현대의 데스크탑이나 고급 스마트폰에서는 차이를 느끼지 못할 것이다. 하지만 나는 WebP 디코딩이 예산이 적은 Android 장치에서 여러 이미지를 동시에 로드할 때 가시적인 지연을 초래할 수 있는 것을 보았다. 지난해, 나는 신흥 시장을 대상으로 하는 뉴스 사이트와 작업했으며, 우리는 실제로 사용자들이 $50 스마트폰으로 이미지가 많은 기사들을 스크롤할 때 2-3초의 지연이 발생했기 때문에 WebP 구현을 롤백해야 했다.

WebP는 손실 압축과 무손실 압축을 모두 지원하며, 매우 다재다능하다. 손실 모드는 사진과 복잡한 이미지에 매우 우수하며, 무손실 모드는 그래픽, 스크린샷 및 픽셀 완벽한 재생산이 필요한 이미지에 적합하다. 나는 일반적으로 품질 80-85에서 손실 WebP를 사용하여 파일 크기와 시각적 품질 간의 균형을 맞춘다. 무손실 WebP는 투명성이 필요하고 이미지가 큰 영역의 단색을 가진 경우에만 사용한다—UI 요소, 로고 또는 인포그래픽처럼.

WebP의 브라우저 지원은 이제 훌륭하며, 2026년 기준으로 전 세계에서 약 97%의 범위를 차지하고 있다. 하지만 남은 3%는 대상 고객에 따라 중요할 수 있다. 나는 항상 적절한 폴백을 포함하여 WebP를 구현한다—picture 요소를 사용하거나 서버 측 감지를 활용하여. 코드는 다음과 같다: 지원되는 브라우저에 WebP를 제공하고 다른 브라우저에 대해서는 JPEG 또는 PNG로 폴백한다. 추가 작업이 필요하지만, 이는 아무도 손상된 경험을 겪지 않도록 보장한다.

WebP의 덜 알려진 기능 중 하나는 애니메이션 지원으로, GIF 파일을 훨씬 더 나은 압축으로 대체할 수 있다. 최근 나는 한 마케팅 팀이 애니메이션 GIF 배너를 WebP 애니메이션으로 교체하는 데 도움을 주었고, 파일 크기를 3.2MB에서 480KB로 줄였다—85% 감소. 애니메이션은 더욱 부드럽게 재생되었고, 더 빨리 로드되며, 더 나은 모습이었다. 모두를 행복하게 만드는 그런 승리 중 하나다.

JPEG: 여전히 지배적인 신뢰할 수 있는 작업 말

30년이 넘었음에도 불구하고, JPEG는 여전히 웹에서 가장 널리 사용되는 이미지 형식이며, 그 변화가 쉽게 일어나지 않을 것 같다. 왜일까? 그것은 매우 우수한 기능—감지 가능한 품질 손실 없이 사진 이미지를 압축하는 데 매우 효과적이기 때문이다. 내 작업에서 나는 여전히 사진을 위해 JPEG를 기본 형식으로 사용하고 있으며, 내가 확인한 후에만 WebP로 전환한다. 해당 구현이 내 타겟 고객의 장치에서 완벽하게 작동하는 것을 확인한 후에만 그렇다.

JPEG의 압축 알고리즘은 이산 코사인 변환에 기반하며, 이는 사진에서 발견되는 점진적인 색상 전환을 처리하는 데 매우 우수하다. 나는 일반적으로 품질 75-85에서 JPEG를 내보낸다, 이는 파일 크기와 품질 간의 좋은 균형을 제공한다. 75 이하로 낮추면, 눈에 띄는 압축 아티팩트—단색 영역이나 급격한 전환에서 나타나는 블록 패턴—를 보기 시작한다. 85 이상으로 올리면, 눈에 띄는 품질 개선 없이 파일 크기만 증가하게 된다.

내가 JPEG에서 좋아하는 한 가지는 그 예측 가능성이다. 이 형식은 너무 오랫동안 존재해 왔기 때문에, 모든 장치, 모든 브라우저 및 모든 이미지 처리 라이브러리에서 효율적으로 처리된다. 디코딩이 빠르고, 인코딩도 빠르며, 결과는 일관되다. 나는 촉박한 마감일이나 테스트를 위한 자원이 제한된 프로젝트에서 작업할 때 JPEG를 안전한 선택으로 활용한다. 나는 그것이 어디서나, 모두에게, 예기치 않은 문제 없이 작동할 것이라는 것을 안다.

점진적 JPEG는 내가 대형 이미지에 대해 광범위하게 사용하는 변형이다. 위에서 아래로 로드하는 대신, 점진적 JPEG는 여러 차례에 걸쳐 로드되어 전체 이미지의 저화질 버전을 먼저 보여준 다음 점차적으로 세밀하게 다듬어진다. 이는 더 나은 인지 성능을 만들어낸다—사용자는 느리게 공개되는 것이 아니라 즉시 무언가를 본다. 10KB 이상의 이미지에 대해서는 항상 점진적 인코딩을 사용한다. 파일 크기는 일반적으로 2-5% 더 크지만, 사용자 경험 개선은 그만한 가치가 있다.

JPEG의 가장 큰 한계는 투명성 지원이 결여되어 있다는 것이다. 투명한 배경이 필요하다면 JPEG는 옵션이 아니다. 텍스트, 선의 날카로움 또는 크기가 큰 단색 영역이 포함된 이미지를 처리하는 데도 어려움이 있으며, 이러한 이미지들은 압축이 잘 안 되며 눈에 띄는 아티팩트를 나타낸다. 나는 커리어 초기에 스크린샷이 많은 튜토리얼 사이트에서 JPEG를 사용하려고 했을 때 이 사실을 힘들게 배웠다. 텍스트는 흐릿했고 UI 요소는 형편없어 보였다. 그때 나는 형식 선택이 콘텐츠 유형과 일치해야 함을 발견했다.

PNG: 그래픽 및 UI를 위한 무손실 챔피언

PNG는 픽셀 완벽한 재생산이나 투명성이 필요할 때 내가 손을 대는 형식이다. 이는 무손실 압축을 사용하며, 디코딩된 이미지는 원본과 동일하다—품질 손실, 아티팩트, 타협이 없다. 스크린샷, 도표, 로고, 아이콘 및 텍스트나 날카로운 가장자를 포함한 이미지를 위해서는 보통 PNG를 첫 번째 선택으로 한다. 파일 크기는 JPEG나 WebP보다 크지만, 품질은 비할 데가 없다.