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

WebP 갤러리

갤러리 콘텐츠

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

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

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

아래 표는 배율이 조정된 JPEG (왼쪽)와 WebP 이미지 (오른쪽)를 보여줍니다. 나란히 놓고 비교해 보세요. WebP를 기본적으로 지원하는 브라우저가 있으므로 출시 시와 같이 더 이상 WebP 이미지를 PNG 컨테이너에 배치하지 않습니다. 이미지 파일 크기가 정확해야 합니다. JPEG 및 WebP 썸네일 이미지를 클릭하면 새 탭의 대용량 이미지

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

JPEG	WEBP
"노르웨이 Nærøyfjorden - Breiskrednosi에서 촬영 유네스코 세계 헤리티지' ¹
JPEG 파일 크기: 43.84KB	WebP 파일 크기: 29.61KB

'Voss의 Ekstremsportveko 2010에서 카약 타기' ²
<ph type="x-smartling-placeholder"></ph> JPEG 파일 크기: 86.25KB	<ph type="x-smartling-placeholder"></ph> WebP 파일 크기: 59.18KB

'Parkrun' 시퀀스의 프레임 10 ³
<ph type="x-smartling-placeholder"></ph> JPEG 파일 크기: 297.05KB	WebP 파일 크기: 198.38KB

이미지: 'A Wild Cherry (Prunus avium) in flower' ⁴
JPEG 파일 크기: 251.03KB	<ph type="x-smartling-placeholder"></ph> WebP 파일 크기: 172.82KB

이미지: 'Jaipur Maharaja Brass Band'를 호흡하는 불꽃 차서피에르 벨기에 ⁵
JPEG 파일 크기: 120.78KB	WebP 파일 크기: 80.76KB

이미지 제공

이 페이지의 이미지는 다양한 소스에서 가져옵니다. WebP의 품질을 보여주기 위해 아름답고 풍부한 사진을 몇 장 선정했습니다.

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

1	"노르웨이 Nærøyfjorden - Breiskrednosi에서 촬영 유네스코 세계 문화유산" 이미지 저작자: Kjetil Birkeland Moe 저작자 허락을 받아 재현했습니다. PNG 소스 JPEG와 WebP를 비교한 저자의 블로그 게시물 마우스 마우스를 가져가면 예시가 활성화됩니다
2	'2010년 익스트림스포츠베코에서 카약 타기, 보스' 이미지 저작자: Kjetil Birkeland Moe 저작자 허락을 받아 재현했습니다. PNG 소스 JPEG와 WebP를 비교한 저자의 블로그 게시물 마우스 마우스를 가져가면 예시가 활성화됩니다
3	'파크런' 프레임 10 시퀀스 이미지 제작자: 라스 해글룬드, SVT Sveriges Television AB 제작자의 허가를 받아 복제되었습니다. <ph type="x-smartling-placeholder"></ph> PNG 소스
4	이미지: '꽃이 핀 야생 벚나무(Prunus avium)' 이미지 저작자: 벤자민 Gimmel PNG 소스 사진은 크리에이티브 커먼즈 저작자 표시-동일조건변경허락 3.0 Unported 라이선스에 따라 라이선스가 부여되었습니다.
5	이미지: 불을 뿜는 '자이푸르 마하라자 브라스밴드' 벨기에 샤세피에르 저자: 뤽 비아투르 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 형식으로 입력 이미지를 받습니다. 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 파일 크기에 비해 전 세계적으로 32%의 절감 효과를 제공했습니다.

이 페이지에 사용된 WebP 썸네일도 26% 더 작습니다. 상응해야 합니다.