首页
/
每日頭條
/
生活
/
web開發前端知識
web開發前端知識
更新时间:2025-03-24 09:29:44

引言

使用ImageMagick、cwebp和OSX,我們可以将任何圖像格式轉換為WebP。今天我們将把這個 YellowFlower.JPG 文件轉換成一個 YellowFlower.webp 文件,并在沒有太大質量損失的情況下,縮減文件大小的三分之一。

下面這張是原始圖片。分辨率600×400,格式JPEG,文件大小90KB。

web開發前端知識(3分鐘閱讀webp畫質感人)1

WebP

WebP是一種圖像格式,創建于2010年,目前正在由Google開發。WebP既可以處理無損圖像格式,也可以處理有損圖像格式,如PNG和JPEG。

WebP無損圖像文件比PNG小26%,有損變體可以比JPEG小25%到34%。

ImageMagick 與 cwebp

ImageMagick是當今業界廣泛用于圖像格式化的CLI工具。今天,我們将使用ImageMagick和cwebp工具将任何圖像轉換為WebP文件。

下載并安裝ImageMagick

Macports是在OSX上安裝ImageMagick的最簡單方式。

sudo port install ImageMagick

port命令下載ImageMagick及其許多委托庫(例如JPEG、PNG、Freetype等)。并自動配置、構建和安裝ImageMagick。

但是它沒有附帶WebP庫,所以默認情況下ImageMagick不知道如何處理WebP格式。

這就是cwebp派上用場的地方。

下載并安裝cwebp

我們必須首先安裝libwebp庫才能使用cwebp編碼器工具。libwebp庫提供WebP編碼(Cwebp)和解碼(Dwebp)工具。

  1. 從libwebp存儲庫下載libwebp-0.6.0.tar.gz。
  2. 解壓,将創建一個名為libwebp-0.6.0/的目錄:tar xvzf libwebp-0.6.0.tar.gz。
  3. cd libwebp-0.6.0/ 并以此執行以下指令:

./configure make sudo make install

這将構建cwebp和dwebp命令行工具。

既然我們已經具備了所有的前提條件,現在就可以将圖片轉換為WebP了。

JPEG 到 WebP

我們的 YellowFlower.jpg 的圖像分辨率為600x400,文件大小為90KB。讓我們看看當我們使用無損圖像壓縮将圖像轉換為WebP時會發生什麼。

convert YellowFlower.jpg YellowFlower--WebP.webp

web開發前端知識(3分鐘閱讀webp畫質感人)2

WebP在降低圖像質量方面也做得很好。

通過将我們的圖像轉換為WebP并将質量降低50%,我們可以節省更多的文件大小,而不會有很大的質量損失。

web開發前端知識(3分鐘閱讀webp畫質感人)3

當我們将JPEG轉換為WebP時,圖像質量會有很小但明顯的下降,而當我們使用50%質量壓縮時,圖像質量會有更顯著的變化。

決定是否轉換為WebP完全取決于你的設計方向。如果優先考慮保持最佳圖像質量,那麼使用舊的JPEG格式很不錯。

但是,如果并不極緻追求圖像質量,并且想要壓縮三分之一的文件大小,那麼簡單地将圖像轉換為WebP是你的最佳選擇。

寫在最後

在使用ImageMagick和cwebp将圖像轉換為WebP時,使用高質量壓縮(-quality)可更好。同時在HTML頁面内使用 JPG 格式圖片備用,以防浏覽器不支持 WebP 格式。

Happy coding :_)

我是 @科技小助手 ,持續分享編程知識,歡迎關注。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
泰安市第二十一屆全民健身運動會
泰安市第二十一屆全民健身運動會
大衆網·海報新聞見習記者郭辰靖東營報道為進一步加強團隊建設、促進溝通交流、凝聚“創新實幹、事争一流”的強大合力,5月14日,在東營區總工會的大力支持下,東營區辛店街道舉辦“勠力同‘辛’,‘店’定輝煌”2022年職工趣味運動會。來自機關和村居...
2025-03-24
普羅旺斯代表什麼意思
普羅旺斯代表什麼意思
普羅旺斯代表什麼意思?普羅旺斯,浪漫之城——如果有人說普羅旺斯是徹底的浪漫,大概也不過分,因為這裡除了很久流傳的浪漫愛情傳奇,還有因《馬賽曲》而聞名的馬賽,因《基督山伯爵》而為衆人皆知的依夫島,還有儒雅的大學城艾克斯和阿維尼翁,回味久遠的中...
2025-03-24
19讀作什麼
19讀作什麼
19讀作什麼?19讀作一十九讀數法(readingmethodofnumber)是算術的基本概念之一,指口頭讀出數的命名的方法,我來為大家講解一下關于19讀作什麼?跟着小編一起來看一看吧!19讀作什麼19讀作一十九。讀數法(readingm...
2025-03-24
大數據與社會治理
大數據與社會治理
YEF2022将于2022年6月9-11日舉行,專題論壇“社會認知計算:虛實融合時代社會治理的新視角”将邀請來自學術界和企業界的專家大咖,聚焦社會認知計算的技術趨勢,探讨社交新媒體時代的社會認知新形态和社會治理策略,為我國社會治理現代化提供...
2025-03-24
陳明昊小時候個人資料
陳明昊小時候個人資料
在剛剛結束的烏鎮戲劇節中,一出“紅眼戲劇”《從清晨到午夜》引發了戲劇界的巨大争議和讨論。演出時長近6小時,從淩晨1:30到早上7點多。腦洞大開的場景設計、沖擊力極強的音樂舞美、突破人類極限的觀看時間,對觀衆們既是一種折磨,又是一種前所未有的...
2025-03-24
Copyright 2023-2025 - www.tftnews.com All Rights Reserved