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

WebP 갤러리

이 갤러리의 콘텐츠

이 갤러리 페이지는 Chrome, Opera 등과 같이 WebP를 지원하는 브라우저에서 가장 잘 표시됩니다.

Chrome에 액세스할 수 없는 경우 로컬 드라이브에 이미지를 다운로드하여 WebP를 지원하는 다른 제품과 함께 사용할 수 있습니다.

JPEG 및 WebP의 샘플 이미지 파일 및 PNG 소스

아래 표에는 크기가 조정된 JPEG (왼쪽)와 WebP 이미지 (오른쪽)가 비교를 위해 나란히 표시되어 있습니다. WebP를 기본적으로 지원하는 브라우저가 있으므로 출시 당시에 그랬던 것처럼 더 이상 PNG 컨테이너에 WebP 이미지를 배치하지 않습니다. 이미지 파일 크기는 정확합니다. JPEG 및 WebP 썸네일 이미지를 클릭하면 새 탭에서 큰 이미지가 열리며

썸네일 이미지 아래의 파일 크기는 썸네일을 클릭할 때 표시되는 이미지의 파일 크기와 일치합니다. WebP 이미지는 JPEG 이미지보다 30% 이상 작습니다.

JPEG	WEBP
"Nærøyfjorden, Norway - from Breiskrednosi. 유네스코 세계 유산'¹
JPEG 파일 크기: 43.84KB	WebP 파일 크기: 29.61KB

"2010 Ekstremsportveko의 카야커, Voss" ²
JPEG 파일 크기: 86.25KB	WebP 파일 크기: 59.18KB

'Parkrun' 시퀀스의 프레임 10³
JPEG 파일 크기: 297.05KB	WebP 파일 크기: 198.38KB

이미지: '꽃에 있는 야생 체리 (Prunus avium)' ⁴
JPEG 파일 크기: 251.03KB	WebP 파일 크기: 172.82KB

이미지: 불을 내뿜는 'Jaipur Maharaja Brass Band'의 Chassepierre Belgium ⁵
JPEG 파일 크기: 120.78KB	WebP 파일 크기: 80.76KB

이미지 제공

이 페이지의 이미지는 다양한 출처에서 가져옵니다. WebP의 품질을 보여주기 위해 즐겁고 풍부한 사진 몇 가지를 선정했습니다. 압축 비교에 자주 사용되는 레나, 바분 등과 같은 유명한 고전 이미지에는 안타깝게도 저작권이 없습니다.

위 이미지에 대한 크레딧이 여기에 순서대로 표시되어 있습니다.

1	"Nærøyfjorden, Norway - from Breiskrednosi. 유네스코 세계 유산' 이미지 작성자: 케틸 버클랜드 모에 저자의 허가를 받아 복제함. PNG 소스 JPEG와 WebP 비교를 포함한 작성자의 블로그 게시물 마우스를 가져가면 예가 활성화됩니다.
2	'Kayaker at Ekstremsportveko 2010, Voss' 이미지 작성자: Kjetil Birkeland Moe 저자의 허가를 받아 복제함. PNG 소스 JPEG와 WebP 비교를 포함한 작성자의 블로그 게시물 마우스를 가져가면 예가 활성화됩니다.
3	'Parkrun' 시퀀스의 프레임 10 이미지 제작자: Lars Haglund, SVT Sveriges Television AB 제작자의 허가를 받아 재현됨 PNG 소스
4	이미지: 'A Wild Cherry (Prunus avium) in flower' 이미지 작성자: 벤자민 김멜 PNG 출처 크리에이티브 커먼즈 저작자 표시-동일조건 변경 3.0 미포팅 라이선스에 따라 라이선스가 부여된 사진
5	이미지: 불을 뿜는 '자이푸르 마하라자 브라스 밴드' Chassepierre Belgium 작성자: Luc Viatour PNG 출처 크리에이티브 커먼즈 저작자 표시-동일조건 변경 3.0 언포트 라이선스에 따라 라이선스가 부여된 사진 저자 웹사이트: www.lucnix.be

이미지 재현

재현성을 높이고 일부 WebP 압축 매개변수의 사용을 보여주기 위해 이 갤러리에서 이미지를 생성할 때 관련된 정확한 단계를 여기서 설명합니다.

도구

Google은 소스 사진을 변환하고 크기를 조절하기 위해 https://www.imagemagick.org에서 제공되는 convert이라는 최신 버전의 ImageMagick 도구를 사용했습니다. 버전 정보는 다음과 같습니다.

Version: ImageMagick 6.5.7-8 2010-12-02 Q16 https://www.imagemagick.org

JPEG 압축의 경우 https://www.ijg.org/files/jpegsrc.v8b.tar.gz에서 제공되는 IJG 참조 인코더의 버전 8b를 사용했습니다.

버전 정보는 다음과 같습니다.

Independent JPEG Group's CJPEG, version 8b  16-May-2010
Copyright (C) 2010, Thomas G. Lane, Guido Vollbeding

소스 PNG 사진 생성

첫째, JPEG 소스는 다음을 사용하여 무손실 PNG 형식으로 변환됩니다.

convert in.jpg out.png

그런 다음 큰 소스 이미지가 다음 명령어를 사용하여 1024픽셀의 더 작은 너비로 재조정됩니다.

convert in.png -depth 16 -gamma 0.454545 -filter lanczos -resize 1024 -gamma 2.2 -depth 8 out.png

소스 PNG 이미지의 최종 세트를 생성합니다.

JPEG 형식으로 압축

JPEG의 인코더 (cjpeg)는 입력 이미지를 PPM 형식으로 가져옵니다. convert를 사용하여 이를 생성합니다. 그러면 전체 전환 시퀀스는 다음과 같습니다.

convert in.png tmp.ppm
cjpeg -optimize -quality 80 -outfile out.jpg tmp.ppm

이는 품질 계수가 80인 최적화된 JPEG 파일을 생성합니다.

WebP 형식으로 압축

최적화된 JPEG 파일에 비해 파일 크기를 30% 줄이는 것을 목표로 했습니다. 따라서 각 사진의 대상 크기를 명시적으로 지정했습니다. 또한 cwebp 도구의 -f 옵션 덕분에 각 사진의 필터링 강도에 임시 값을 설정합니다. 일부 사진에서는 -sns 옵션을 사용하여 공간 노이즈 형상의 진폭도 강화됩니다. 사용된 정확한 명령줄은 다음과 같습니다.

cwebp -m 6 -f 50 -size 31500 1.png -o 1.webp
cwebp -m 6 -f 20 -sns 100 -size 62000 2.png -o 2.webp
cwebp -m 6 -sns 90 -size 213000 3.png -o 3.webp
cwebp -m 6 -f 40 -size 181000 4.png -o 4.webp
cwebp -m 6 -f 40 -size 89000 5.png -o 5.webp

결과적으로 WebP 파일은 JPEG 파일 크기에 비해 전체적으로 32% 의 절약 효과를 제공했습니다.

이 페이지에 사용된 WebP 썸네일은 동등한 JPEG 썸네일에 비해 26% 더 작습니다.