무손실 및 알파 갤러리

이 갤러리에서는 두 가지 새로운 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 무손실 이미지
WebP 무손실 파일 크기: 79.9KB
WebP-lossy (알파 포함) 이미지
Web-lossy (알파 포함) 파일 크기: 17.7KB
'내 사용자 페이지용 아기 턱시도' 2

PNG에 최적화된 파일 크기: 38.1KB
WebP 무손실 이미지
WebP 무손실 파일 크기: 27.0KB
WebP-lossy (알파 포함) 이미지
Web-lossy (알파 포함) 파일 크기: 13.8KB
'PNG 투명도 데모' 3

PNG에 최적화된 파일 크기: 213.5KB
WebP 무손실 이미지
WebP 무손실 파일 크기: 149.0KB
WebP-lossy (알파 포함) 이미지
Web-lossy (알파 포함) 파일 크기: 51.6KB
'그레고르 멘델 탄생 189주년' 4

PNG에 최적화된 파일 크기: 49.2KB
WebP 무손실 이미지
WebP 무손실 파일 크기: 33.2KB
WebP-lossy (알파 포함) 이미지
Web-lossy (알파 포함) 파일 크기: 18.3KB
'오버레이용 투명 나침반 카드' 5

PNG에 최적화된 파일 크기: 126.8KB
WebP 무손실 이미지
WebP 무손실 파일 크기: 97.1KB
WebP-lossy (알파 포함) 이미지
Web-lossy (알파 포함) 파일 크기: 57.3KB
"노란색 로즈": 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