以前在Web上工作时，我对图像敬而远之。处理和优化图像是不精确且耗时的。然后我发现了一些改变我想法的命令。为了创建网页，我使用Jekyll，所以我将其包含在说明中。但是，这些命令也可以与其他静态站点生成器一起使用。Linux上的图像命令对我有用的是optipng、jpegoptim，当然还有古老的imagemagick。它们共同使处理图像变得易于管理，甚至自动化。下面是我如何使用这些命令实现我的解决方案的概述。我将文章图片放在我的static/images文件夹中。在那里，我生成了所有PNG和JPG图像的两个副本：422×316的裁剪缩略图版本和1024×768的较大横幅版本。缩略图和横幅）放入它们自己的文件夹中，并利用Jekyll的自定义变量来确定文件夹路径。下面我将更详细地描述每个步骤。要遵循我的解决方案，请确保已安装所有命令。在Linux上，您可以使用包管理器安装optipng、jpegoptim和imagemagick。在Fedora、CentOS、Mageia和类似软件上：$sudodninstalloptipngjpegoptimimagemagick在Debian、Elementary、Mint和类似软件上：$sudoaptinstalloptipngjpegoptimimagemagick在macOS上，使用MacPorts或Homebrew：brewinstalloptipngjpegoptimimagemagick在Windows上，使用Chocolatey。为缩略图和横幅创建文件夹安装这些命令后，我在static/images下创建了新文件夹。生成的缩略图放在img-thumbs中，横幅放在img-normal中。创建$cdstatic/images$mkdir-pimg-thumbsimg-normal文件夹后，我将所有GIF、SVG、JPG和PNG文件复制到这两个文件夹中。我按原样使用GIF和SVG作为缩略图和横幅图像。$cpcontent/*.gifimg-thumbs/;cpcontent/*.gifimg-normal/$cpcontent/*.svgimg-thumbs/;cpcontent/*.svgimg-normal/$cpcontent/*.jpgimg-thumbs/;cpcontent/*。jpgimg-正常/$cpcontent/*.pngimg-thumbs/;cpcontent/*.pngimg-normal/处理缩略图为了调整和优化缩略图，我使用了三个命令。我使用ImageMagick的mogrify命令来调整JPG和PNG的大小。由于我希望缩略图为422x316，命令如下所示：$cdimg-thumbs$mogrify-resize422x316*.png$mogrify-formatjpg-resize422x316*.jpg现在我使用optipng优化PNG，使用jpegoptim优化JPG：$foriin*。png;dooptipng-o5-quiet"$i";done$jpegoptim-sq*.jpg在上面的命令中：对于optipng，-o5开关设置优化级别，0为最低。对于jpegoptim，-s去除所有图像元数据，-q设置安静模式。处理横幅我处理横幅图像的方式与处理缩略图的方式大致相同，只是大小不同，它是1024×768。$cd..$cdimg-normal$mogrify-resize1024x768*.png$mogrify-formatjpg-resize1024x768*.jpg$foriin*.png;dooptipng-o5-quiet"$i";done$jpegoptim-sq*.jpg配置Jekyllimg-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添加到图像。当我想显示完整的横幅时，我会在前面加上内容图像路径。{%ifpage.banner_img%}
