WebP 圖片庫
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
這個圖片庫的內容
建議您使用支援 WebP 的瀏覽器瀏覽這個圖庫網頁,例如
Google Chrome、Opera
等
如果您無法存取 Google Chrome,可以將圖片下載到本機磁碟,然後搭配支援 WebP 的其他產品使用。
JPEG 和 WebP 的圖片檔案範例和 PNG 來源
下表顯示經過縮放的 JPEG (位於左側) 和 WebP 圖片 (右圖)
方便您並排比較由於目前已有瀏覽器原生支援 WebP,因此我們不再像推出時那樣,將 WebP 圖片放入 PNG 容器。圖片
檔案大小完全一致按一下 JPEG 和 WebP 縮圖,即可在新分頁中開啟大圖片
縮圖下方的檔案大小,對應的是點選縮圖時所查看圖片的檔案大小。WebP 圖片小於 30%
而不是 JPEG 檔案
圖片來源
本頁圖片來自多個不同來源。我們
選出一些令人愉悅、豐富的圖片來展示 WebP 的特質。
以下依序列出上述圖片的版權資訊。
重現映像檔
為了方便重現,並示範如何使用某些 WebP 壓縮參數,我們會在本圖庫中產生圖片時,說明相關步驟。
為了轉換及縮放來源圖片,我們使用最新版本的
ImageMagick 的工具名為 convert
,請前往 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
,產生最佳化 JPEG 檔案,品質係數為 80。
我們指定比最佳化 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 檔案讓全球節省了 32% 的成本
轉換成 JPEG 檔案
請注意,與 JPEG 相等的圖片相比,本頁使用的 WebP 縮圖也小了 26%。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-08-08 (世界標準時間)。
[null,null,["上次更新時間:2025-08-08 (世界標準時間)。"],[[["\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."]]