enfasten

Enfasten⚡️

通过优化的响应图像自动使您的网站更快地使您的网站

Enfasten是用GO编写的工具，它可以使用静态站点，将图像缩放到多种尺寸，然后重写所有HTML以使用带有srcset属性的响应式图像标签。它还可以通过像ImageOptim这样的优化器运行所有图像。这使您的静态站点更快地供人们加载，因为他们的浏览器可以为屏幕尺寸和分辨率加载最佳图像，并且与较旧的浏览器兼容。

即使它们节省了大量的带宽，很少有站点使用优化的响应式图像，因为它需要创建一个自定义的图像处理管道，以实现良好的性能。 Enfasten通过为您做所有事情来解决此问题！

我之所以写这篇文章，是因为在我的网站上，我经常包含荒谬尺寸的图像，例如高DPI显示器中的2146x1258屏幕截图。用户的浏览器下载了此巨大的图像，并立即将其调整为适合我的660px宽博客。当没有高DPI显示的人访问我的网站时，这尤其糟糕，但是我仍然希望在高DPI显示器上看起来不错。我并不总是记得优化图像的事实使这种浪费变得更糟。

使用Enfasten，无论您使用哪种静态站点生成器，都可以在部署前通过Enfasten运行网站并获得免费的带宽节省！

特征

Enfasten具有许多功能，需要很长时间才能复制您自己设置的脚本或大量任务：

• 增量：Enfasten只会花费时间加载，调整和优化新图像。使用优化器时，这一点尤其重要，因为优化可能需要很长时间。每次建造时，都需要一个小时来优化我所有网站的图像。
• 缓存友好型重命名：Enfasten将把所有图像都放在一个文件夹中，并在其名称中添加哈希，以便您可以告诉您的CDN/浏览器无限期地缓存它们而不会无效问题。
• 快速：它不是荒谬的优化，但是没有新图像的我的网站的构建为0.36s ，此外，它仅在必要时处理新图像并使用快速的resizer。
• culling ：有时PNG优化器可能会导致尺寸较大的图像，其文件大小比具有较小尺寸的文件大小较小，因为压缩方式与调整滤波器相互作用。 ENFASTEN具有特殊的模式来检测这些模式并剔除效率低下的缩小图像。
• 仅在值得的时候进行调整大小：如果您的图像为1345px宽，并且告诉Enfasten制作一个1320px宽的版本，则默认情况下，它不会打扰。如果需要，您可以配置“足够接近”的阈值。对于.jpg文件，该阈值是分开的，因为调整JPEG文件的大小通常会因重新编码而带有质量命中，因此，大小的小变化确实不值得。
• 唯一的缩小：与更简单的脚本可以做什么不同，Enfasten实际上检查了您想要的宽度的图像的大小，并且只能向下调整图像。如果您的尺寸列表中没有较小的尺寸，那么Enfasten甚至不会在图像标签中添加srcset属性。
• 正确复制：将文件从输入文件夹复制和将文件转换为输出文件夹时，Enfasten将确保在输出文件夹中删除不再存在的输出文件夹中的文件。
• 保留原始内容：您的原件被复制，哈希，无损优化，并在SRCSET属性中提供，因为为什么不这样做。这还可以避免避免小规模和仅缩小尺寸的功能。
• 黑名单：我在网站上有一个有关特殊制作的PNG文件的帖子，我可以告诉Enfasten不要弄乱这些文件并破坏效果。
• 甚至重写相对img src属性。
• 支持png和jpg文件，其他所有内容都是单独的。
• 与任何静态站点生成器一起使用！

例子

以下是Enfasten的输入和输出的示例。基本上，它将您的整个站点从输入转换为输出文件夹，并在图像中添加带有图像的图像版本的图像文件夹。然后，它重写了所有HTML以引用这些。目前，如果原始图像被RS，脚本，CSS等引用，则仍会复制它们。

示例输入和输出目录层次结构

 test
├── _fastsite
...
│  ├── archive.html
│  ├── assets
│  │  ├── images
│  │  │  ├── 1-bing-4da5feb8-original.png
│  │  │  ├── 1-ddg-eb1bf143-original.png
│  │  │  ├── 1-google-6efffef5-original.png
│  │  │  ├── 1-samuru-93e3f1fc-660px.png
│  │  │  ├── 1-samuru-93e3f1fc-original.png
│  │  │  ├── 2-bing-078cbd23-original.png
│  │  │  ├── 2-ddg-68249286-original.png
│  │  │  ├── 2-google-c8456412-original.png
│  │  │  ├── 2-samuru-c6b17722-660px.png
│  │  │  ├── 2-samuru-c6b17722-original.png
│  │  │  ├── 3-google-caf9e182-original.png
│  │  │  ├── Beowulf-f3168a7d-660px.png
│  │  │  ├── Beowulf-f3168a7d-1320px.png
│  │  │  ├── Beowulf-f3168a7d-original.png
│  │  │  ├── canus-loot-6549ac19-original.jpg
│  │  │  ├── case-6b5e62c5-original.jpg
...
│  │  ├── postassets
...
│  │  │  ├── hackEnglish
│  │  │  │  ├── Beowulf.png
│  │  │  │  ├── Colours-of-Gatsby.png
│  │  │  │  ├── lotf-1.png
│  │  │  │  ├── lotf-2.png
│  │  │  │  └── markov-poster.png
...
│  │  │  ├── keyboardhw
│  │  │  │  ├── canus-loot.jpg
│  │  │  │  ├── case.jpg
...
│  │  │  ├── search
│  │  │  │  ├── 1-bing.png
│  │  │  │  ├── 1-ddg.png
│  │  │  │  ├── 1-google.png
│  │  │  │  ├── 1-samuru.png
│  │  │  │  ├── 2-bing.png
│  │  │  │  ├── 2-ddg.png
│  │  │  │  ├── 2-google.png
│  │  │  │  ├── 2-samuru.png
│  │  │  │  └── 3-google.png
...
├── _site
...
│  ├── archive.html
│  ├── assets
│  │  ├── postassets
...
│  │  │  ├── hackEnglish
│  │  │  │  ├── Beowulf.png
│  │  │  │  ├── Colours-of-Gatsby.png
│  │  │  │  ├── lotf-1.png
│  │  │  │  ├── lotf-2.png
│  │  │  │  └── markov-poster.png
...
│  │  │  ├── keyboardhw
│  │  │  │  ├── canus-loot.jpg
│  │  │  │  ├── case.jpg
...
│  │  │  ├── search
│  │  │  │  ├── 1-bing.png
│  │  │  │  ├── 1-ddg.png
│  │  │  │  ├── 1-google.png
│  │  │  │  ├── 1-samuru.png
│  │  │  │  ├── 2-bing.png
│  │  │  │  ├── 2-ddg.png
│  │  │  │  ├── 2-google.png
│  │  │  │  ├── 2-samuru.png
│  │  │  │  └── 3-google.png
...
├── enfasten.yml
└── enfasten_manifest.yml

入门

在发行页面上，您可以下载用于MacOS和Linux的预构建的静态二进制文件，您可以将其放在PATH中的某个地方。

如果您已经安装了，则应该能够运行：

$ go get github.com/trishume/enfasten

然后确保您的GO bin文件夹在您的PATH中。另外，请克隆回购并进行go get ，然后go install 。

安装ENFASTEN后，在静态站点的目录中创建一个enfasten.yml配置文件（有关示例，请参见下面的“配置”部分），然后运行：

 # Looks for an enfasten.yml file in the current directory
$ enfasten
# Looks for an enfasten.yml in the specified directory
$ enfasten -basepath my/site/folder
# Runs with culling, only do this once all your images are optimized
$ enfasten -cull

配置

Enfasten是通过enfasten.yml文件配置的。所有密钥都是可选的，这是jekyll网站的一个很好的基本配置文件，该文件是一个静态的660px宽：

 # Jekyll by default outputs to _site, we'll put our result in _fastsite
inputfolder : _site
outputfolder : _fastsite
sizesattr : 660px
# Normal and retina resolutions:
widths : [660,1320]
# ImagOptim is a great optimizer for macOS, here's how to connect it:
optimcommand : ['open', '-a', 'ImageOptim']
# Sometimes there's files we don't want to bother processing and rewriting
blacklist :
  - favicon.png

这是配置选项的完整板岩，默认值和他们所做的内容的文档：

 # The folder to take files and images from, relative to enfasten.yml
inputfolder : _site
# The folder to put output in, relative to enfasten.yml
outputfolder : _fastsite
# The folder to put all images in, relative to outputfolder
imagefolder : assets/images
# The file name for the manifest, relative to enfasten.yml If this is set to the
# empty string, no manifest will be used.
manifestfile : enfasten_manifest.yml
# The contents of the "sizes" attribute for responsive image tags, if this is
# the empty string the attribute will be omitted.
sizesattr : " "
# An array of strings specifying a command and arguments to run to optimize
# images. If non-null, Enfasten will append all the files needing optimization to
# this, run it and wait for it to finish.
optimcommand : null
# Whether to copy/transform non-image files into the output. Set this to false if
# you're only using Enfasten as an image resizing tool and parsing the generated
# manifest with your own script.
docopy : true
# The threshold of scaling above which Enfasten won't bother. In this case if the
# destination width is greater than 0.9 times the source width, that size won't be
# created.
scalethreshold : 0.9
# Same as above, but for .jpg files. Separate because re-encoding is bad.
jpgscalethreshold : 0.7
# The quality with which to re-encode JPG files, higher is larger but less lossy.
jpgquality : 90
# The array of widths to which Enfasten will try and downscale each image
widths : []
# An array of Go file glob patterns relative to inputfolder of files not to process
blacklist : []

注意：更改影响图像处理（例如widths ， jpgquality和scalethreshold的选项时，您可能需要删除清单文件，并可能还删除处理后的图像本身。如果您不这样做，则不会重新处理旧图像，并且会像以前一样保留，如果您这样做，Enfasten将重建任何丢失的图像。

清单

ENFASTEN可以输出一个enfasten_manifest.yml文件，该文件描述了其已知和已构建的所有图像。您可以删除此文件，并且在大多数情况下，Enfasten会做完全相同的事情，但否则会做较慢。清单提供了以下好处：

• 制作构建更快：没有明显的情况，Enfasten必须加载您的所有图像文件，解析它们以找出大小，然后意识到已经有这样的图像并跳过它。这在我的网站上大约需要1.3s 。有了清单，Enfasten只需加载文件并放置文件，这在我的网站上只需大约0.3 s。
• 启用culling ：culling是一项功能，其中Enfasten可以检测具有较大文件尺寸的较小尺寸图像并删除它们。没有清单，它就不记得它这样做了，因此，如果您尝试使用扣除，它将立即重新生成并再次优化这些图像。
• 自己解析：如果您愿意，也可以自己解析此文件并在自己的构建步骤中使用它。在Enfasten的配置文件中，甚至还有一个选项可以不执行该过程的复制和转换阶段，以便您可以将ENFASTEN仅作为其优化和调整大小，并自己进行重写。这使您可以将Enfasten与动态的Web应用程序一起使用。

路线图

这是一个周末项目，我还没有做些事情。如果您想查看这些功能，我欢迎捐款！

• 选项不从原始位置复制文件。如果您的网站并将黑名单设置为正确的额外文件，则只需膨胀输出即可。
• 更好的错误消息。现在，我只是在到处乱逛。
• 更多的带宽优化，以使您的网站更快：
  • HTML最小化
  • CSS最小化
  • JS最小化
  • SVG优化
• 生成服务人员，并将他们设置为预加载和缓存的东西，以提高速度！

这个名字从哪里来？

这听起来像是一个词，这意味着“快速”。听起来也像Emscripten，这是使网络快速制作的另一个项目，尽管以完全不同且无关的方式。在我的脑海中，我在将其发音为“ en-fast-en”和“ en-fassen”之间交替。我还用谷歌搜索了它，看起来它并没有与任何太重要的东西相撞。

执照

该项目是根据Apache许可发布的，由Tristan Hume撰写