以前我在處理網(wǎng)頁工作時(shí)，我對(duì)圖像敬而遠(yuǎn)之。處理和優(yōu)化圖像既不精確又費(fèi)時(shí)。

后來我發(fā)現(xiàn)了一些命令，改變了我的想法。為了創(chuàng)建網(wǎng)頁，我使用 Jekyll，所以我在說明中包括了它。然而，這些命令也可以用于其他靜態(tài)網(wǎng)站生成器。

[[441118]]

Linux 上的圖像命令

對(duì)我來說有用的命令是 optipng、jpegoptim，當(dāng)然還有古老的 imagemagick。它們一起使處理圖像變得容易管理，甚至可以自動(dòng)化。

下面是我如何使用這些命令實(shí)現(xiàn)我的解決方案的概述。我把文章圖片放在我的 static/images 文件夾中。在那里，我生成了所有 PNG 和 JPG 圖片的兩個(gè)副本：

• 一個(gè)裁剪過的縮略圖版本，尺寸為 422×316
• 一個(gè)更大的橫幅版本，尺寸為 1024×768

然后，我把每個(gè)副本(縮略圖和橫幅)放入自己的文件夾，并利用 Jekyll 的自定義變量來確定文件夾路徑。下面我將更詳細(xì)地介紹這些步驟中的每一步。

安裝

要跟上我的解決方案，請(qǐng)確保你已經(jīng)安裝了所有的命令。在 Linux 上，你可以使用軟件包管理器安裝 optipng、jpegoptim 和 imagemagick。

在 Fedora、CentOS、Mageia 和類似系統(tǒng)上：

$ sudo dnf install optipng jpegoptim imagemagick 

在 Debian、Elementary、Mint 和類似系統(tǒng)上：

$ sudo apt install optipng jpegoptim imagemagick 

在 macOS 上，使用 MacPorts 或 Homebrew：

brew install optipng jpegoptim imagemagick 

在 Windows 上，使用 Chocolatey。

為縮略圖和橫幅創(chuàng)建文件夾

安裝完這些命令后，我在 static/images 下創(chuàng)建了新的文件夾。生成的縮略圖放在 img-thumbs，橫幅放在 img-normal。

$ cd static/images 
$ mkdir -p img-thumbs img-normal 

創(chuàng)建了文件夾后，我把所有的 GIF、SVG、JPG 和 PNG 文件復(fù)制到這兩個(gè)文件夾。我把 GIF 和 SVG 原封不動(dòng)地用于縮略圖和橫幅圖片。

$ cp content/*.gif img-thumbs/; cp content/*.gif img-normal/ 
$ cp content/*.svg img-thumbs/; cp content/*.svg img-normal/ 
$ cp content/*.jpg img-thumbs/; cp content/*.jpg img-normal/ 
$ cp content/*.png img-thumbs/; cp content/*.png img-normal/ 

處理縮略圖

為了調(diào)整和優(yōu)化縮略圖的大小，我使用了三個(gè)命令。

我使用 ImageMagick 的 mogrify 命令來調(diào)整 JPG 和 PNG 的大小。因?yàn)槲蚁Ｍs略圖是 422×316，所以命令看起來像這樣：

$ cd img-thumbs 
$ mogrify -resize 422x316 *.png 
$ mogrify -format jpg -resize 422x316 *.jpg 

現(xiàn)在我用 optipng 優(yōu)化 PNG，用 jpegoptim 優(yōu)化 JPG：

$ for i in *.png; do optipng -o5 -quiet "$i"; done 
$ jpegoptim -sq *.jpg 

在上述命令中：

• 對(duì)于 optipng，-o5 開關(guān)設(shè)置了優(yōu)化的級(jí)別，0 是最低的。
• 對(duì)于jpegoptim，-s 剝離所有圖像元數(shù)據(jù)，-q 設(shè)置安靜模式。

處理橫幅

我處理橫幅圖片的方法與處理縮略圖的方法基本相同，除了尺寸外，橫幅圖片的尺寸為 1024×768。

$ cd .. 
$ cd img-normal 
$ mogrify -resize 1024x768 *.png 
$ mogrify -format jpg -resize 1024x768 *.jpg 
$ for i in *.png; do optipng -o5 -quiet "$i"; done 
$ jpegoptim -sq *.jpg 

配置 Jekyll 中的路徑

img-thumbs 目錄現(xiàn)在包含我的縮略圖，img-normal 包含橫幅。為了更輕松一些，我在Jekyll的 _config.yml 中把它們都設(shè)置為自定義變量。

content-images-path: /static/images/img-normal/ 
content-thumbs-images-path: /static/images/img-thumbs/ 

使用這些變量很簡單。當(dāng)我想顯示縮略圖時(shí)，我把 content-thumbs-images-path 加到圖片上。當(dāng)我想顯示完整的橫幅時(shí)，我在前面添加 content-images-path。

{% if page.banner_img %} 
 <img src="{{ page.banner_img | prepend: site.content-images-path | \ 
prepend: site.baseurl | prepend: site.url }}" alt="Banner image for \ 
{{ page.title }}" /> 
{% endif %} 

總結(jié)

我可以對(duì)我的優(yōu)化命令做幾個(gè)改進(jìn)。

使用 rsync 只復(fù)制改變過的文件到 img-thumbs 和 img-normal 是一個(gè)明顯的改進(jìn)。這樣一來，我就不會(huì)一次又一次地重新處理文件。將這些命令添加到 Git 提交前鉤子 或 CI 流水線中是另一個(gè)有用的步驟。

調(diào)整和優(yōu)化圖像以減少其大小，對(duì)用戶和整個(gè)網(wǎng)頁來說都是一種勝利。也許我減少圖片尺寸的下一步將是 webp。

更少的字節(jié)通過電線傳輸意味著更低的碳足跡，但這是另一篇文章。目前，用戶體驗(yàn)的勝利已經(jīng)足夠好了。