WebP는 파일을 생성합니다. PNG보다 25~35% 작음 동일한 이미지에 대해 투명 배경 PNG를 유지합니다. 이 단 하나의 사실은 Google이 WebP를 구축한 이유와 현재 대부분의 최신 웹사이트가 WebP를 제공하는 이유를 설명합니다. PNG의 반론은 도달 범위입니다. WebP에 대해 들어본 적이 없는 소프트웨어를 포함하여 지금까지 작성된 모든 프로그램에서 PNG가 열립니다. 따라서 선택은 기술적으로 어떤 형식이 더 우수한지에 관한 것이 아닙니다. 왜냐하면 WebP는 명백히 그렇습니다. 이는 최신 웹사이트에 맞게 최적화하는지 아니면 모든 곳에서 호환성을 보장하기 위해 최적화하는지에 관한 것입니다. 이 가이드는 압축, 투명도, 품질 모드, 브라우저 지원, 애니메이션 및 페이지 속도 전반에 걸쳐 두 가지를 심층적으로 비교한 다음 선택에 대한 명확한 규칙을 제공합니다.

WebP란 무엇이며 Google이 WebP를 만든 이유

WebP는 Google이 2010년에 출시한 이미지 형식으로, VP8 비디오 코덱의 압축 기술을 기반으로 구축되었습니다. 목표는 무뚝뚝했습니다. 웹 이미지를 더 작게 만들어 페이지 로드 속도를 높이는 것이었습니다. Google은 이미지가 페이지 무게를 좌우하며 모든 이미지의 3분의 1을 삭감하면 웹 속도가 상당히 빨라진다는 사실을 알고 있는 데이터를 가지고 있었습니다. WebP는 처음부터 세 가지 형식을 한 번에 대체하도록 설계되었습니다. PNG의 투명도, JPG의 사진 압축, GIF의 애니메이션 단일 컨테이너에. 그 야망이 바로 PNG가 할 수 없는 일을 할 수 있는 이유입니다.

PNG가 무엇이며 왜 지속됩니까?

PNG는 무손실 DEFLATE 압축을 사용하고 전체 알파 채널을 추가하는 GIF를 특허 없이 대체하기 위해 1996년에 출시되었습니다. 이는 로고, 아이콘, 스크린샷 및 투명한 배경이 필요한 모든 그래픽의 표준이 되었습니다. 거의 30년에 걸친 보편적인 지원이 그 해자입니다. 모든 브라우저, 운영 체제, 이메일 클라이언트, Office 제품군 및 이미지 편집기는 설정 없이 PNG를 읽습니다. 이미지가 전혀 알려지지 않은 곳에서 열려야 하는 경우 PNG는 절대 실패하지 않는 형식입니다.

파일 크기: WebP가 확실히 승리합니다.

WebP는 기본적으로 모든 시나리오에서 PNG보다 더 잘 압축합니다. 투명성이 있는 일반적인 로고나 UI 그래픽의 경우 25~35% 감소 PNG에서 WebP로 무손실로 이동합니다. WebP의 손실 모드로 전환하면 알파 채널을 계속 유지하면서 절감 효과가 극적으로 증가하여 종종 60~70%까지 증가합니다. PNG에는 손실 옵션이 전혀 없으므로 저가형에서는 경쟁할 수 없습니다. 수십 개의 이미지 자산이 있는 사이트 전체에서 그 차이는 페이지 로드당 수백 킬로바이트로 증가합니다.

그 격차는 더욱 스마트해진 압축에서 비롯됩니다. PNG의 DEFLATE 알고리즘은 ZIP에서 차용한 범용 방법으로 문자 그대로의 반복을 찾는 데 효과적입니다. WebP는 이미지용으로 특별히 구축된 예측 코딩을 사용하여 이웃 블록의 각 블록을 추측하고 차이점만 저장합니다. 이러한 이미지 인식 접근 방식은 DEFLATE가 볼 수 없는 절감 효과를 찾아냅니다. 이것이 바로 2010년 형식이 1996년 형식을 꾸준히 능가하는 이유입니다.

투명성: 둘 다 갖추고 있지만 WebP는 더 많은 기능을 제공합니다.

JPG와 달리 두 형식 모두 전체 알파 채널을 전달하므로 어느 쪽이든 로고가 투명하게 유지됩니다. 그러나 WebP는 PNG가 일치하지 않는 것을 추가합니다. 손실 모드의 투명성. PNG의 투명도는 무손실 압축으로만 제공되므로 반투명 그래픽은 무손실 무게로 저장해야 합니다. WebP를 사용하면 투명한 배경과 공격적인 압축을 동시에 얻을 수 있습니다. 이는 바로 무거운 PNG 로고에 필요한 것입니다. 무게를 줄이면서 투명성을 유지해야 하는 UI 자산과 제품 컷아웃의 경우 이 조합이 WebP의 가장 강력한 주장입니다.

품질: 무손실 및 손실 모드

WebP는 두 가지 모드를 모두 제공하므로 PNG와는 다른 방식으로 유연하게 사용할 수 있습니다.

무손실 WebP 더 작은 파일을 생성하면서 픽셀 단위로 PNG와 정확히 일치합니다. 품질 균형은 없으며 크기만 승리합니다.
손실이 있는 WebP JPG처럼 세부 사항을 버리고 파일을 훨씬 더 축소하며 JPG와는 달리 여전히 투명성을 유지할 수 있습니다.

PNG는 무손실만 제공하므로 크기가 크게 유지됩니다. 완벽한 사본이 필요한 경우 무손실 WebP가 더 작은 사본을 제공합니다. 눈에 보이지 않는 손실을 받아들일 수 있다면 손실이 있는 WebP는 그 크기의 일부만 제공합니다. 어느 쪽이든 PNG를 능가하는 WebP 설정이 있습니다.

브라우저 및 소프트웨어 지원

이것이 PNG의 유일한 장점이며 범위가 좁아지고 있습니다. 모든 최신 브라우저는 WebP를 지원합니다., Chrome, Firefox, Safari 및 Edge를 포함하므로 개방형 웹에서는 호환성 문제가 본질적으로 해결됩니다. 차이점은 다른 곳에 있습니다. 일부 오래된 데스크톱 소프트웨어, 특정 이메일 클라이언트, 이전 Office 버전 및 레거시 플랫폼은 여전히 WebP를 거부합니다. 업로드 양식은 또 다른 함정입니다. 많은 사람들이 JPG와 PNG만 허용하고 WebP 파일을 완전히 거부하기 때문입니다.

따라서 솔직하게 요약하면 WebP는 웹사이트에는 안전하지만 알 수 없는 시스템에 전달하는 파일에는 위험하다는 것입니다. PNG는 사용자의 통제를 벗어나는 모든 것에 대한 보편적인 대체 수단으로 남아 있습니다.

애니메이션: WebP가 GIF도 대체합니다.

PNG에 부족한 기능 중 하나는 애니메이션입니다. 표준 PNG는 단일 프레임을 보유하며 APNG 확장이 존재하는 동안 지원은 항상 일관성이 없었습니다. WebP는 지원합니다 기본적으로 전체 알파가 포함된 애니메이션, GIF의 256 대신 수백만 가지 색상을 표시하면서 동등한 GIF보다 훨씬 작은 파일을 생성합니다. 짧은 반복 그래픽 형식 중에서 선택하는 경우 WebP가 PNG와 GIF 모두를 결정적으로 능가합니다.

WebP가 웹사이트 속도를 높이는 이유

페이지 무게는 직접 입력됩니다. 만족스러운 최대 규모의 페인트, Google의 핵심 웹 바이탈 중 하나이자 확인된 순위 신호입니다. 이미지는 일반적으로 페이지에서 가장 무거운 부분이므로 각 이미지를 1/3로 자르면 로드 시간, LCP 점수 및 이탈률에 측정 가능한 영향을 미칩니다. 페이지 속도가 빠를수록 전환율도 높아지므로 성능 작업에 대한 비용이 두 배로 늘어납니다.

대부분의 사이트에서 사용하는 실제 패턴은 점진적입니다. WebP를 지원하는 브라우저에 WebP를 제공하고 나머지는 PNG 또는 JPG로 대체합니다. 최신 HTML은 그림 요소를 사용하여 이를 자동으로 처리하며 대부분의 콘텐츠 관리 시스템과 이미지 서비스가 이를 수행합니다. 오래된 클라이언트의 경우 아무 것도 손상시키지 않고 속도를 높일 수 있습니다.

각 형식을 사용하는 경우

사용 웹P 웹 사이트 이미지, 특히 투명도가 있는 로고와 아이콘의 경우 파일이 작을수록 페이지 속도가 빨라집니다.
사용 웹P 투명성과 작은 크기가 필요한 경우 두 가지를 모두 제공하는 유일한 공통 형식이기 때문입니다.
사용 PNG 기존 소프트웨어 및 이메일 클라이언트를 포함한 모든 프로그램에서 이미지를 열어야 하는 경우.
사용 PNG 허용되는 형식을 명시적으로 나열하고 WebP를 생략하는 업로드 양식 및 시스템의 경우.
사용 PNG 영구적으로 보관하는 파일의 경우 보편적인 지원이 크기보다 더 중요하기 때문에 보관 마스터로서 사용하세요.

PNG를 WebP로 변환하는 방법

변환에는 설치가 필요하지 않습니다. 우리의 변환기, PNG를 추가하고 투명도를 유지하는 옵션(WebP를 내보내는 옵션)을 선택하세요. 처리는 HTML5 Canvas API를 통해 로컬로 실행되므로 아무것도 업로드되지 않으며 여러 파일을 한 번에 일괄 처리할 수 있습니다. 파일이 의미 있게 가벼워지는 동안 투명한 배경은 그대로 유지됩니다. 전체 연습은 다음 위치에 있습니다. PNG에서 WebP로 가이드.

AVIF는 어떻습니까?

맥락을 파악해 볼 가치가 있음: AVIF는 WebP보다 훨씬 더 잘 압축하는 최신 형식으로, 종종 20% 더 작으며 투명도와 애니메이션도 지원합니다. 브라우저 지원은 현재 훌륭하지만 WebP보다 약간 뒤쳐져 있으며, 소프트웨어 지원은 여전히 훨씬 뒤쳐져 있습니다. 오늘날 대부분의 사이트에서 WebP는 절약과 지원의 균형이 가장 잘 맞는 실용적인 선택이며, 채택이 증가함에 따라 AVIF를 지켜볼 가치가 있습니다. PNG는 두 가지 모두에서 대체 수단으로 남아 있습니다.

평결

WebP는 더 작은 파일, 무손실 및 손실 모드의 투명성, 애니메이션, 완전한 최신 브라우저 지원 등 기술적 장점을 종합적으로 활용합니다. PNG는 여전히 중요한 한 가지 문제에서 승리합니다. 이는 의심의 여지 없이 모든 곳에서 개방된다는 것입니다. 웹사이트에는 WebP를 사용하고 알 수 없는 곳으로 보내는 모든 항목에는 PNG를 사용하고 두 가지를 모두 원할 경우 PNG 대체 기능으로 WebP를 제공하세요. 더 넓은 형식의 사진의 경우 PNG 대 JPG 가이드 사진이 들어갈 자리를 다룹니다.

실제 크기의 예

추상적인 백분율은 실제 숫자보다 덜 도움이 되므로 일반적인 자산의 차이는 다음과 같습니다.

에이 500 x 500픽셀 로고 투명도 포함: PNG-24로 약 45KB, 무손실 WebP로 약 30KB, 알파 채널이 그대로 유지된 손실 WebP로 12KB 미만.
에이 전폭 영웅 그래픽 부드러운 그림자 포함: 종종 PNG의 경우 400KB 이상, 무손실 WebP의 경우 약 260KB, 손실 있는 WebP의 경우 100KB 미만입니다.
에이 UI 아이콘 세트 20개의 작은 그래픽: 손실 조정 전에 전체 세트가 약 200KB에서 130KB로 손실 없이 줄어들 수 있습니다.

12페이지에 걸쳐 영웅 예시를 곱하면 연결 속도가 느린 경우 몇 초의 로드 시간이 절약됩니다. 이는 Core Web Vitals가 측정하는 것과 정확히 같은 종류의 차이입니다.

기존 PNG 라이브러리 변환

대부분의 사이트는 깨끗하게 시작되지 않습니다. 이미 수백 개의 PNG가 배포되어 있습니다. 설정에 따라 세 가지 접근 방식이 작동합니다. 사이트가 최신 프레임워크 또는 CMS에서 실행되는 경우 이미지 파이프라인이 자동으로 WebP를 변환하고 제공하므로 파일이 아닌 설정을 변경해야 합니다. CDN이나 이미지 서비스를 사용하는 경우 대부분의 서비스는 자동 형식 협상, 동일한 소스 파일에서 WebP를 허용하는 브라우저에 WebP를 전달하고 그렇지 않은 브라우저에는 PNG를 전달합니다. 파일을 직접 관리하는 경우 자산을 일괄 변환하고 참조를 업데이트하는 것이 가장 힘들기는 하지만 효과적입니다.

어떤 경로를 선택하든 원본 PNG를 유지하세요. 이는 귀하의 마스터이며 나중에 WebP를 거부하는 시스템에 필요할 수 있습니다.

피해야 할 일반적인 WebP 실수

WebP로 이동하는 사람들을 잡는 몇 가지 함정은 다음과 같습니다.

아카이브 마스터 변환: 데스크탑 소프트웨어에서는 WebP 지원 범위가 더 좁기 때문에 사본을 변환하여 전달하고 PNG 원본을 보관하십시오.
텍스트 그래픽에 손실이 있는 WebP 사용: 손실 압축은 JPG와 마찬가지로 날카로운 글자를 얼룩지게 만듭니다. 스크린샷과 텍스트가 많은 이미지에는 무손실 WebP를 사용하세요.
대체 건너뛰기: PNG 또는 JPG 대안 없이 WebP를 제공하면 이전 클라이언트 및 일부 이메일 컨텍스트의 이미지가 손상됩니다.
양식을 업로드하기 위해 WebP 보내기: 많은 사람들이 JPG와 PNG만 허용하고 파일을 완전히 거부합니다.

이들 중 어느 것도 WebP를 피해야 할 이유가 아닙니다. 이는 PNG를 마스터용으로 유지하고 사용자가 제어할 수 없는 모든 항목에 대해 유지하면서 최신 브라우저에 제공되는 해당 기능을 사용해야 하는 이유입니다.

브라우저가 실제로 형식을 선택하는 방법

두 가지 형식을 제공하는 것은 복잡해 보이지만 메커니즘은 간단하고 자동입니다. 모든 브라우저는 각 이미지 요청과 함께 Accept 헤더를 보내며, 이해하는 형식을 나열합니다. 서버 또는 CDN은 해당 헤더를 읽고 동일한 URL에서 지원을 광고하는 브라우저에 WebP를 반환하거나 그렇지 않은 브라우저에 PNG를 반환합니다. HTML에서는 WebP 소스를 먼저 나열하고 두 번째로 PNG 대체를 나열하여 그림 요소를 사용하여 동일한 작업을 명시적으로 수행할 수 있습니다. 브라우저는 읽을 수 있는 첫 번째 항목을 선택하고 나머지는 무시합니다. 어느 쪽이든, 어떤 방문자도 깨진 이미지를 볼 수 없습니다, 최신 브라우저는 조용히 작은 파일을 가져오는 반면 오래된 브라우저는 호환되는 파일을 가져옵니다.

자주 묻는 질문

WebP가 PNG보다 나은가요?

기술적으로 그렇습니다. WebP 파일은 25~35% 더 작습니다., 투명성을 유지하고 PNG에 부족한 손실 및 애니메이션 모드를 추가합니다. PNG는 범용 호환성에서만 승리합니다.

WebP는 PNG와 같은 투명도를 지원합니까?

예, 그리고 더 나아가요. WebP는 무손실 모드와 손실 모드 모두에서 알파 채널을 유지합니다., PNG는 무손실 압축의 투명도만 제공합니다.

WebP는 PNG보다 얼마나 작습니까?

일반적으로 무손실로 25~35% 더 작아짐, 손실 모드에서는 투명도를 유지하면서 60~70% 더 작아집니다.

모든 브라우저가 WebP를 지원합니까?

모든 최신 브라우저는 WebP를 지원합니다., Chrome, Firefox, Safari 및 Edge를 포함합니다. 일부 오래된 데스크톱 소프트웨어 및 업로드 양식은 여전히 이를 거부합니다.

투명도와 애니메이션을 지원하는 형식은 무엇입니까?

WebP는 두 가지를 모두 수행합니다.. PNG에는 투명도가 있지만 신뢰할 수 있는 애니메이션이 없으며 GIF에 애니메이션이 적용되지만 투명도가 좋지 않아 256색으로 제한됩니다.

웹사이트에 WebP나 PNG가 더 좋나요?

속도를 위한 WebP. 파일이 작을수록 내용이 풍부한 최대 페인트가 향상됩니다., 코어 웹 바이탈 순위 신호입니다. 이전 클라이언트에 대해 PNG 대체를 제공합니다.

WebP나 AVIF를 사용해야 합니까?

지금은 WebP입니다. AVIF는 압축률이 약 20% 향상되지만 지원 범위는 더 좁습니다.따라서 WebP는 오늘날 비용 절감과 호환성의 실용적인 균형을 이루고 있습니다.

WebP 파일을 양식에 업로드할 수 있나요?

종종 그렇지 않습니다. 많은 업로드 양식에서는 JPG 및 PNG만 허용합니다.이므로 시스템이 허용되는 형식을 나열하고 WebP를 생략하는 경우 해당 형식 중 하나로 변환하세요.

기존 PNG 파일을 WebP로 변환해야 합니까?

마스터가 아닌 사본을 변환하여 전달하십시오. 원본 PNG를 유지하세요, 데스크톱 소프트웨어 및 업로드 형식에서는 WebP 지원 범위가 더 좁기 때문입니다.

손실이 있는 WebP는 텍스트가 포함된 스크린샷에 적합합니까?

아니요. 손실 압축으로 인해 날카로운 문자가 번짐, JPG와 똑같습니다. 텍스트가 많은 그래픽과 스크린샷에는 무손실 WebP를 사용하세요.

WebP에도 여전히 PNG 대체가 필요합니까?

최대한의 안전을 위해서는 그렇습니다. 최신 브라우저는 모두 WebP를 읽습니다., 그러나 이전 데스크톱 소프트웨어, 일부 이메일 클라이언트 및 많은 업로드 양식은 여전히 지원되지 않습니다.

브라우저는 WebP 또는 PNG를 로드할지 어떻게 알 수 있나요?

통해 모든 요청과 함께 보내는 헤더를 수락합니다., 지원되는 형식이 나열되어 있습니다. 서버와 CDN은 이를 읽고 자동으로 WebP 또는 PNG 대체를 반환합니다.