갤러리 콘텐츠
이 갤러리에서는 두 가지 새로운 WebP 모드를 보여주는 샘플 이미지를 제공합니다. WebP-손실 및 WebP-손실(알파 있음)(투명도 지원)
나란히 비교
아래 표에는 PNG 이미지 (pngcrush 및 pngout으로 압축)가 나와 있습니다. WebP-손실 이미지 및 WebP-손실 이미지(알파 있음) 정렬 비교 이미지는 일반적으로 체크무늬 배경에 오버레이됩니다. 구현해 보겠습니다.
우리는 알파 및 TTL이 포함된 WebP-손실 이미지에 webp 품질 90을 사용했습니다. WebP 무손실 이미지의 기본 품질을 선택합니다. 자세한 내용은 이미지 재현 섹션에서 자세한 내용을 확인하세요.
Google은 PNG로 다시 변환한 WebP 이미지를 WebP를 렌더링할 수 있어야 합니다. 호환되는 브라우저를 사용 중이라면 WebP 파일 링크를 아래에서 확인하세요. 또한 이 페이지의 이미지는 편의를 위해 축소되었습니다. 전체 크기로 보려면 이미지를 클릭하세요. 이미지
표에는 각 모드에서 얻은 이미지 크기도 나와 있습니다.
PNG | WebP-무손실 | WebP-lossy (알파 포함) |
|---|---|---|
| 'Yellow Rose' 1 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG 최적화 파일 크기: 110.7KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-무손실 파일 크기: 79.9KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy (알파 포함) 파일 크기: 17.7KB |
| "유아용 턱시도 페이지" 2 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG 최적화 파일 크기: 38.1KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-무손실 파일 크기: 27.0KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy (알파 포함) 파일 크기: 13.8KB |
| 'PNG 투명성 데모' 3 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG 최적화 파일 크기: 213.5KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-무손실 파일 크기: 149.0KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy (알파 포함) 파일 크기: 51.6KB |
| "그레고르 멘델 탄생 189주년" 4 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG 최적화 파일 크기: 49.2KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-무손실 파일 크기: 33.2KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy (알파 포함) 파일 크기: 18.3KB |
| "오버레이를 위한 투명한 나침반 카드" 5 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG 최적화 파일 크기: 126.8KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-무손실 파일 크기: 97.1KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy (알파 포함) 파일 크기: 57.3KB |
WebP 파일 (Chrome 22 이상에서 볼 수 있음) 링크는 다음과 같습니다.
| '노란 로즈': | <ph type="x-smartling-placeholder"></ph> WebP-무손실 파일 (80.1KB) | <ph type="x-smartling-placeholder"></ph> WebP-lossy (알파 포함) 파일 (18.4KB) |
| "baby tux for my user page": | <ph type="x-smartling-placeholder"></ph> WebP-무손실 파일 (27.0KB) | <ph type="x-smartling-placeholder"></ph> WebP-lossy (알파 포함) 파일 (14.1KB) |
| 'PNG 투명성 데모': | <ph type="x-smartling-placeholder"></ph> WebP-무손실 파일 (149.1KB) | <ph type="x-smartling-placeholder"></ph> WebP-lossy (알파 포함) 파일 (52.6KB) |
| '그레고르 멘델 탄생 189주년': | <ph type="x-smartling-placeholder"></ph> WebP-무손실 파일 (33.3KB) | <ph type="x-smartling-placeholder"></ph> WebP-lossy (알파 포함) 파일 (19.0KB) |
| "오버레이를 위한 투명한 나침반 카드": | <ph type="x-smartling-placeholder"></ph> WebP-무손실 파일 (97.1KB) | <ph type="x-smartling-placeholder"></ph> WebP-lossy (알파 포함) 파일 (57.3KB) |
이미지 제공
이 페이지의 이미지는 다양한 소스에서 가져옵니다. 크레딧 위의 이미지는 여기 순서대로 나열되어 있습니다.
| 1 |
'고해상도 무료 스톡 사진 - 노란색 장미 3 - 꽃' 이미지 작성자: 존 설리반 이 파일은 공개 도메인에 있습니다. <ph type="x-smartling-placeholder"></ph> JPEG 소스 |
| 2 |
'baby tux for my user page' 이미지 작성자: 피지플랑크톤 이 파일은 공개 도메인에 있습니다. <ph type="x-smartling-placeholder"></ph> PNG 소스 |
| 3 |
'PNG 투명성 데모' 이미지 작성자: POV-Ray 소스 코드 에 따라 사용이 허가된 사진 <ph type="x-smartling-placeholder"></ph> 크리에이티브 커먼즈 <ph type="x-smartling-placeholder"></ph> 저작자표시-동일조건변경허락 3.0 Unported 라이선스를 사용합니다. <ph type="x-smartling-placeholder"></ph> PNG 소스 |
| 4 |
'그레고르 멘델 탄생 189주년' 이미지 작성자: Google 기념일 로고팀 이미지를 제공해 주신 Google 기념일 로고팀에 감사드립니다. <ph type="x-smartling-placeholder"></ph> PNG 소스 |
| 5 |
'오버레이용 투명한 나침반 카드' 이미지 작성자: Denelson83 이 파일은 <ph type="x-smartling-placeholder"></ph> 크리에이티브 커먼즈 <ph type="x-smartling-placeholder"></ph> 저작자표시-동일조건변경허락 3.0 Unported 라이선스를 사용합니다. <ph type="x-smartling-placeholder"></ph> PNG 소스 |
이미지 재현
재현성을 위해 일부 WebP의 사용을 시연하기 위해 압축 매개변수와 관련하여 이미지를 생성하는 과정입니다.
도구
PNG 재압축의 경우 pngcrush 1.8.13 및 ZopfliPNG 1.0.3에서 가장 우수한 결과 사용됩니다. 다음과 같은 명령줄 옵션이 사용됩니다.
PNG 크러쉬:
pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png
ZopfliPNG:
zopflipng --lossy_transparent input.png output-candidate.png
모든 필터가 있는 ZopfliPNG:
zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png
일부 더 큰 소스 사진의 크기를 재조정하기 위해 (보기 전용),
convert라는 ImageMagick 도구의 최신 버전,
https://www.imagemagick.org. 정확한 명령줄은 다음과 같습니다.
convert image.png -resize 240x image_resized.png
WebP 무손실로 압축
‘무손실’ PNG를 WebP로 변환하기 위한 cwebp 도구의 옵션- 손실이 없습니다. 최소한의 출력을 얻기 위해 사용된 정확한 명령줄은 다음과 같았습니다. 방법은 다음과 같습니다.
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
WebP 무손실 렌더링
렌더링을 위해 dwebp 도구를 사용하여 WebP 무손실 이미지를 PNG로 다시 변환했습니다. 사용한 명령줄은 정확히 다음과 같았습니다.
dwebp webp_lossless.webp -o output.png
WebP-손실로 압축 (알파 포함)
PNG를 WebP-lossy로 변환하기 위해 cwebp 도구를 사용했습니다 (알파 있음). 선택한 모델: WebP 품질은 90 (손실 압축)이고 알파 품질은 100 (무손실)입니다. 압축)을 사용합니다. 사용한 명령줄은 정확히 다음과 같았습니다.
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
WebP-손실 렌더링 (알파 사용)
WebP에서 dwebp 도구를 사용하여 WebP-손실 (알파 있음) 이미지를 PNG로 다시 변환했습니다. 있습니다. 사용한 명령줄은 정확히 다음과 같았습니다.
dwebp webp_alpha.webp -o output.png