WebP 무손실이 PNG보다 실제로 절약해 주는 것

짧은 요약

WebP 무손실은 같은 픽셀 기준으로 PNG보다 더 작은 경우가 많습니다. 사람들이 사용하는 실용적인 이유는 바로 이것입니다.

하지만 "많다"라는 말이 중요합니다. WebP 무손실은 모든 PNG를 대체하는 마법 같은 형식이 아닙니다. 투명도가 있는 이미지, 스크린샷, UI 캡처, 그래픽과 사진이 섞인 콘텐츠에서 가장 큰 절감 효과를 내는 경향이 있습니다. 반대로 아주 작은 에셋, 고도로 최적화된 팔레트 PNG, 단순한 아이콘에서는 절감 폭이 작거나, 드물게는 더 커질 수도 있습니다.

실제 웹사이트를 최적화하고 있다면 올바른 질문은 "WebP가 PNG보다 나은가?"가 아닙니다. 질문은 이렇게 바뀌어야 합니다. "내 PNG 중 어떤 것들이 호환성이나 워크플로 문제 없이 WebP 무손실로 의미 있게 작아지는가?"

이것은 더 좁은 질문이고, 훨씬 답하기 쉽습니다.

여기서 "무손실"이 의미하는 것

무손실은 디코딩된 픽셀이 원본 픽셀과 정확히 일치한다는 뜻입니다. PNG를 WebP 무손실로 변환한 뒤 다시 디코딩하면 이미지 픽셀은 동일해야 합니다.

파일 자체가 같다는 뜻은 아닙니다. 메타데이터, 색상 프로필 처리, 부가적인 PNG 청크, 감마 정보, 타임스탬프, 도구별 청크는 변환 파이프라인에 따라 변경되거나 제거되거나 다르게 표현될 수 있습니다.

이 구분은 아카이브 이미지, 인쇄 워크플로, 과학 이미지, 법적 증거, 또는 파일 컨테이너가 중요한 비픽셀 정보를 담고 있는 모든 상황에서 중요합니다. 일반적인 웹 전달에서는 대부분의 팀이 주로 시각적 픽셀, 투명도, 치수, 색상 일관성을 중요하게 봅니다.

사용자가 제공한 이미지를 게시한다면 메타데이터는 개인정보 문제이기도 합니다. 이 더 넓은 주제는 온라인에서 사진을 공유하기 전에 EXIF 메타데이터를 제거하는 방법에서 다루었지만, 같은 원칙이 여기에도 적용됩니다. 이미지 최적화는 무엇을 보존하고 무엇을 제거하는지 명확해야 합니다.

PNG가 잘 압축되는 이유와 한계

PNG는 매우 좋은 형식입니다. 웹의 기본값이 된 데에는 그럴 만한 이유가 있습니다.

• 무손실입니다.
• 알파 투명도를 지원합니다.
• 폭넓게 지원됩니다.
• 예측 가능하고 다루기 쉽습니다.
• 플랫 그래픽, 스크린샷, 로고, UI 에셋에 탁월합니다.

PNG 압축은 이미지 행을 필터링한 다음 DEFLATE 압축을 적용하는 방식으로 작동합니다. 이 조합은 특히 주변 픽셀이 비슷할 때 효과적입니다.

문제는 PNG가 나쁘다는 것이 아닙니다. 문제는 PNG가 오래된 형식이라는 점입니다. PNG의 압축 모델은 최신 형식보다 사용할 수 있는 기법이 적습니다. 좋은 인코더로 PNG를 최적화한 뒤에도, 형식 자체가 일부 패턴을 WebP 무손실만큼 효율적으로 표현하지 못해 여전히 바이트를 남겨둘 수 있습니다.

여기서 WebP 무손실이 등장합니다.

WebP 무손실이 다르게 하는 것

WebP 무손실은 필터링된 행 위에 범용 압축 계층을 덧붙인 방식이 아니라, 이미지에 맞게 설계된 압축 시스템을 사용합니다. 내부적으로는 예측 코딩, 색상 변환, 팔레트, 역방향 참조, 엔트로피 코딩 같은 기법을 사용해 반복적이거나 예측 가능한 픽셀 패턴을 간결하게 표현할 수 있습니다.

구현 세부 사항을 외울 필요는 없습니다. 유용한 사고 모델은 이렇습니다.

PNG는 행을 잘 압축합니다. WebP 무손실은 이미지 구조를 설명하는 방법이 더 많습니다.

이 추가적인 유연성 때문에 WebP 무손실은 같은 원본 이미지에서 더 작은 파일을 자주 만들어낼 수 있습니다.

Google은 과거 자체 연구에서 WebP 무손실 이미지가 평균적으로 PNG보다 약 26% 작다고 설명한 바 있습니다. 이것은 약속이 아니라 방향성을 보여주는 기준으로 받아들이는 것이 좋습니다. 여러분의 이미지는 평균이 아닙니다. 디자인 시스템, 스크린샷, 제품 사진, 일러스트레이션, 내보낸 에셋, CMS 업로드는 저마다 다른 양상을 보입니다.

WebP 무손실이 보통 가장 많이 절약하는 곳

투명 이미지

PNG는 알파 투명도 때문에 흔히 사용됩니다. WebP 무손실도 알파를 지원하며, 이를 효율적으로 압축하는 경우가 많습니다.

다음에 유용합니다.

• 제품 누끼 이미지
• 스티커와 배지
• 인터페이스 오버레이
• 투명 배경이 있는 다이어그램
• 필요 이상으로 크게 내보낸 로고

알파 채널에 예측 가능한 큰 영역, 부드러운 가장자리, 반복되는 형태가 포함되어 있으면 절감 효과가 눈에 띌 수 있습니다. 투명 제품 이미지가 가득한 카탈로그가 있다면 WebP 무손실은 초기에 테스트해 볼 가치가 있습니다.

스크린샷과 UI 캡처

스크린샷에는 넓은 단색 영역, 반복되는 인터페이스 구성 요소, 텍스트, 아이콘, 그림자, 그리고 일부 사진 영역이 함께 들어 있는 경우가 많습니다. 이 조합은 특히 큰 크기에서 PNG에 부담스러울 수 있습니다.

WebP 무손실은 이런 이미지를 잘 처리하는 경우가 많습니다. 최적화된 PNG로 900 KB인 전체 페이지 UI 스크린샷이 무손실 WebP로 500–700 KB가 될 수 있습니다. 때로는 절감 폭이 더 큽니다. 때로는 더 작습니다. 하지만 이 범주는 가능성이 높습니다.

이런 스크린샷이 문서, 마케팅 페이지, 온보딩 흐름, 사례 연구에 나타난다면 누적 효과는 실제로 커질 수 있습니다.

일러스트레이션과 이미지가 섞인 콘텐츠

많은 현대 웹 그래픽은 순수한 일러스트레이션도, 순수한 사진도 아닙니다. 제품 UI, 그라디언트, 작은 아이콘, 텍스트 레이블, 삽입된 사진이 들어 있는 hero 이미지를 생각해 보세요.

PNG는 이를 완벽하게 보존할 수 있지만 파일이 커질 수 있습니다. 손실 WebP나 AVIF는 너무 강하게 압축하면 텍스트와 가장자리 주변에 아티팩트를 만들 수 있습니다. 정확한 가장자리가 중요할 때 WebP 무손실은 합리적인 중간 지점이 될 수 있습니다.

AVIF와 손실 WebP를 포함한 이미지 형식 전반의 더 넓은 의사결정 트리는 2026년 이미지 형식: AVIF가 WebP를 이기는 때와 그렇지 않은 때를 참고하세요.

PNG가 여전히 더 나을 수 있는 곳

작은 아이콘과 단순한 에셋

아주 작은 파일에서는 형식 오버헤드가 중요합니다. 650바이트짜리 PNG 아이콘은 변환할 명확한 후보가 아닙니다. WebP가 80바이트를 줄일 수도 있고, 오히려 더 커질 수도 있습니다.

그 정도 규모에서는 운영 복잡성이 이점보다 클 수 있습니다. 파일이 이미 아주 작고, 렌더링을 막지 않으며, 오랫동안 캐시된다면 아마도 고칠 만한 더 중요한 것이 있을 것입니다.

신중하게 최적화된 팔레트 PNG

일부 PNG는 제한된 팔레트를 사용하기 때문에 사람들이 예상하는 것보다 훨씬 작습니다. 좋은 indexed-color PNG는 단순한 그래픽에서 이기기 어려울 수 있습니다.

특히 다음에 해당합니다.

• 작은 로고
• 픽셀 아트
• 플랫 아이콘
• 단순한 다이어그램
• 색상이 적은 그래픽

WebP를 허술한 PNG 내보내기 파일과 비교할 때는 주의해야 합니다. PNG가 불필요한 메타데이터와 좋지 않은 압축 설정을 가진 채 디자인 도구에서 바로 나온 것이라면 WebP가 극적으로 좋아 보일 수 있습니다. 그렇다고 WebP가 잘 최적화된 PNG를 같은 폭으로 이겼다는 뜻은 아닙니다.

공정한 테스트는 WebP 무손실을 최적화된 PNG와 비교하는 것입니다. 우연히 업로드된 파일과 비교하는 것이 아닙니다.

애초에 손실 형식이어야 하는 이미지

조용히 자주 일어나는 실수는 이것입니다. 팀이 처음부터 PNG가 아니어야 했던 이미지를 WebP 무손실로 변환하는 것입니다.

사진이 보통 그런 경우입니다. 풀컬러 사진을 PNG로 저장하면 용량이 엄청날 수 있습니다. 이를 WebP 무손실로 변환하면 파일이 줄어들 수는 있지만, 보통 고품질 손실 WebP나 AVIF보다 여전히 훨씬 큽니다.

사용자가 차이를 인지할 수 없다면 무손실은 대개 잘못된 목표입니다. 제품 사진, 편집 이미지, 배경, 인물 사진은 일반적으로 합리적인 품질 설정을 가진 손실 형식에 더 적합합니다.

무손실은 정확한 픽셀이 중요한 경우에 남겨 두어야 합니다. UI 스크린샷, 다이어그램, 텍스트가 많은 그래픽, 투명도, 생성된 차트, 손실 압축에서 눈에 띄게 저하되는 에셋이 여기에 해당합니다.

바이트 외에 절약하는 것

가장 분명한 절감은 전송 크기입니다. 이미지 파일이 작아지면 보통 대역폭이 줄고, 다운로드가 빨라지며, 느린 연결에서 더 나은 동작을 보입니다.

하지만 부수적인 이점도 있습니다.

• 종량제 요금제를 쓰는 방문자의 데이터 사용량 감소
• 더 빠른 이미지 캐시 채우기
• CDN 대역폭 감소
• 규모가 커질 때 스토리지와 백업 용량 감소
• 성능 예산에 가해지는 부담 감소

이 절감은 균등하게 분포하지 않습니다. 2 MB짜리 PNG 하나를 900 KB WebP로 바꾸는 것이, 아이콘 50개를 각각 100바이트씩 줄이는 것보다 더 중요합니다.

그래서 이미지 최적화는 형식에 대한 신념이 아니라 페이지 영향도를 기준으로 우선순위를 정해야 합니다. Lighthouse가 이미지 전달을 지적한다면 그것을 판결이 아니라 단서로 읽으세요. 당황하지 않고 Lighthouse 보고서를 읽는 방법 가이드는 의미 있는 성능 문제와 시끄러운 진단을 구분하는 방법을 설명합니다.

디코드 비용의 트레이드오프

파일이 작다는 것만이 성능 변수는 아닙니다. 브라우저는 이미지를 그리기 전에 디코딩도 해야 합니다.

PNG 디코딩은 성숙했고 보통 빠릅니다. WebP 디코딩도 폭넓게 지원되고 효율적이지만, 어떤 경우에는 CPU 비용이 더 들 수 있습니다. 최신 기기에서는 거의 장애물이 되지 않지만, 저사양 휴대폰, 이미지가 많은 페이지, 또는 큰 above-the-fold 에셋에서는 측정해 볼 가치가 있습니다.

실용적인 규칙은 이렇습니다. WebP 무손실이 큰 PNG를 30–50% 줄인다면 네트워크 절감이 대개 우세합니다. 작은 PNG를 3% 줄인다면 그 트레이드오프는 아마 신경 쓸 가치가 없습니다.

성능 작업에는 이런 임계값 결정이 가득합니다. 모든 바이트를 같은 강도로 최적화하지 마세요.

간단한 테스트 방법

이미지 하나가 아니라 대표성 있는 묶음을 사용하세요.

실제 사이트에서 가져온 예시로 폴더를 만드세요.

• 로고와 아이콘
• 스크린샷
• 제품 누끼 이미지
• 다이어그램
• CMS에 업로드된 PNG
• 소셜 미리보기 이미지
• 큰 hero 그래픽

그런 다음 세 가지를 비교하세요.

1. 업로드된 원본 PNG
2. 최적화된 PNG
3. WebP 무손실 버전

명령줄 워크플로에서는 팀들이 oxipng, pngcrush, zopflipng, 또는 cwebp -lossless 같은 도구를 자주 사용합니다. 정확히 어떤 도구인지는, 같은 조건끼리 비교하는 규율보다 덜 중요합니다.

추적할 항목은 다음과 같습니다.

• 파일 크기
• 디코딩 후 픽셀 동일성
• 대상 브라우저에서의 시각적 렌더링
• 투명도 정확성
• 색상 표시
• 빌드 시간
• CMS 또는 디자인 워크플로의 마찰

간단한 스프레드시트면 충분합니다. 원본 파일 크기, 최적화된 PNG 크기, WebP 무손실 크기, 절감 비율, 이미지가 나타나는 페이지를 추가하세요.

그런 다음 총 절감 바이트순으로 정렬하세요. 그 정렬 순서가 보통 무엇을 해야 할지 알려줍니다.

전달: 오래된 클라이언트를 가볍게 깨뜨리지 마세요

WebP 지원은 이제 최신 브라우저 전반에 넓게 퍼져 있습니다. 대부분의 공개 웹사이트에서는 사용해도 안전합니다. 그래도 embedded webview, 이메일 클라이언트, 레거시 기업 브라우저, 네이티브 앱, 특이한 크롤러가 섞여 있다면 PNG를 바로 대체하기 전에 테스트하세요.

보수적인 패턴은 PNG를 폴백으로 유지하고, 지원되는 곳에는 WebP를 제공하는 것입니다.

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

이 접근법은 지루합니다. 그리고 지루한 것은 좋습니다. WebP를 지원하는 사용자는 더 작은 파일을 받습니다. 그 밖의 모든 사용자는 PNG를 받습니다.

빌드 시스템이 에셋에 fingerprint를 붙이고 CDN이 이를 제대로 캐시한다면 유지 관리가 어렵지 않습니다. CMS에서 대체 형식을 다루기 어렵다면, 한 번의 스프린트에 전체 미디어 라이브러리를 변환하려고 하기보다 가장 크고 가장 자주 반복되는 이미지부터 시작하세요.

개인정보와 로컬 처리

이미지 변환은 빌드 파이프라인이나 서버 측 미디어 서비스에서 일어나는 경우가 많습니다. 많은 팀에는 괜찮은 방식입니다. 하지만 민감한 스크린샷, 고객 업로드, 내부 문서를 다룬다면 파일이 어디에서 처리되는지 인지해야 합니다.

브라우저 측 이미지 도구는 많은 간단한 변환, 미리보기, 메타데이터 확인에 충분할 만큼 좋아졌습니다. 한계는 있지만, 로컬 처리는 개인 이미지의 불필요한 업로드를 줄일 수 있습니다. 이 트레이드오프는 브라우저에서 이미지를 처리하는 것이 개인정보 측면에서 이점인 이유에서 다루었습니다.

내부 에셋의 경우 핵심은 정책의 명확성입니다. 이미지가 기기를 떠나는지, 변환된 버전이 어디에 저장되는지, 메타데이터가 보존되는지 알아야 합니다.

실용적인 경험칙

다음 세 가지가 모두 참일 때 WebP 무손실을 사용하세요.

• 원본이 현재 PNG입니다.
• 정확한 픽셀이나 깨끗한 투명도가 중요합니다.
• 최적화된 PNG와 비교한 뒤 WebP 무손실이 의미 있는 양을 절약합니다.

다음 경우에는 PNG를 유지하세요.

• 파일이 아주 작습니다.
• PNG가 이미 팔레트 최적화되어 있고 경쟁력이 있습니다.
• 호환성 제약이 특이합니다.
• 운영 복잡성이 절약되는 바이트만큼의 가치가 없습니다.

다음 경우에는 손실 WebP 또는 AVIF를 사용하세요.

• 이미지가 사진입니다.
• 정확한 픽셀이 중요하지 않습니다.
• 품질 설정으로 눈에 띄는 손상 없이 크기를 크게 줄일 수 있습니다.

최고의 이미지 전략은 모든 곳에 하나의 형식을 쓰는 경우가 드뭅니다. 일관되게 적용되는 작은 규칙 집합에 가깝습니다.

<!-- tool-cta:start -->

💡 이것을 시도해 보세요: 동일한 PNG를 Image Converter에 통과시켜 무손실 WebP 버전을 만들고 파일 크기를 직접 비교하세요.

<!-- tool-cta:end -->

그렇다면 WebP 무손실은 실제로 무엇을 절약할까요?

PNG가 압축 기법을 다 써버린 곳에서 바이트를 절약합니다. 때로는 10% 정도의 완만한 절감입니다. 때로는 큰 투명 이미지를 거의 절반으로 줄이기도 합니다. 실제 사이트 전체에서는 절감 효과가 대개 일부 에셋에 집중됩니다.

이것이 중요한 부분입니다. WebP 무손실은 PNG보다 도덕적으로 더 나은 업그레이드가 아닙니다. 특정 작업을 위한 실용적인 선택지입니다. 투명도를 가진 더 작은 무손실 웹 이미지와 폭넓은 최신 브라우저 지원이라는 작업입니다.

수치가 정당화하는 곳에 사용하세요. 그렇지 않은 곳에서는 PNG를 그대로 두세요.