이 페이지는 Cloud Translation API를 통해 번역되었습니다.

자주 묻는 질문(FAQ)

WebP란 무엇인가요? 왜 사용해야 하나요?

WebP는 손실이 있는 압축 및 무손실 압축 방법으로, 웹에 있는 다양한 사진, 반투명 및 그래픽 이미지 손실이 있는 압축의 수준은 조정 가능하기 때문에 파일 크기와 이미지 품질 간의 절충안 WebP는 일반적으로 이미지 손실 없이 JPEG 및 JPEG 2000보다 평균 30% 더 압축 품질 (비교 연구 참고)

WebP 형식은 기본적으로 더 작고 보기 좋은 이미지를 만드는 것을 목표로 합니다. 웹이 더 빨라질 수 있습니다.

어떤 웹브라우저가 WebP를 기본적으로 지원하나요?

사이트 성능 개선에 관심이 있는 웹마스터는 현재 이미지에 최적화된 WebP 대안을 찾아서 WebP를 지원하는 브라우저를 대상으로 합니다.

WebP 손실 지원 <ph type="x-smartling-placeholder">
- Chrome (데스크톱) 17 이상
- Android 버전 25 이상용 Chrome
- Microsoft Edge 18 이상
- Firefox 65 이상
- Opera 11.10 이상
- 기본 웹브라우저, Android 4.0 이상 (ICS)
- Safari 14 이상 (iOS 14 이상, macOS Big Sur+)
WebP 손실, 무손실 및 알파 지원 <ph type="x-smartling-placeholder">
- Chrome (데스크톱) 23 이상
- Android 버전 25 이상용 Chrome
- Microsoft Edge 18 이상
- Firefox 65 이상
- Opera 12.10 이상
- 기본 웹브라우저, Android 4.2 이상 (JB-MR1)
- 페일 문 26 이상
- Safari 14 이상 (iOS 14 이상, macOS Big Sur+)
WebP 애니메이션 지원 <ph type="x-smartling-placeholder">
- Chrome (데스크톱 및 Android) 32 이상
- Microsoft Edge 18 이상
- Firefox 65 이상
- Opera 19 이상
- Safari 14 이상 (iOS 14 이상, macOS Big Sur+)

WebP의 브라우저 지원을 감지하려면 어떻게 해야 하나요?

WebP 이미지를 표시할 수 있는 클라이언트에만 WebP 이미지를 제공하고 싶을 것입니다. 사용할 수 없는 클라이언트를 위해 기존 형식으로 대체합니다. 다행히 WebP 지원을 감지하는 여러 기술이 있는데, 둘 다 서로 분리되어 있습니다 일부 CDN 제공업체는 WebP 지원 감지를 제공합니다. 제공할 수 있습니다

Accept 헤더를 통한 서버 측 콘텐츠 협상

일반적으로 웹 클라이언트는 요청 헤더이며, 이는 수용할 수 있는 콘텐츠 형식 만약 브라우저는 사용자가 image/webp 형식 웹 서버는 WebP 이미지를 안전하게 전송할 수 있음을 알고 있으므로 콘텐츠 협상 자세한 내용은 다음 링크를 참고하세요.

Modernizr

Modernizr는 HTML5 및 모바일 광고 SDK를 편리하게 감지하기 위한 자바스크립트 라이브러리로 웹브라우저에서 CSS3 기능을 지원합니다. 속성 찾기 Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha 및 Modernizr.webp.animation과 같은 뷰를 제공합니다.

HTML5 `<picture>` 요소

HTML5는 <picture> 요소를 지원하므로 여러 개의 우선 순위에 따라 대체 이미지 대상을 추가하여 제대로 표시할 수 있는 첫 번째 후보 이미지가 있어야 합니다. 자세한 내용은 HTML5 Rocks에 대한 토론을 참조하세요. <picture> 요소는 다음과 같습니다. 항상 더 많은 브라우저에서 지원되고 있습니다.

자체 JavaScript에서

또 다른 감지 방법은 매우 작은 WebP 이미지를 디코딩하여 성공 여부를 확인할 수 있습니다. 예:

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

이미지 로드는 비차단형이며 비동기식입니다. 즉, WebP 지원에 종속된 코드는 콜백에 배치하는 것이 좋습니다. 함수를 사용하세요.

Google에서 WebP를 오픈소스로 출시한 이유는 무엇인가요?

Google은 오픈소스 모델의 중요성을 깊이 인식하고 있습니다. WebP를 누구든지 이 형식을 사용하고 개선사항을 제안할 수 있습니다. 다음으로 바꿉니다. 여러분의 의견과 제안을 받아들여 WebP가 훨씬 더 유용해질 것이라는 보여 드리겠습니다.

개인 이미지 파일을 WebP로 변환하려면 어떻게 해야 하나요?

WebP 명령줄 유틸리티를 사용하여 개인 이미지 파일을 변환할 수 있습니다. WebP 형식으로 변환해야 합니다. 자세한 내용은 WebP 사용을 참고하세요.

변환할 이미지가 많은 경우 플랫폼의 셸을 사용하여 변환할 수 있습니다. 작업을 간소화할 수 있습니다. 예를 들어 폴더의 모든 jpeg 파일을 변환하려면 다음을 시도해 보세요. 다음과 같습니다.

Windows:

> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )

Linux / macOS:

$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

WebP 이미지 품질을 직접 판단하려면 어떻게 해야 하나요?

현재 WebP 파일을 공통 형식으로 변환하여 볼 수 있습니다. 무손실 압축을 사용하는 파일(예: PNG)으로 변환한 다음 이미지 뷰어가 있습니다. WebP 품질에 대해 빠르게 알아보려면 이 사이트의 갤러리: 나란히 사진 비교 비교.

소스 코드는 어떻게 얻나요?

변환기 코드는 WebP 오픈소스 프로젝트의 다운로드 섹션 있습니다. 경량 디코더 및 VP8 사양을 위한 코드가 WebM 사이트를 참조하세요. 자세한 내용은 컨테이너의 RIFF Container 페이지 지정할 수도 있습니다

WebP 이미지의 최대 크기는 얼마인가요?

WebP는 VP8과 비트스트림이 호환되며 너비와 높이에 14비트를 사용합니다. WebP 이미지의 최대 픽셀 크기는 16383x16383입니다.

WebP 형식은 어떤 색상 공간을 지원하나요?

VP8 비트스트림과 일치하는 손실 WebP는 8비트 Y'CbCr 4:2:0 (YUV420이라고도 함) 이미지 형식입니다. 섹션 참조 2, '형식 개요' RFC 6386의 VP8 데이터 형식 및 디코딩 가이드 를 참조하세요.

무손실 WebP는 RGBA 형식에서만 작동합니다. 자세한 내용은 WebP 무손실 비트스트림 사양.

WebP 이미지가 소스 이미지보다 더 크게 커질 수 있나요?

예, 일반적으로 손실이 있는 형식에서 WebP 무손실 또는 반대의 경우도 마찬가지입니다. 주된 원인은 색상 공간 차이입니다 (YUV420과 ARGB 비교). 전환을 확인할 수 있습니다.

일반적으로 다음과 같은 세 가지 상황이 있습니다.

소스 이미지가 무손실 ARGB 형식인 경우 공간 다운샘플링은 YUV420에서 YUV420보다 압축하기 어려운 새로운 색상을 도입합니다. 확인할 수 있습니다 이 상황은 일반적으로 소스가 은 몇 가지 색상이 있는 PNG 형식입니다. 손실이 있는 WebP로 변환 (또는 이와 비슷하게 손실 JPEG로 변환하면 파일 크기가 더 커질 수 있습니다.
소스가 손실 형식인 경우 무손실 WebP 압축 사용 소스의 손실 특성을 캡처하려면 일반적으로 만들 수도 있습니다 이는 WebP에만 국한되지 않으며, JPEG 소스를 무손실 WebP 또는 PNG 형식으로 변환할 수 있습니다.
소스가 손실(lossy) 형식이며 압축하려는 경우 더 높은 품질 설정으로 손실 WebP로 제공해야 합니다. 예를 들어 80 품질로 저장된 JPEG 파일을 품질이 95인 WebP 파일로 변환 두 형식이 모두 손실되더라도 일반적으로 더 큰 파일이 생성됩니다. 소스의 품질 평가는 종종 불가능하므로 파일 크기가 일관되게 더 큰 경우 타겟 WebP 품질을 낮춥니다. 또 다른 방법은 품질 설정을 사용하지 않고 대신 cwebp 도구의 -size 옵션을 사용하여 지정된 파일 크기를 타겟팅합니다. 또는 동등한 API를 사용할 수 있습니다. 예를 들어 원본 파일의 80% 를 타겟팅하여 더 강력할 수 있습니다.

JPEG 소스를 손실 WebP로, 또는 PNG 소스를 무손실 WebP로 변환하면 WebP는 이처럼 파일 크기가 크게 놀라지 않습니다.

WebP는 프로그레시브 또는 인터레이스 디스플레이를 지원하나요?

WebP는 프로그레시브 또는 인터레이스된 디코딩 새로 고침을 JPEG 또는 PNG 감각입니다. 이것은 CPU와 메모리에 너무 많은 압력을 가할 수 있으며 각 새로고침 이벤트에 압축 해제 시스템입니다.

평균적으로 프로그레시브 JPEG 이미지를 디코딩하는 것은 기준을 3번 조정합니다.

또는 WebP는 증분 디코딩을 제공합니다. 이 디코딩에서는 사용 가능한 모든 수신 비트 스트림의 바이트는 표시 가능한 샘플 행을 가능한 한 빨리. 이렇게 하면 CPU 및 CPU 및 CPU 및 작업 프로세스에 재페인트 작업을 다운로드 상태에 대한 시각적 단서를 제공합니다. 증분 디코딩 기능을 사용할 수 있으며 Advanced Decoding API

Android 프로젝트에서 libwebp 자바 바인딩을 사용하려면 어떻게 해야 하나요?

WebP에는 간단한 인코더 및 디코더로의 JNI 바인딩 지원 기능이 포함되어 있습니다. swig/ 디렉터리에 있습니다.

Eclipse에서 라이브러리를 빌드합니다.

최신 버전의 ADT 플러그인 NDK 도구와 함께 설치되고 NDK 경로가 올바르게 설정됨 (Preferences > Android > NDK).
새 프로젝트를 만듭니다. File > 신규 > 프로젝트 > Android의 경우 Application Project(애플리케이션 프로젝트)를 클릭합니다.
클론 또는 새 프로젝트의 jni 폴더에 libwebp의 압축을 해제합니다.
LOCAL_SRC_FILES 목록에 swig/libwebp_java_wrap.c를 추가합니다.
새 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Android Tools를 선택합니다. 추가 Native Support ...를 사용하여 빌드에 라이브러리를 포함합니다.
프로젝트 속성을 열고 C/C++ Build > 동작. 추가 빌드하려면 Build (Incremental build) 섹션에 ENABLE_SHARED=1 libwebp를 공유 라이브러리로 사용하는 것입니다.

참고 NDK_TOOLCHAIN_VERSION=4.8를 설정하면 전반적으로 개선됩니다. 32비트 빌드 성능
libs/ 프로젝트 폴더에 swig/libwebp.jar를 추가합니다.
프로젝트를 빌드합니다. libs/<target-arch>/libwebp.so이(가) 생성됩니다.
System.loadLibrary("webp")를 사용하여 런타임에 라이브러리를 로드합니다.

라이브러리는 ndk-build 및 포함된 Android.mk 이 경우 위에서 설명한 단계 중 일부를 재사용할 수 있습니다.

C#과 함께 libwebp를 사용하려면 어떻게 해야 하나요?

WebP는 libwebp API를 내보내는 DLL로 빌드될 수 있습니다. 이러한 함수는 C#으로 가져올 수 있습니다.

libwebp.dll을 빌드합니다. 이렇게 하면 WEBP_EXTERN이 올바르게 설정되어 API를 내보낼 수 있습니다. 함수와 비교합니다.
```
libwebp> nmake /f Makefile.vc CFG=release-dynamic
```

libwebp.dll을 프로젝트에 추가하고 원하는 함수를 가져옵니다. 참고: 간단한 API WebPFree()를 호출하여 반환된 모든 버퍼를 해제해야 합니다.

[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPEncodeBGRA(IntPtr rgba, int width, int height, int stride,
                                 float quality_factor, out IntPtr output);
[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPFree(IntPtr p);

void Encode() {
  Bitmap source = new Bitmap("input.png");
  BitmapData data = source.LockBits(
      new Rectangle(0, 0, source.Width, source.Height),
      ImageLockMode.ReadOnly,
      PixelFormat.Format32bppArgb);
  IntPtr webp_data;
  const int size = WebPEncodeBGRA(data.Scan0,
                                  source.Width, source.Height, data.Stride,
                                  80, out webp_data);
  // ...
  WebPFree(webp_data);
}

애니메이션 WebP를 사용해야 하는 이유는 무엇인가요?

애니메이션 GIF와 비교한 애니메이션 WebP의 이점

WebP는 8비트 알파 채널에서 24비트 RGB 색상을 지원하는 반면, 8비트 색상과 1비트 알파입니다.
WebP는 손실(lossy) 압축과 무손실 압축을 모두 지원합니다. 실제로 단일 애니메이션은 손실이 있는 프레임과 무손실 프레임을 결합할 수 있습니다. GIF만 지원 무손실 압축을 사용합니다 WebP의 손실 압축 기술은 실생활의 동영상에서 만든 애니메이션 이미지에 이르기까지, 동영상 제작 기술이 애니메이션 이미지의 소스입니다.
WebP는 GIF¹보다 적은 바이트를 요구합니다. 손실이 있는 WebP로 변환된 애니메이션 GIF는 64% 더 작고 무손실 WebP는 19% 더 작습니다. 이는 모바일 네트워크에서 특히 중요합니다.
WebP는 탐색이 있을 때 디코딩하는 데 시간이 덜 걸립니다. 포함 깜박이거나 탭을 스크롤하거나 변경할 수 있음 이미지를 숨기거나 표시하면 애니메이션이 일시중지되고 다른 지점으로 앞으로 건너뜁니다. 과도한 CPU 사용으로 인해 또한 프레임을 드롭하는 애니메이션은 디코더가 지정할 수 있습니다. 이러한 시나리오에서 애니메이션 WebP는 시간²을 GIF로 디코딩하여 버벅거림 감소 CPU 사용률 급증으로부터 복구 속도가 빨라집니다 이것은 GIF보다 WebP의 두 가지 장점이 있습니다.
- WebP 이미지는 각 프레임에 알파, 이 결정을 내리기 위해 프레임을 디코딩할 필요가 없기 때문입니다. 이를 통해 주어진 이전 프레임 중 어떤 프레임이 표시되었는지 더 정확하게 추론할 수 있습니다. 이전 프레임의 불필요한 디코딩 작업이 있습니다.
- 최신 동영상 인코더와 마찬가지로 WebP 인코더는 키-프레임을 조정해야 합니다 (대부분의 GIF 인코더는 그렇지 않음). 이렇게 하면 긴 애니메이션에서 탐색이 크게 향상됩니다. 용이하게 이미지 크기를 크게 늘리지 않고 이러한 프레임을 삽입하므로, WebP는 에 '혼합 방법' 플래그 을 사용합니다. 이렇게 하면 전체 이미지가 지워진 것처럼 키프레임을 그릴 수 있습니다. 이전 프레임을 배경 색상으로 변경하지 않고 전체 크기.

애니메이션 WebP와 애니메이션 GIF의 단점

탐색이 없는 경우 WebP의 직선 디코딩은 GIF보다 CPU 집약적입니다. 손실 있는 WebP는 플랫폼보다 2.2배 더 오래 무손실 WebP는 1.5배 더 많이 사용합니다.
WebP 지원은 GIF 지원만큼 넓지 않습니다. 사실상 보편적입니다.
브라우저에 WebP 지원을 추가하면 코드 공간이 늘어나고 덜어낼 수 있습니다 Blink에서 이것은 약 1500개의 추가 줄이 (WebP demux 라이브러리 및 블링크 측 WebP 이미지 포함) 디코더)입니다. 참고로 WebP와 WebM이 더 일반적인 디코딩 코드를 공유하거나, WebP의 기능이 WebM에 포함됩니다.

<img>에서 WebM을 지원하지 않는 이유는 무엇인가요?

<img> 내에서 동영상 형식을 지원하는 것이 장기적으로 타당할 수 있습니다. 태그 사이에 있어야 합니다. 그러나 이제 이렇게 하면 <img>의 WebM이 애니메이션 WebP의 제안된 역할은 문제가 됩니다.

이전 프레임에 의존하는 프레임을 디코딩할 때 WebM에는 애니메이션 WebP보다 50% 더 많은 메모리를 이전 프레임³입니다.
동영상 코덱 및 컨테이너 지원은 브라우저와 컨테이너 내부에 따라 기기에서 사용할 수 있습니다. 자동 콘텐츠 트랜스코딩을 용이하게 하기 위해 (예: 사용하는 경우 브라우저가 허용 헤더를 추가해야 함 이미지 태그가 지원하는 형식을 나타냅니다. 이것조차도 'video/webm'과 같은 MIME 유형이므로 불충분함 또는 '동영상/mpeg' 정지 코덱 지원을 나타내지 않음 (예: VP8 대 VP9) 다른 한쪽에는 WebP 형식은 효과적으로 동결되며, 실제로 이러한 형식을 사용하는 공급업체는 모든 UA에서 WebP의 동작인 애니메이션 WebP를 제공하는 데 동의합니다. 일관되어야 합니다. 'image/webp' 수락 헤더는 WebP 지원을 나타내는 데 이미 사용되고 있으며 새로운 수락 헤더 변경사항은 없음 반드시 필요합니다
Chromium 동영상 스택은 한 기기에서 재생 중인 동영상이 한두 개뿐이라고 가정하고 있습니다. 따라서 구현은 시스템을 소비하는 데 적극적입니다. 리소스 (스레드, 메모리 등)를 사용하여 재생 품질을 최대화할 수 있습니다. 이러한 여러 개의 동시 동영상을 제대로 제공할 수 없는 경우 이미지가 많은 웹페이지에 사용하기 적합하도록 다시 디자인해야 함
WebM에는 현재 모든 압축 기술이 포함되어 있지 않습니다. WebP에서 찾을 수 있습니다. 그 결과 이 이미지 WebP를 사용하면 다른 버전보다 훨씬 더 잘 압축됩니다.

¹ 애니메이션 GIF와 애니메이션 WebP의 모든 비교에서는 는 웹에서 무작위로 가져온 약 7,000개의 애니메이션 GIF 이미지 코퍼스를 사용했습니다. 이러한 이미지는 ‘gif2webp’ 도구를 사용하여 기본 설정 (최신 버전으로 libwebp 소스 트리 2013년 10월 8일 기준). 비교 수치는 이미지

² 디코딩 시간은 최신 libwebp + ToT를 사용하여 계산되었습니다. 2013년 10월 8일 기준 벤치마크 도구를 사용합니다. "디코딩 시간 탐색하다가" '처음 다섯 프레임 디코딩, 프레임 삭제 다음 5개의 프레임을 디코딩하는 등의 작업을 수행합니다.

³ WebM이 각 프레임에서 4개의 YUV 참조 프레임을 메모리에 유지 (너비+96)*(높이+96)픽셀을 저장하는 중입니다. YUV 4:2:0의 경우 6바이트당 4바이트가 필요합니다. 픽셀 (또는 픽셀당 3/2바이트)이어야 합니다. 이러한 참조 프레임은 4*3/2*(width+96)*(height+96)바이트의 메모리. 반면에 WebP는 이전 프레임 (RGBA)만 사용하면 됩니다. 4*width*height바이트의 메모리.

⁴ 애니메이션 WebP 렌더링을 사용하려면 Chrome 버전 32 이상이 필요합니다.