이 갤러리의 콘텐츠
이 갤러리 페이지는 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. 유네스코 세계 유산'1 | |
JPEG 파일 크기: 43.84KB |
WebP 파일 크기: 29.61KB |
"2010 Ekstremsportveko의 카야커, Voss" 2 | |
JPEG 파일 크기: 86.25KB |
WebP 파일 크기: 59.18KB |
'Parkrun' 시퀀스의 프레임 103 | |
JPEG 파일 크기: 297.05KB |
WebP 파일 크기: 198.38KB |
이미지: '꽃에 있는 야생 체리 (Prunus avium)' 4 | |
JPEG 파일 크기: 251.03KB |
WebP 파일 크기: 172.82KB |
이미지: 불을 내뿜는 'Jaipur Maharaja Brass Band'의 Chassepierre Belgium 5 | |
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% 더 작습니다.