WebP 갤러리
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
갤러리 콘텐츠
이 갤러리 페이지는 Google Chrome, Opera 등과 같이 WebP를 지원하는 브라우저에서 가장 잘 보입니다.
Google Chrome에 액세스할 수 없는 경우 로컬 드라이브에 이미지를 다운로드하여 WebP를 지원하는 다른 제품과 함께 사용할 수 있습니다.
JPEG 및 WebP의 샘플 이미지 파일 및 PNG 소스
아래 표는 배율이 조정된 JPEG (왼쪽)와 WebP 이미지 (오른쪽)를 보여줍니다.
나란히 놓고 비교해 보세요. WebP를 기본적으로 지원하는 브라우저가 있으므로 출시 시와 같이 더 이상 WebP 이미지를 PNG 컨테이너에 배치하지 않습니다. 이미지
파일 크기가 정확해야 합니다. JPEG 및 WebP 썸네일 이미지를 클릭하면
새 탭의 대용량 이미지
썸네일 아래의 파일 크기는 썸네일을 클릭할 때 표시되는 이미지의 파일 크기에 해당합니다. WebP 이미지는 JPEG 이미지보다 30% 이상 작습니다.
이미지 제공
이 페이지의 이미지는 다양한 소스에서 가져옵니다. WebP의 품질을 보여주기 위해 아름답고 풍부한 사진을 몇 장 선정했습니다.
위 이미지의 크레딧은 여기에 순서대로 표시되어 있습니다.
이미지 재현
재현성을 위해 일부 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의 인코더 (cjpeg)는 PPM 형식으로 입력 이미지를 받습니다. convert를 사용하여 생성합니다. 전체 변환 시퀀스는 다음과 같습니다.
convert in.png tmp.ppm
cjpeg -optimize -quality 80 -outfile out.jpg tmp.ppm
품질 계수 80으로 최적화된 JPEG 파일을 생성합니다.
최적화된 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% 더 작습니다.
상응해야 합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-08(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-08(UTC)"],[[["\u003cp\u003eThis gallery showcases the advantages of using WebP images over JPEG images, particularly in terms of file size reduction.\u003c/p\u003e\n"],["\u003cp\u003eWebP images in this gallery are more than 30% smaller than their JPEG counterparts while maintaining comparable visual quality.\u003c/p\u003e\n"],["\u003cp\u003eThe gallery provides sample images in both JPEG and WebP formats, along with the original PNG source for comparison.\u003c/p\u003e\n"],["\u003cp\u003eVisitors can download these images and utilize them with WebP-supported products.\u003c/p\u003e\n"],["\u003cp\u003eDetails on the tools and compression parameters used to generate the WebP images are provided for reproducibility.\u003c/p\u003e\n"]]],["This gallery displays side-by-side comparisons of JPEG and WebP images, demonstrating WebP's smaller file sizes. WebP images are consistently over 30% smaller than their JPEG counterparts. The gallery includes five example images from various sources, each with downloadable JPEG, WebP, and PNG files. The method for creating these image formats are detailed, utilizing tools like ImageMagick and cjpeg, and employing specific commands to convert, compress, and optimize the images to Webp and JPEG.\n"],null,["# WebP Gallery\n\nContents of this Gallery\n------------------------\n\nThis gallery page is best viewed with a browser that supports WebP, such as\nGoogle Chrome, Opera\n[and others](/speed/webp/faq#which_web_browsers_natively_support_webp).\n\nIf you don't have access to Google Chrome, you may download the images on your\nlocal drive to use with other products that\n[support WebP](https://wikipedia.org/wiki/WebP#Support).\n\nSample Image Files in JPEG and WebP and the PNG Source\n------------------------------------------------------\n\nThe table below shows scaled JPEG (on the left) and WebP images (on the right)\nside-by-side for comparison. Since browsers exist that support WebP natively,\nwe no longer place WebP images in a PNG container as we did at launch. Image\nfile sizes are exact. Clicking on the JPEG and WebP thumbnails will open the\nlarge images in a new tab\n\nFile sizes below the thumbnails correspond to the files sizes of the images\nviewed when clicking the thumbnails. The WebP images are more than 30% smaller\nthan the JPEG ones.\n\n| JPEG | WEBP |\n|--------------------------------------------------------------------------|---------------------------------------------------------------------------|\n| \"Nærøyfjorden, Norway - from Breiskrednosi. UNESCO World Heritage\" [^1^](#credits1) ||\n| [](https://www.gstatic.com/webp/gallery/1.jpg) JPEG file size: 43.84 KB | [](https://www.gstatic.com/webp/gallery/1.webp) WebP file size: 29.61 KB |\n| ||\n| \"Kayaker at Ekstremsportveko 2010, Voss\". [^2^](#credits2) ||\n| [](https://www.gstatic.com/webp/gallery/2.jpg) JPEG file size: 86.25 KB | [](https://www.gstatic.com/webp/gallery/2.webp) WebP file size: 59.18 KB |\n| ||\n| Frame 10 of the \"Parkrun\" sequence [^3^](#credits3) ||\n| [](https://www.gstatic.com/webp/gallery/3.jpg) JPEG file size: 297.05 KB | [](https://www.gstatic.com/webp/gallery/3.webp) WebP file size: 198.38 KB |\n| ||\n| Image: [\"A Wild Cherry (Prunus avium) in flower\"](https://commons.wikimedia.org/wiki/File:Fr%C3%BChling_bl%C3%BChender_Kirschenbaum.jpg) [^4^](#credits4) ||\n| [](https://www.gstatic.com/webp/gallery/4.jpg) JPEG file size: 251.03 KB | [](https://www.gstatic.com/webp/gallery/4.webp) WebP file size: 172.82 KB |\n| ||\n| Image: [Fire breathing \"Jaipur Maharaja Brass Band\" Chassepierre Belgium](https://commons.wikimedia.org/wiki/File:Fire_breathing_2_Luc_Viatour.jpg) [^5^](#credits5) ||\n| [](https://www.gstatic.com/webp/gallery/5.jpg) JPEG file size: 120.78 KB | [](https://www.gstatic.com/webp/gallery/5.webp) WebP file size: 80.76 KB |\n\nImage Credits\n-------------\n\nThe images on this page come from a number of different sources. We have\nselected some delightful and rich pictures to showcase qualities of WebP.\n\nCredits for the images above are listed here in order.\n\n|---|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| 1 | \"Nærøyfjorden, Norway - from Breiskrednosi. UNESCO World Heritage\" Image Author: Kjetil Birkeland Moe Reproduced with permission of the author. [PNG source](https://www.gstatic.com/webp/gallery/1.png) [Blog post](https://www.kjetilbm.net/prosjekter/data/lyd-og-bilde/webp#) by author with comparison of JPEG and WebP. Mouse hover activates examples. |\n| 2 | \"Kayaker at Ekstremsportveko 2010, Voss\" Image Author: Kjetil Birkeland Moe Reproduced with permission of the author. [PNG source](https://www.gstatic.com/webp/gallery/2.png) [Blog post](https://www.kjetilbm.net/prosjekter/data/lyd-og-bilde/webp#) by author with comparison of JPEG and WebP. Mouse hover activates examples. |\n| 3 | Frame 10 of the \"Parkrun\" sequence Image Producer: Lars Haglund, SVT Sveriges Television AB Reproduced with permission of producer [PNG source](https://www.gstatic.com/webp/gallery/3.png) |\n| 4 | Image: [\"A Wild Cherry (Prunus avium) in flower\"](https://commons.wikimedia.org/wiki/File:Fr%C3%BChling_bl%C3%BChender_Kirschenbaum.jpg) Image Author: Benjamin Gimmel [PNG source](https://www.gstatic.com/webp/gallery/4.png) Photo licensed under the [Creative Commons](https://en.wikipedia.org/wiki/en:Creative_Commons) [Attribution-Share Alike 3.0 Unported](https://creativecommons.org/licenses/by-sa/3.0/deed.en) license. |\n| 5 | Image: [Fire breathing \"Jaipur Maharaja Brass Band\" Chassepierre Belgium](https://commons.wikimedia.org/wiki/File:Fire_breathing_2_Luc_Viatour.jpg) Author: Luc Viatour [PNG source](https://www.gstatic.com/webp/gallery/5.png) Photo licensed under the [Creative Commons](https://en.wikipedia.org/wiki/en:Creative_Commons) [Attribution-Share Alike 3.0 Unported](https://creativecommons.org/licenses/by-sa/3.0/deed.en) license. Author website at [www.lucnix.be](https://www.lucnix.be) |\n\nReproducing the Images\n----------------------\n\nFor the sake of reproducibility and to demonstrate the use of some WebP\ncompression parameters, we describe here the exact steps involved when\ngenerating the images in this gallery.\n\n### Tools\n\nTo convert and rescale the source pictures, we used a recent version of\nImageMagick's tool named `convert`, available at \u003chttps://www.imagemagick.org\u003e.\nThe version information reads: \n\n Version: ImageMagick 6.5.7-8 2010-12-02 Q16 https://www.imagemagick.org\n\nFor JPEG compression, we used the version 8b of IJG's reference encoder,\navailable at \u003chttps://www.ijg.org/files/jpegsrc.v8b.tar.gz\u003e.\n\nThe version information reads: \n\n Independent JPEG Group's CJPEG, version 8b 16-May-2010\n Copyright (C) 2010, Thomas G. Lane, Guido Vollbeding\n\n### Generating the Source PNG Pictures\n\nFirst, the JPEG sources are converted losslessly to PNG format simply using: \n\n convert in.jpg out.png\n\nThen, the large source images are rescaled to a smaller width of 1024 pixels\nusing the following command: \n\n convert in.png -depth 16 -gamma 0.454545 -filter lanczos -resize 1024 -gamma 2.2 -depth 8 out.png\n\nto produce the final set of source PNG images.\n\n### Compressing to JPEG Format\n\nJPEG's encoder (`cjpeg`) takes input images in PPM format. We use `convert` to\ngenerate them. The complete conversion sequence is then: \n\n convert in.png tmp.ppm\n cjpeg -optimize -quality 80 -outfile out.jpg tmp.ppm\n\nwhich produces optimized JPEG files with a quality factor of 80.\n\n### Compressing to WebP Format\n\nWe targeted a 30% file size reduction compared to the optimized JPEG files.\nThus, we explicitly specified the target sizes for each picture.\nAdditionally, we set ad-hoc values for the filtering strength for each\npicture, thanks to the `-f` option of the `cwebp` tool. The amplitude of the\nspatial noise shaping is also reinforced for some pictures by use of the\n`-sns` option. The exact command lines used read: \n\n cwebp -m 6 -f 50 -size 31500 1.png -o 1.webp\n cwebp -m 6 -f 20 -sns 100 -size 62000 2.png -o 2.webp\n cwebp -m 6 -sns 90 -size 213000 3.png -o 3.webp\n cwebp -m 6 -f 40 -size 181000 4.png -o 4.webp\n cwebp -m 6 -f 40 -size 89000 5.png -o 5.webp\n\nOverall, the resulting WebP files provided a global saving of 32% compared\nto the JPEG file sizes.\n\nNote that the WebP thumbnails used on this page are also smaller by 26%\ncompared to their JPEG equivalent."]]
