이 갤러리의 콘텐츠
이 갤러리에서는 두 가지 새로운 WebP 모드를 보여주는 샘플 이미지를 제공합니다. WebP-lossless 및 WebP-lossy(알파 있음)(투명성 지원)입니다.
나란히 비교
아래 표에는 PNG 이미지 (pngcrush 및 pngout으로 압축됨), WebP 무손실 이미지, 알파가 포함된 WebP 손실 이미지가 나란히 비교되어 있습니다. 이미지는 일반적으로 그래픽 소프트웨어에서처럼 체크무늬 배경에 오버레이됩니다.
WebP 무손실 이미지에는 알파 및 기본 품질을 갖춘 WebP-손실 이미지에는 webp 품질 90이 사용되었습니다. 자세한 내용은 이미지 재현 섹션을 참고하세요.
WebP를 렌더링할 수 없는 브라우저를 위해 PNG로 다시 변환된 WebP 이미지를 표시합니다. 호환되는 브라우저가 있다면 아래에서 WebP 파일 링크를 찾을 수 있습니다. 또한 이 페이지의 이미지는 편의를 위해 축소되었습니다. 이미지를 클릭하면 전체 크기의 이미지를 볼 수 있습니다.
이 표에는 각 모드에서 얻은 이미지 크기도 나와 있습니다.
PNG | WebP 무손실 | WebP-lossy (알파 포함) |
---|---|---|
'노란색 로즈'1 | ||
PNG에 최적화된 파일 크기: 110.7KB |
WebP 무손실 파일 크기: 79.9KB |
Web-lossy (알파 포함) 파일 크기: 17.7KB |
'내 사용자 페이지용 아기 턱시도' 2 | ||
PNG에 최적화된 파일 크기: 38.1KB |
WebP 무손실 파일 크기: 27.0KB |
Web-lossy (알파 포함) 파일 크기: 13.8KB |
'PNG 투명도 데모' 3 | ||
PNG에 최적화된 파일 크기: 213.5KB |
WebP 무손실 파일 크기: 149.0KB |
Web-lossy (알파 포함) 파일 크기: 51.6KB |
'그레고르 멘델 탄생 189주년' 4 | ||
PNG에 최적화된 파일 크기: 49.2KB |
WebP 무손실 파일 크기: 33.2KB |
Web-lossy (알파 포함) 파일 크기: 18.3KB |
'오버레이용 투명 나침반 카드' 5 | ||
PNG에 최적화된 파일 크기: 126.8KB |
WebP 무손실 파일 크기: 97.1KB |
Web-lossy (알파 포함) 파일 크기: 57.3KB |
WebP 파일 링크(Chrome 22 이상에서 확인 가능)는 다음과 같습니다.
"노란색 로즈": | WebP 무손실 파일 (80.1KB) | WebP-lossy (알파 포함) 파일 (18.4KB) |
"내 사용자 페이지에 아기 턱시도": | WebP 무손실 파일 (27.0KB) | WebP-lossy (알파 포함) 파일 (14.1KB) |
'PNG 트랜스퍼런시 데모': | WebP 무손실 파일 (149.1KB) | WebP-lossy (알파 포함) 파일 (52.6KB) |
'그레고르 멘델 탄생 189주년': | WebP 무손실 파일 (33.3KB) | WebP-lossy (알파 포함) 파일 (19.0KB) |
'오버레이용 투명 나침반 카드': | WebP 무손실 파일 (97.1KB) | WebP-lossy (알파 포함) 파일 (57.3KB) |
이미지 제공
이 페이지의 이미지는 다양한 출처에서 가져옵니다. 위 이미지의 크레딧이 여기에 순서대로 나열되어 있습니다.
1 |
'고해상도 무료 스톡 사진 - 노란색 장미 3 - 꽃' 이미지 작성자: Jon Sullivan 이 파일은 공개 도메인에 있습니다. JPEG 소스 |
2 |
'내 사용자 페이지를 위한 아기 턱시도' 이미지 작성자: Fizyplankton 이 파일은 공개 도메인에 있습니다. PNG 소스 |
3 |
'PNG 투명성 데모' 이미지 작성자: POV-Ray 소스 코드 크리에이티브 커먼즈 저작자표시-동일조건 변경 허락 3.0 언포트 라이선스에 따라 라이선스가 부여된 사진 PNG 소스 |
4 |
'그레고르 멘델 탄생 189주년' 이미지 작성자: Google 기념일 로고팀 이미지를 제공해 주신 Google 기념일 로고팀에 감사드립니다. PNG 소스 |
5 |
'오버레이용 투명 나침반 카드' 이미지 작성자: Denelson83 이 파일은 크리에이티브 커먼즈 저작자 표시-동일조건 변경 허락 3.0 언포팅 라이선스에 따라 라이선스가 부여되었습니다. PNG 소스 |
이미지 재현
재현성을 높이고 일부 WebP 압축 매개변수의 사용을 보여주기 위해 이 갤러리에서 이미지를 생성할 때 관련된 정확한 단계를 여기서 설명합니다.
도구
PNG 재압축의 경우 pngcrush 1.8.13 및 ZopfliPNG 1.0.3에서 최상의 결과가 사용됩니다. 다음 명령줄 옵션이 사용됩니다.
Pngcrush:
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
더 큰 소스 사진 중 일부의 크기를 재조정하기 위해 (보기 전용) Google에서는 https://www.imagemagick.org에서 제공되는 convert
이라는 최신 버전의 ImageMagick 도구를 사용했습니다. 정확한 명령줄은 다음과 같습니다.
convert image.png -resize 240x image_resized.png
WebP 무손실로 압축
PNG를 WebP-lossless로 변환하기 위해 cwebp 도구에서 'lossless' 옵션을 사용했습니다. 최소한의 출력을 얻기 위해 정확히 사용한 명령줄은 다음과 같습니다.
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 손실 렌더링 (알파 포함)
렌더링을 위해 dwebp 도구를 사용하여 WebP-lossy (알파 포함) 이미지를 PNG로 다시 변환했습니다. 사용된 정확한 명령줄은 다음과 같습니다.
dwebp webp_alpha.webp -o output.png