用 Linux 命令优化网页图片

二思兄 發表於 2024-2-9 00:00:00

以前我在处理网页工作时，我对图像敬而远之。处理和优化图像既不精确又费时。

后来我发现了一些命令，改变了我的想法。为了创建网页，我使用 Jekyll，所以我在说明中包括了它。然而，这些命令也可以用于其他静态网站生成器。

<img title="用 Linux 命令优化网页图片" alt="用 Linux 命令优化网页图片" border="0" height="auto" src="https://zhuji.jb51.net/uploads/img/202305/2d1b6086aa866e0db811397cb92a52aa.jpg" width="auto">
<h3>
Linux 上的图像命令</h3>

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

下面是我如何使用这些命令实现我的解决方案的概述。我把文章图片放在我的 static/images 文件夹中。在那里，我生成了所有 PNG 和 JPG 图片的两个副本：
<ul>
<li>
一个裁剪过的缩略图版本，尺寸为 422×316</li>
<li>
一个更大的横幅版本，尺寸为 1024×768</li>
</ul>

然后，我把每个副本(缩略图和横幅)放入自己的文件夹，并利用 Jekyll 的自定义变量来确定文件夹路径。下面我将更详细地介绍这些步骤中的每一步。
<h3>
安装</h3>

要跟上我的解决方案，请确保你已经安装了所有的命令。在 Linux 上，你可以使用软件包管理器安装 optipng、jpegoptim 和 imagemagick。

在 Fedora、CentOS、Mageia 和类似系统上：
<ol class="dp-xml">
<li class="alt">
$ sudo dnf install optipng jpegoptim imagemagick 
</li>
</ol>

在 Debian、Elementary、Mint 和类似系统上：
<ol class="dp-xml">
<li class="alt">
$ sudo apt install optipng jpegoptim imagemagick 
</li>
</ol>

在 macOS 上，使用 MacPorts 或 Homebrew：
<ol class="dp-xml">
<li class="alt">
brew install optipng jpegoptim imagemagick 
</li>
</ol>

在 Windows 上，使用 Chocolatey。
<h3>
为缩略图和横幅创建文件夹</h3>

安装完这些命令后，我在 static/images 下创建了新的文件夹。生成的缩略图放在 img-thumbs，横幅放在 img-normal。
<ol class="dp-xml">
<li class="alt">
$ cd static/images 
</li>
<li>
$ mkdir -p img-thumbs img-normal 
</li>
</ol>

创建了文件夹后，我把所有的 GIF、SVG、JPG 和 PNG 文件复制到这两个文件夹。我把 GIF 和 SVG 原封不动地用于缩略图和横幅图片。
<ol class="dp-xml">
<li class="alt">
$ cp content/*.gif img-thumbs/; cp content/*.gif img-normal/ 
</li>
<li>
$ cp content/*.svg img-thumbs/; cp content/*.svg img-normal/ 
</li>
<li class="alt">
$ cp content/*.jpg img-thumbs/; cp content/*.jpg img-normal/ 
</li>
<li>
$ cp content/*.png img-thumbs/; cp content/*.png img-normal/ 
</li>
</ol>
<h3>
处理缩略图</h3>

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

我使用 ImageMagick 的 mogrify 命令来调整 JPG 和 PNG 的大小。因为我希望缩略图是 422×316，所以命令看起来像这样：
<ol class="dp-xml">
<li class="alt">
$ cd img-thumbs 
</li>
<li>
$ mogrify -resize 422x316 *.png 
</li>
<li class="alt">
$ mogrify -format jpg -resize 422x316 *.jpg 
</li>
</ol>

现在我用 optipng 优化 PNG，用 jpegoptim 优化 JPG：
<ol class="dp-xml">
<li class="alt">
$ for i in *.png; do optipng -o5 -quiet "$i"; done 
</li>
<li>
$ jpegoptim -sq *.jpg 
</li>
</ol>

在上述命令中：
<ul>
<li>
对于 optipng，-o5 开关设置了优化的级别，0 是最低的。</li>
<li>
对于jpegoptim，-s 剥离所有图像元数据，-q 设置安静模式。</li>
</ul>
<h3>
处理横幅</h3>

我处理横幅图片的方法与处理缩略图的方法基本相同，除了尺寸外，横幅图片的尺寸为 1024×768。
<ol class="dp-xml">
<li class="alt">
$ cd .. 
</li>
<li>
$ cd img-normal 
</li>
<li class="alt">
$ mogrify -resize 1024x768 *.png 
</li>
<li>
$ mogrify -format jpg -resize 1024x768 *.jpg 
</li>
<li class="alt">
$ for i in *.png; do optipng -o5 -quiet "$i"; done 
</li>
<li>
$ jpegoptim -sq *.jpg 
</li>
</ol>
<h3>
配置 Jekyll 中的路径</h3>

img-thumbs 目录现在包含我的缩略图，img-normal 包含横幅。为了更轻松一些，我在Jekyll的 _config.yml 中把它们都设置为自定义变量。
<ol class="dp-xml">
<li class="alt">
content-images-path: /static/images/img-normal/ 
</li>
<li>
content-thumbs-images-path: /static/images/img-thumbs/ 
</li>
</ol>

使用这些变量很简单。当我想显示缩略图时，我把 content-thumbs-images-path 加到图片上。当我想显示完整的横幅时，我在前面添加 content-images-path。
<ol class="dp-xml">
<li class="alt">
{% if page.banner_img %} 
</li>
<li>
 <img src="{{ page.banner_img | prepend: site.content-images-path | \ 
</li>
<li class="alt">
prepend: site.baseurl | prepend: site.url }}" alt="Banner image for \ 
</li>
<li>
{{ page.title }}" /> 
</li>
<li class="alt">
{% endif %} 
</li>
</ol>
<h3>
总结</h3>

我可以对我的优化命令做几个改进。

使用 rsync 只复制改变过的文件到 img-thumbs 和 img-normal 是一个明显的改进。这样一来，我就不会一次又一次地重新处理文件。将这些命令添加到 Git 提交前钩子或 CI 流水线中是另一个有用的步骤。

调整和优化图像以减少其大小，对用户和整个网页来说都是一种胜利。也许我减少图片尺寸的下一步将是 webp。

更少的字节通过电线传输意味着更低的碳足迹，但这是另一篇文章。目前，用户体验的胜利已经足够好了。

原文链接：https://linux.cn/article-14096-1.html

頁: [1]

琼殿技术论坛's Archiver

用 Linux 命令优化网页图片