导读：为网页上的缩略图和横幅图片生成经过调整和优化的图片。
本文字数：3093，阅读时长大约：4分钟
https://linux.cn/article-14096-1.html
作者：Ayush Sharma
译者：geekpi
以前我在处理网页工作时，我对图像敬而远之。处理和优化图像既不精确又费时。
后来我发现了一些命令，改变了我的想法。为了创建网页，我使用 Jekyll，所以我在说明中包括了它。然而，这些命令也可以用于其他静态网站生成器。
Linux 上的图像命令
对我来说有用的命令是 、，当然还有古老的 。它们一起使处理图像变得容易管理，甚至可以自动化。
下面是我如何使用这些命令实现我的解决方案的概述。我把文章图片放在我的 文件夹中。在那里，我生成了所有 PNG 和 JPG 图片的两个副本：
1. 一个裁剪过的缩略图版本，尺寸为 422×316
2. 一个更大的横幅版本，尺寸为 1024×768
然后，我把每个副本（缩略图和横幅）放入自己的文件夹，并利用 Jekyll 的自定义变量来确定文件夹路径。下面我将更详细地介绍这些步骤中的每一步。
安装
要跟上我的解决方案，请确保你已经安装了所有的命令。在 Linux 上，你可以使用软件包管理器安装 、 和 。
在 Fedora、CentOS、Mageia 和类似系统上：
在 Debian、Elementary、Mint 和类似系统上：
在 macOS 上，使用MacPortsopensource.com或Homebrewopensource.com：
在 Windows 上，使用Chocolateyopensource.com。
为缩略图和横幅创建文件夹
安装完这些命令后，我在 下创建了新的文件夹。生成的缩略图放在 ，横幅放在 。
创建了文件夹后，我把所有的 GIF、SVG、JPG 和 PNG 文件复制到这两个文件夹。我把 GIF 和 SVG 原封不动地用于缩略图和横幅图片。
处理缩略图
为了调整和优化缩略图的大小，我使用了三个命令。
我使用 的 命令来调整 JPG 和 PNG 的大小。因为我希望缩略图是 422×316，所以命令看起来像这样:
现在我用 优化 PNG，用 优化 JPG：
在上述命令中：
? 对于 ， 开关设置了优化的级别，0 是最低的。
? 对于， 剥离所有图像元数据， 设置安静模式。
处理横幅
我处理横幅图片的方法与处理缩略图的方法基本相同，除了尺寸外，横幅图片的尺寸为 1024×768。
配置 Jekyll 中的路径
目录现在包含我的缩略图， 包含横幅。为了更轻松一些，我在Jekyll的 中把它们都设置为自定义变量。
使用这些变量很简单。当我想显示缩略图时，我把 加到图片上。当我想显示完整的横幅时，我在前面添加 。
总结
我可以对我的优化命令做几个改进。
使用 只复制改变过的文件到 和 是一个明显的改进。这样一来，我就不会一次又一次地重新处理文件。将这些命令添加到Git 提交前钩子opensource.com或 CI 流水线中是另一个有用的步骤。
调整和优化图像以减少其大小，对用户和整个网页来说都是一种胜利。也许我减少图片尺寸的下一步将是webpopensource.com。
更少的字节通过电线传输意味着更低的碳足迹，但这是另一篇文章。目前，用户体验的胜利已经足够好了。
本文原载于作者的博客www.ayushsharma.in，已获授权转载。
via:https://opensource.com/article/21/12/optimize-web-images-linux
作者：Ayush Sharma选题：lujun9972译者：geekpi校对：wxy
本文由LCTT原创编译，Linux中国荣誉推出
欢迎遵照 CC-BY-NC-SA 协议规定转载，
如需转载，请在文章下留言 “转载：公众号名称”，
我们将为您添加白名单，授权“转载文章时可以修改”。