我最喜欢的用于优化网页图片的 Linux 命令

生成缩略图和网页横幅的调整大小和优化后的图片。

Digital creative of a browser on the internet

过去，我在网上工作时总是尽量避免处理图片。处理和优化图片既不精确又耗时。

后来我找到了一些改变我想法的命令。我使用 Jekyll 创建网页，因此我在说明中包含了它。但是，这些命令也适用于其他静态站点生成器。

Linux 上的图像命令

对我来说，起关键作用的命令是 optipng、jpegoptim，当然还有久负盛名的 imagemagick。它们一起使得图像处理变得容易管理甚至可以自动化。

以下是我如何使用这些命令实现我的解决方案的概述。我将文章图片放在我的 static/images 文件夹中。从那里，我生成了所有 PNG 和 JPG 图片的两个副本

一个尺寸为 422 x 316 的裁剪缩略图版本
一个尺寸为 1024 x 768 的更大的横幅版本

然后，我将每个副本（缩略图和横幅）放入其自己的文件夹中，并且我利用了 Jekyll 的自定义变量来设置文件夹路径。我在下面更详细地概述了每个步骤。

安装

要按照我的解决方案进行操作，请确保您已安装所有命令。在 Linux 上，您可以使用您的包管理器安装 optipng、jpegoptim 和 imagemagick。

在 Fedora、CentOS、Mageia 和类似系统上

$ sudo dnf install optipng jpegoptim imagemagick

在 Debian、Elementary、Mint 和类似系统上

$ sudo apt install optipng jpegoptim imagemagick

在 macOS 上，使用 MacPorts 或 Homebrew。

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/

处理缩略图

要调整大小并优化缩略图，我使用了我的三个命令。

我使用 ImageMagick 中的 mogrify 命令来调整 JPG 和 PNG 的大小。因为我希望缩略图为 422 x 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 x 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 %}