首页
/
每日頭條
/
生活
/
web開發前端知識
web開發前端知識
更新时间:2025-03-13 15:31:53

引言

使用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
推荐阅读
睡覺感覺腿酸是怎麼回事
睡覺感覺腿酸是怎麼回事
睡覺感覺腿酸是怎麼回事?這種情況是由于有缺鈣的情況.或有風濕類疾病,腎虛的情況造成的.建議查明确病因,對症入藥飲食宜清淡,少吃脂肪,高糖,辛辣,油煎的食品及白酒,咖啡等刺激性飲料,多吃蔬菜,水果,纖維性食物,多喝水注意防寒保暖,不吃寒涼的食...
2025-03-13
新鮮排骨怎麼儲存保鮮
新鮮排骨怎麼儲存保鮮
新鮮排骨怎麼儲存保鮮?冰箱保鮮如果隻想保存一天兩天,那麼建議直接放在冰箱的保鮮層就可以了,應該盡快食用,否則影響口感,我來為大家科普一下關于新鮮排骨怎麼儲存保鮮?下面希望有你要的答案,我們一起來看看吧!新鮮排骨怎麼儲存保鮮冰箱保鮮。如果隻想...
2025-03-13
不可不知的辦公室原則
不可不知的辦公室原則
這是毫無疑問的。世界各地的員工都在拒絕标準、平淡的辦公室,要求一些根本不同的東西。這種團體的強烈反對是響亮而明确的。但解決方案并不那麼明确。公司增加了一些空間,讓人感覺更像家,在情感上更舒适,但在身體上可能會變得不舒服,并且常常缺乏完成工作...
2025-03-13
加熱破壁營養料理機做豆漿的方法
加熱破壁營養料理機做豆漿的方法
炎炎夏日,除了空調,你還有什麼?當然是,冰沙冷飲。好看的杯子,精緻的顔色搭配,少女控都無法拒絕吧。可是,你得為它的顔值掏空腰包。痛不痛?話說,有一個朋友跟我說:每個月它喝奶茶飲料的錢,都足夠我一個月房租了。恐怖!錢包負擔不起啊。怪尴尬的。那...
2025-03-13
樓房頂層可以安裝光伏發電嗎
樓房頂層可以安裝光伏發電嗎
2022年7月22日,在武漢市東西湖區宏圖裡小區樓頂,物業工作人員正在查看太陽能電池闆。據介紹,由香港置地主導開發的武漢夢想特區·宏圖裡小區,4棟31層的住宅建築屋頂上總共鋪設了784塊太陽能電池闆,總面積640平方米,每年可産生能源638...
2025-03-13
Copyright 2023-2025 - www.tftnews.com All Rights Reserved