Linux中國

用 Linux 命令優化網頁圖片

以前我在處理網頁工作時,我對圖像敬而遠之。處理和優化圖像既不精確又費時。

後來我發現了一些命令,改變了我的想法。為了創建網頁,我使用 Jekyll,所以我在說明中包括了它。然而,這些命令也可以用於其他靜態網站生成器。

Linux 上的圖像命令

對我來說有用的命令是 optipngjpegoptim,當然還有古老的 imagemagick。它們一起使處理圖像變得容易管理,甚至可以自動化。

下面是我如何使用這些命令實現我的解決方案的概述。我把文章圖片放在我的 static/images 文件夾中。在那裡,我生成了所有 PNG 和 JPG 圖片的兩個副本:

  1. 一個裁剪過的縮略圖版本,尺寸為 422×316
  2. 一個更大的橫幅版本,尺寸為 1024×768

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

安裝

要跟上我的解決方案,請確保你已經安裝了所有的命令。在 Linux 上,你可以使用軟體包管理器安裝 optipngjpegoptimimagemagick

在 Fedora、CentOS、Mageia 和類似系統上:

$ sudo dnf install optipng jpegoptim imagemagick

在 Debian、Elementary、Mint 和類似系統上:

$ sudo apt install optipng jpegoptim imagemagick

在 macOS 上,使用 MacPortsHomebrew

brew install optipng jpegoptim imagemagick

在 Windows 上,使用 Chocolatey

為縮略圖和橫幅創建文件夾

安裝完這些命令後,我在 static/images 下創建了新的文件夾。生成的縮略圖放在 img-thumbs,橫幅放在 img-normal

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

創建了文件夾後,我把所有的 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/

處理縮略圖

為了調整和優化縮略圖的大小,我使用了三個命令。

我使用 ImageMagickmogrify 命令來調整 JPG 和 PNG 的大小。因為我希望縮略圖是 422×316,所以命令看起來像這樣:

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

現在我用 optipng 優化 PNG,用 jpegoptim 優化 JPG:

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

在上述命令中:

  • 對於 optipng-o5 開關設置了優化的級別,0 是最低的。
  • 對於jpegoptim-s 剝離所有圖像元數據,-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 目錄現在包含我的縮略圖,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 %}
 <img src="{{ page.banner_img | prepend: site.content-images-path | 
prepend: site.baseurl | prepend: site.url }}" alt="Banner image for 
{{ page.title }}" />
{% endif %}

總結

我可以對我的優化命令做幾個改進。

使用 rsync 只複製改變過的文件到 img-thumbsimg-normal 是一個明顯的改進。這樣一來,我就不會一次又一次地重新處理文件。將這些命令添加到 Git 提交前鉤子 或 CI 流水線中是另一個有用的步驟。

調整和優化圖像以減少其大小,對用戶和整個網頁來說都是一種勝利。也許我減少圖片尺寸的下一步將是 webp

更少的位元組通過電線傳輸意味著更低的碳足跡,但這是另一篇文章。目前,用戶體驗的勝利已經足夠好了。

本文原載於作者的博客,已獲授權轉載。

via: https://opensource.com/article/21/12/optimize-web-images-linux

作者:Ayush Sharma 選題:lujun9972 譯者:geekpi 校對:wxy

本文由 LCTT 原創編譯,Linux中國 榮譽推出


本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive

對這篇文章感覺如何?

太棒了
0
不錯
0
愛死了
0
不太好
0
感覺很糟
0
雨落清風。心向陽

    You may also like

    Leave a reply

    您的電子郵箱地址不會被公開。 必填項已用 * 標註

    此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據

    More in:Linux中國