伪原创在线*敏*感*词*(Linux上的图像命令对我来说有用的命令)

　　伪原创在线*敏*感*词*(Linux上的图像命令对我来说有用的命令)

　　为网页上的缩略图和横幅图像生成调整和优化的图像。

　　

　　过去，当我在处理网页时，我远离图像。处理和优化图像是不精确且耗时的。

　　后来我发现一些命令改变了我的想法。为了创建网页，我使用 Jekyll，所以我将它收录在说明中。但是，这些命令也可以与其他静态 网站 *敏*感*词*一起使用。

　　Linux 上的图像命令

　　对我有用的命令是 optipng、jpegoptim，当然还有古老的 imagemagick。它们共同使图像处理变得可管理甚至自动化。

　　下面是我如何使用这些命令实现我的解决方案的概述。我把 文章 图像放在我的静态/图像文件夹中。在那里，我生成了所有 PNG 和 JPG 图像的两个副本：

　　422×316 的裁剪缩略图版本 1024×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 的大小。由于我希望缩略图为 422x316，因此命令如下所示：

　　$ 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

　　在上面的命令中：

　　处理横幅

　　我处理横幅图像的方式与缩略图图像基本相同，只是大小为 1024x768。

　　$ 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 %}

{% endif %}

　　总结

　　我可以对我的优化命令进行一些改进。

　　使用 rsync 仅将更改的文件复制到 img-thumbs 和 img-normal 是一个明显的改进。这样我就不必一次又一次地重新处理文件。将这些命令添加到 Git 预提交挂钩或 CI 管道是另一个有用的步骤。

　　调整和优化图像以减小它们的大小对用户和整个网页都是一种胜利。也许我减少图像大小的下一步将是 webp。

　　通过网络传输的字节数越少，碳足迹就越低，但这是另一篇文章 文章。目前，UX 的胜利已经足够了。

　　本文首发于作者博客，经授权转载。

　　通过：

　　作者：Ayush Sharma 主题：lujun9972 译者：geekpi 校对：wxy

　　本文由LCTT原创编译，Linux中国荣幸推出