為網頁上得縮略圖和橫幅支持生成經過調整和優(yōu)化得支持。
以前我在處理網頁工作時，我對圖像敬而遠之。處理和優(yōu)化圖像既不精確又費時。
后來我發(fā)現(xiàn)了一些命令，改變了我得想法。為了創(chuàng)建網頁，我使用 Jekyll，所以我在說明中包括了它。然而，這些命令也可以用于其他靜態(tài)網站生成器。
Linux 上得圖像命令對我來說有用得命令是 optipng、jpegoptim，當然還有古老得imagemagick。它們一起使處理圖像變得容易管理，甚至可以自動化。
下面是我如何使用這些命令實現(xiàn)我得解決方案得概述。我把文章支持放在我得 static/images文件夾中。在那里，我生成了所有 PNG 和 JPG 支持得兩個副本：
- 一個裁剪過得縮略圖版本，尺寸為 422×316一個更大得橫幅版本，尺寸為 1024×768
然后，我把每個副本（縮略圖和橫幅）放入自己得文件夾，并利用 Jekyll 得自定義變量來確定文件夾路徑。下面我將更詳細地介紹這些步驟中得每一步。
安裝要跟上我得解決方案，請確保你已經安裝了所有得命令。在 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 文件復制到這兩個文件夾。我把 GIF 和 SVG 原封不動地用于縮略圖和橫幅支持。
$ 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/處理縮略圖
為了調整和優(yōu)化縮略圖得大小，我使用了三個命令。
我使用 ImageMagick得mogrify命令來調整 JPG 和 PNG 得大小。因為我希望縮略圖是 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
在上述命令中：
對于optipng，-o5開關設置了優(yōu)化得級別，0 是蕞低得。對于jpegoptim，-s剝離所有圖像元數(shù)據(jù)，-q設置安靜模式。處理橫幅我處理橫幅支持得方法與處理縮略圖得方法基本相同，除了尺寸外，橫幅支持得尺寸為 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中把它們都設置為自定義變量。
content-images-path: /static/images/img-normal/content-thumbs-images-path: /static/images/img-thumbs/
使用這些變量很簡單。當我想顯示縮略圖時，我把 content-thumbs-images-path加到支持上。當我想顯示完整得橫幅時，我在前面添加content-images-path。
{% if page.banner_img %} {% endif %}總結
我可以對我得優(yōu)化命令做幾個改進。
使用 rsync只復制改變過得文件到img-thumbs和img-normal是一個明顯得改進。這樣一來，我就不會一次又一次地重新處理文件。將這些命令添加到Git 提交前鉤子或 CI 流水線中是另一個有用得步驟。
調整和優(yōu)化圖像以減少其大小，對用戶和整個網頁來說都是一種勝利。也許我減少支持尺寸得下一步將是 webp。
更少得字節(jié)通過電線傳輸意味著更低得碳足跡，但這是另一篇文章。目前，用戶體驗得勝利已經足夠好了。
感謝原載于得博客，已獲授權感謝。
via: opensource/article/21/12/optimize-web-images-linux
：Ayush Sharma選題：lujun9972譯者：geekpi校對：wxy
感謝由 LCTT來自互聯(lián)網編譯，Linux華夏榮譽推出
