tft每日頭條

 > 生活

 > web開發前端知識

web開發前端知識

生活 更新时间:2024-11-19 17:22:26

引言

使用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 :_)

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

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved