갤러리 콘텐츠
이 갤러리 페이지는 다음과 같이 WebP를 지원하는 브라우저에서 가장 잘 표시됩니다. Chrome, Opera 기타
Google 크롬에 액세스할 수 없는 경우 다른 제품과 함께 사용하도록 로컬 드라이브를 WebP를 지원합니다.
JPEG 및 WebP의 샘플 이미지 파일 및 PNG 소스
아래 표는 배율이 조정된 JPEG (왼쪽)와 WebP 이미지 (오른쪽)를 보여줍니다. 나란히 놓고 비교해 보세요. WebP를 기본적으로 지원하는 브라우저가 존재하기 때문에 우리는 시작할 때처럼 더 이상 PNG 컨테이너에 WebP 이미지를 넣지 않습니다. 이미지 파일 크기가 정확해야 합니다. JPEG 및 WebP 썸네일 이미지를 클릭하면 새 탭의 대용량 이미지
썸네일 아래의 파일 크기는 이미지의 파일 크기와 일치함 표시됩니다. WebP 이미지가 30% 이상 더 작습니다. 훨씬 효율적입니다.
JPEG | WEBP |
---|---|
"Nærøyfjorden, Norway - from Breiskrednosi. 유네스코 세계 헤리티지' 1 | |
<ph type="x-smartling-placeholder"></ph>
![]() JPEG 파일 크기: 43.84KB |
<ph type="x-smartling-placeholder"></ph>
![]() WebP 파일 크기: 29.61KB |
"Kayaker at Ekstremsportveko 2010, Voss" 2 | |
<ph type="x-smartling-placeholder"></ph>
![]() JPEG 파일 크기: 86.25KB |
<ph type="x-smartling-placeholder"></ph>
![]() WebP 파일 크기: 59.18KB |
'파크런' 프레임 10 시퀀스 3 | |
<ph type="x-smartling-placeholder"></ph>
![]() JPEG 파일 크기: 297.05KB |
<ph type="x-smartling-placeholder"></ph>
![]() WebP 파일 크기: 198.38KB |
이미지: 'A Wild Cherry (Prunus avium) in flower' 4 | |
<ph type="x-smartling-placeholder"></ph>
![]() JPEG 파일 크기: 251.03KB |
<ph type="x-smartling-placeholder"></ph>
![]() WebP 파일 크기: 172.82KB |
이미지: 'Jaipur Maharaja Brass Band'를 호흡하는 불꽃 차서피에르 벨기에 5 | |
<ph type="x-smartling-placeholder"></ph>
![]() JPEG 파일 크기: 120.78KB |
<ph type="x-smartling-placeholder"></ph>
![]() WebP 파일 크기: 80.76KB |
이미지 제공
이 페이지의 이미지는 다양한 소스에서 가져옵니다. Google은 WebP의 자질을 보여주기 위해 몇 가지 유쾌하고 풍부한 사진을 선택했습니다. 레나, 개코원숭이 등의 유명한 고전 이미지로 안타깝게도 저작권이 없는 것은 아닙니다.
위 이미지의 크레딧은 여기에 순서대로 표시되어 있습니다.
1 |
"Nærøyfjorden, Norway - from Breiskrednosi. 유네스코 세계 유산' 이미지 작성자: 케틸 버클랜드 모에 작성자의 허가를 받아 복제했습니다. <ph type="x-smartling-placeholder"></ph> PNG 소스 <ph type="x-smartling-placeholder"></ph> 저자가 작성한 블로그 게시물(JPEG 및 WebP 비교). 마우스 마우스를 가져가면 예시가 활성화됩니다 |
2 |
'Kayaker at Ekstremsportveko 2010, Voss' 이미지 작성자: 케틸 버클랜드 모에 작성자의 허가를 받아 복제했습니다. <ph type="x-smartling-placeholder"></ph> PNG 소스 <ph type="x-smartling-placeholder"></ph> 저자가 작성한 블로그 게시물(JPEG 및 WebP 비교). 마우스 마우스를 가져가면 예시가 활성화됩니다 |
3 |
'파크런' 프레임 10 시퀀스 이미지 제작자: 라스 해글룬드, SVT Sveriges Television AB 제작자의 허가를 받아 복제되었습니다. <ph type="x-smartling-placeholder"></ph> PNG 소스 |
4 |
이미지: 'A Wild Cherry (Prunus avium) in flower' 이미지 작성자: 벤자민 기멜 <ph type="x-smartling-placeholder"></ph> PNG 소스 에 따라 사용이 허가된 사진 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 Unported 라이선스에 대한 계약을 체결하시기 바랍니다. |
5 |
이미지: 'Jaipur Maharaja Brass Band'를 호흡하는 불꽃 챠서피에르 벨기에 작성자: 뤼크 비아투르 <ph type="x-smartling-placeholder"></ph> PNG 소스 에 따라 사용이 허가된 사진 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 Unported 라이선스에 대한 계약을 체결하시기 바랍니다. 저자 웹사이트: www.lucnix.be |
이미지 재현
재현성을 위해 일부 WebP의 사용을 시연하기 위해 압축 매개변수와 관련하여 이미지를 생성하는 과정입니다.
도구
원본 사진을 변환하고 크기를 조정하기 위해 우리는
convert
라는 ImageMagick의 도구(https://www.imagemagick.org에서 제공)
버전 정보는 다음과 같습니다.
Version: ImageMagick 6.5.7-8 2010-12-02 Q16 https://www.imagemagick.org
JPEG 압축의 경우 우리는 IJG의 참조 인코더 버전 8b를 사용했습니다. https://www.ijg.org/files/jpegsrc.v8b.tar.gz에서 제공됩니다.
버전 정보는 다음과 같습니다.
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 형식으로 입력 이미지를 받습니다. Google에서는 다음을 위해 convert
를 사용합니다.
생성합니다. 전체 전환 시퀀스는 다음과 같습니다.
convert in.png tmp.ppm
cjpeg -optimize -quality 80 -outfile out.jpg tmp.ppm
품질 계수 80으로 최적화된 JPEG 파일을 생성합니다.
WebP 형식으로 압축
최적화된 JPEG 파일에 비해 파일 크기를 30% 줄이는 것을 목표로 삼았습니다.
따라서 우리는 각 사진의 타겟 크기를 명시적으로 지정했습니다.
또한 각 필터의 필터링 강도에 임시 값을 설정합니다.
cwebp
도구의 -f
옵션 덕분에 가능합니다. 진폭은
공간 노이즈 형태 또한
-sns
옵션. 사용된 정확한 명령줄은 read:
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 파일 크기로 자동 변환하세요.
이 페이지에 사용된 WebP 썸네일도 26% 더 작습니다. 상응해야 합니다.