WebP圖片及格式轉換

2021-12-22 愛玩耍的Jack

有時候發現淘寶、微信公眾號和一些網站的圖片雖然瀏覽器上能顯示，但下載保存後卻無法直接打開查看，也不能用 PS 編輯。查看格式是.webp。

檢索發現WebP[1] 是 Google 的一種可以同時提供有損壓縮（像 JPEG 一樣）和透明度（像 PNG 一樣）的圖片文件格式，不過與 JPEG 或 PNG 相比，這種格式可以提供更好的壓縮。

它的優點就是同等畫面質量下，體積比jpg、png這些少了25%以上。

在移動網際網路時代，頁面大小和用戶留存息息相關，更快的加載頁面才能讓更多用戶關注到你的內容，而圖片一直都是頁面體積[2]的大頭，拿我們的活動頁面來說，圖片佔據了80%以上的頁面大小。所以使用webp的話，可以瞬間讓頁面大小下降1/4，不得不說是一個極具性價比的優化點。

一、WebP格式轉換辦法

Chrome 瀏覽器擴展圖片另存為 JPG / PNG / WebP是一個非常方便且開源的 Chrome 瀏覽器擴展 （Edge 等瀏覽器同樣適用），功能就是可以讓你直接將網頁上的 .webp、.svg 等格式的圖片右鍵另存為 JPG 或 PNG 格式。

安裝該插件之後，每當你遇到使用 WebP 格式圖片的網站，比如微信公眾號的網頁，就能像以往一樣，直接對圖片點右鍵下載保存到 JPG、PNG 格式圖片了。同時，它也能反過來，將其他圖片格式轉換成 Webp 來保存。

圖片另存為 JPG / PNG / WebP 瀏覽器插件[3] (Chrome)

Chrome 瀏覽器 .crx 擴展離線安裝教程[4]

二、JPG、PNG和WebP圖片格式的區別、原理及選擇[5]

簡單的說就是從三種情況考慮：真實性、透明性、矢量性

真實性中就是色彩度、位深、損耗(壓縮)等(jpg、jpeg、gif、tiff、bmp)；

透明性就很明顯了，就是支技透明的特性，但這裡也有一個就是位深，他會影響透明度的深度png8與png24的差異就在這裡(png)；

特殊動畫，就是支持幀的特點，可以做成動畫(gif)；

矢量性就可還原度，可再編輯的特性，通俗一點來講就是很多人常說的放大不模糊的特點，因為他們的組成是由公式曲線方程生成的(但我們是可視化的編輯)(ai、cdr、eps)；

應用場景是網頁，增加網頁加載速度（webp）。

引用連結

[1] WebP: https://developers.google.cn/speed/webp/
[2] 頁面體積: https://www.upyun.com/webp?utm_source=zhihu&utm_medium=referral&utm_campaign=260228870&utm_term=webp
[3] 圖片另存為 JPG / PNG / WebP 瀏覽器插件: https://dl.iplaysoft.com/files/5585.html
[4] Chrome 瀏覽器 .crx 擴展離線安裝教程: https://www.iplaysoft.com/p/chrome-install-crx
[5] JPG、PNG和WebP圖片格式的區別、原理及選擇: https://developer.android.google.cn/topic/performance/network-xfer.html#webp

相關焦點

  • 輕鬆將webp圖片格式轉換為png、jpg等其他圖片格式的方法
    關於webp圖片格式，估計很多小夥伴還沒遇到過，其實這是一種新型圖片格式，簡單來說，webp是Google新推出的影像技術，它可讓網頁圖檔有效進行壓縮
  • 微信公眾號圖片保存後打不開?輕鬆搞定 WebP 格式圖片查看和轉換
    下面就給大家介紹幾個能更方便地打開、轉換和使用 webp 格式圖片的工具以及瀏覽器插件擴展吧。同時，它也能反過來，將其他圖片格式轉換成 Webp 來保存。因此無論你想傳統的兼容性更好的圖片格式，還是想要用更先進的webp，這款插件都能幫得到你。↓前往原文獲取下載地址↓
  • 扒一扒「WEBP格式」的圖片
    本文主要除了比較WEBP與JPG等傳統格式的圖片之外，還介紹了如何轉換WEBP格式圖片以及具體開發時的用法。使用WEBP圖片的目的保證圖片質量的前提下縮小圖片體積。JPEG、PNG以及GIF這些格式的圖片已經沒有太大的優化空間。
  • 嘗試在網站上使用Webp格式的圖片
    正因為以上優點，Google一直強勢推廣Webp格式的圖片。目前大部分瀏覽器都已經支持Webp了，包括之前新版本不支持webp的safari瀏覽器在2020年10月的更新之後都已經開始支持webp了。為什麼要使用Webp格式的圖片？1.
  • 「webp2jpg」無上傳,可批量的圖片格式轉換在線工具
    WebP 格式的圖片，相信大家都不陌生了，這個格式的圖片壓縮體積大約只有
  • 網站webp圖片下載轉換為jpg格式
    Webp格式是Google在2010年提出的新格式概念，其優勢在於它具有更優的圖像數據壓縮算法，容量更小，同時圖片質量基本表現無損
  • 【SCRY技術分享】webp圖片格式的應用實踐
    我們得到了一個新的思路：修改圖片格式。簡單了解所有能找到的圖片格式，通過項目情況的篩選，去掉一些「相性不合」的格式：1.   去掉不適合web應用的圖片格式，如pdf、raw（專業攝影）、psd（photoshop）等2.   去掉兼容性差的格式，如heif（所有主流瀏覽器均不支持）3.   .
  • Linux下PNG、JEPG、JPG、Webp圖片格式互轉
    於是就想把這個圖片轉換成webp格式。環境系統：ubuntu Ukylin20.04（基於ubuntu20.04）要做格式轉換，需要安裝webpsudo apt-get install webpwebp使用說明
  • 《webp2jpg》讓圖片薄如蟬翼! 實現png, jpg, gif與webp的相互轉換(無需上傳的圖片轉換器-簡單、隱私)
    png, gif與webp進行批量格式互換的工具, 轉換過程在瀏覽器中完成, 無需上傳圖片到伺服器,且程序開源, 可進行私有化部署.titlewebp是google推廣的一套圖片格式,支持類似png的透明度, 也支持類似gif的動圖, 是一種非常非常理想的格式, 而且圖片壓縮比極高, 而且畫質基本無損失, 缺點是並非所有瀏覽器都支持webp格式, 甚至連宇宙最強P圖軟體Photoshop 2020都無法打開webp
  • 極限優化之webp圖片格式實戰
    ，派生自圖像編碼格式 VP8。2.兼容性目前，移動端Android4.0以上、PC端chorme 10+（14 ~ 16 有渲染bug）、opera 11+可支持webp格式圖片。根據對目前國內瀏覽器佔比與 WebP 的兼容性分析，大約有 50% 以上的國內用戶可以直接體驗到 WebP。
  • webp怎麼轉換成jpg?
    在下載微信公眾平臺文章中的圖片，以及百度圖片的時候，我們發現，圖片的擴展名，不再是常見的jpg、png或gif了，變為了webp（WebP是Google
  • WebP轉換技術圖片瘦身實踐總結
    ，同時圖片體積也疊加減少的，那疊加壓縮的圖片在進行WebP轉換是不是效果會更好呢？壓縮疊加次數1次2次3次4次圖片體積96.0KB41.52KB35.7KB32.5KB30.3KBPNG轉換WebP後的圖片體積6.1KB6.2KB6.2KB6.4KB6.9KB結論：webp文體大小與圖片壓縮次數成正比，WebP的轉換最好是用原圖轉換GIF轉換WebP效果對比1、原GIF圖
  • 9.27【前端開發】圖片文件格式:常見的圖片格式對比有何優劣以及如何使用Google的webp格式?
    Google webp格式圖片 網絡中圖片是佔用流量較大的一部分，如何在保證圖片視覺不失真前提下縮小體積，對於節省帶寬和電池電量十分重要，特別在行動裝置上。 Google webp工具包簡介：cwebp -- 將其它圖片轉為webp格式圖片 (不包括GIF)dwebp -- 將webp格式圖片轉為其它格式圖片gif2webp -- 將GIF轉換為webp圖片
  • 10.2【前端開發】圖片文件格式:常見的圖片格式對比有何優劣以及如何使用Google的webp格式?
    Google webp格式圖片 網絡中圖片是佔用流量較大的一部分，如何在保證圖片視覺不失真前提下縮小體積，對於節省帶寬和電池電量十分重要，特別在行動裝置上。前端開發人員學習和使用webp格式，勢必必行。
  • 一日一技:把webp圖片保存為png
    webp是Chrome支持的一種圖片格式，質量比jpg/png高，體積卻更小。
  • 免費轉換!批量將 WebP 轉成 JPG、PNG 格式的神器「AnyWebP」
    AnyWebP 操作方法很簡單，只要將 WebP 圖片拖曳到網頁中，選擇要轉換輸出的圖片格式、尺寸和質量，支持批次轉檔，轉換後會把所有圖片壓縮為單一壓縮文件。AnyWebP網站連結：https://anywebp.com/使用教學開啟 AnyWebP 網站後把 WebP 圖片拖曳進去，支持最大 10 MB、8000×8000 尺寸大小，接著從下方選擇要輸出的圖片格式（JPEG、PNG 或 ICO），也能調整圖片大小和質量。
  • 這個圖片格式轉換網站,無需上傳也能輕鬆轉
    如果你比較在意自己的隱私，荔枝君就給大家推薦一個免費轉換網站：webp2jpg。它雖是個網站，但無需上傳文件，純前端實現圖片轉換，相當安全。 適應多種轉換需求webp2jpg 支持轉換成指定大小的圖片，可自定義圖片寬度。在處理寬度差異比較大的圖片時還可勾選「自動寬」，智能調節尺寸。
  • 手把手教你如何將網站圖片格式升級為WebP 乾貨分享
    開發的一種新的圖片格式，它支持有損壓縮、無損壓縮和透明度，壓縮後的文件大小比JPEG、PNG等都要小。把已有的圖片轉換為WebP格式要使用WebP格式，需要將你網站用到的圖片都製作一份WebP格式的版本，如果你使用CDN服務商，它們一般都會提供轉碼到WebP格式的選項。如又拍云：增加這樣的配置後，我們可以通過給圖片URL加上相應的後綴，來使用WebP格式的版本資源。你也可以使用Webpack、Gulp的插件來批量轉換圖片格式。
  • 圖片的新型格式:webp的工作原理
    本篇文章翻譯自谷歌出的優化視頻裡面的光頭佬（Colt McAnlis）以下正文：說到網際網路的圖片格式，JPG一直以來都是標準格式。然而在2013年，Google(和一些開源貢獻者)創建了一種新的圖片編解碼算法，叫做WebP，它旨在同樣的的圖片質量下比JPG壓縮得更小。WebP有多屌？
  • 移動端 WebP 圖片實踐之路 (上)
    前言移動端應用往往有大量的圖片展示場景，圖片的大小對企業至關重要。WebP 作為一種更高效的圖片編碼格式，平均大小比 PNG/JPG/ GIF/動態 GIF 格式減少 70%（又拍雲 WebP 轉換技術讓圖片「薄如蟬翼」），且質量沒有明顯的差別，是其他圖片格式極佳的替代者。