enfasten

緊固⚡️

透過優化的響應式圖像自動提高您的網站速度

Enfasten 是一個用 Go 編寫的工具，它接收靜態站點，將圖像縮小到多種不同的尺寸，然後重寫所有 HTML 以使用帶有srcset屬性的響應式圖像標籤。它還可以透過 ImageOptim 等優化器運行所有圖像。這使得人們可以更快地加載靜態網站，因為他們的瀏覽器可以加載適合其螢幕尺寸和解析度的最佳圖像，並且它向後相容於舊版瀏覽器。

儘管它們節省了大量的頻寬，但很少有網站使用優化的響應式圖像，因為它需要創建一個自訂圖像處理管道，該管道必須是增量的才能實現良好的性能。 Enfasten 為您解決這個問題！

我寫這篇文章是因為在我的網站上，我經常包含尺寸荒謬的圖像，例如來自高 DPI 顯示器的2146x1258螢幕截圖。用戶的瀏覽器下載這個巨大的圖像並立即調整其大小以適合我的 660 像素寬的部落格。當沒有高 DPI 顯示器的人訪問我的網站時，這尤其糟糕，但我仍然希望內容在高 DPI 顯示器上看起來不錯。事實上，我並不總是記得優化我的圖像，這使得這種浪費更加嚴重。

有了 Enfasten，無論您使用什麼靜態網站產生器，您都可以在部署之前透過 Enfasten 運行您的網站並獲得免費的頻寬節省！

特徵

Enfasten 有許多功能，需要很長時間才能在您自己設定的腳本或 Gulp 任務中複製：

• 增量：Enfasten 只會花費時間載入、調整大小和最佳化新映像。使用優化器時這一點尤其重要，因為優化可能需要很長時間。每次建立網站時優化所有圖像都需要一個小時。
• 快取友好的重命名：Enfasten 會將您的所有圖像放在一個資料夾中，並在其名稱中添加哈希值，以便您可以告訴您的CDN/瀏覽器無限期緩存它們，而不會出現失效問題。
• 快速：它的優化程度並不高，但是在沒有新圖像的情況下建立我的網站需要0.36s ，而且它僅在必要時處理新圖像並使用快速縮放器。
• 剔除：有時 PNG 優化器可能會導致較大尺寸的圖像比較小尺寸的圖像具有較小的檔案大小，因為壓縮與調整大小過濾器相互作用。 Enfasten 有一種特殊的模式來偵測這些並剔除低效的縮小影像。
• 僅在值得時調整大小：如果您有一個1345px寬的圖像，並且您告訴 Enfasten 製作一個1320px寬的版本，則預設情況下它不會打擾。如果需要，您可以配置“足夠接近”閾值。對於.jpg文件，此閾值是單獨的，因為調整 JPEG 文件大小通常會因重新編碼而導致質量下降，因此尺寸上的微小變化確實不值得。
• 僅縮小尺寸：與更簡單的腳本不同，Enfasten 實際上會根據您想要的寬度檢查圖像的大小，並且只會縮小圖像的大小。如果尺寸清單中沒有更小的尺寸，則 Enfasten 甚至不會為圖片標籤添加srcset屬性。
• 正確複製：將檔案從輸入資料夾複製並轉換到輸出資料夾時，Enfasten 將確保刪除輸出資料夾中不應再存在的檔案。
• 保留原件：您的原件被複製、散列、無損優化並在 srcset 屬性中提供，因為為什麼不呢。這也實現了避免小尺寸調整和僅縮小尺寸的功能。
• 黑名單：我的網站上有一篇關於特殊精心製作的 PNG 文件的帖子，我可以告訴 Enfasten 不要弄亂這些文件並破壞效果。
• 甚至重寫相對的img src屬性。
• 支援png和jpg文件，其他的就不用管了。
• 適用於任何靜態站點生成器！

例子

下面是 Enfasten 輸入和輸出的範例。基本上，它將整個網站從輸入資料夾複製到輸出資料夾，並添加一個圖像資料夾，其中包含圖像的雜湊、最佳化和調整大小版本。然後它會重寫所有 HTML 以引用這些內容。目前，原始影像仍會被複製，以防被 RSS、腳本、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，你應該可以運行：

$ 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檔案進行設定。所有按鍵都是可選的，這是一個靜態 660px 寬的 Jekyll 網站的基本設定檔：

 # 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秒。
• 啟用剔除：剔除是 Enfasten 可以偵測具有較大檔案大小的較小尺寸影像並將其刪除的功能。如果沒有清單，它就不會記住它這樣做了，因此如果您嘗試使用剔除，它會立即重新生成並再次優化這些圖像。
• 自己解析：如果您願意，您也可以自己解析此文件並在自己的建置步驟中使用它。 Enfasten 的設定檔中甚至有一個選項，可以不執行該過程的複製和轉換階段，以便您可以僅使用 Enfasten 進行最佳化和調整大小，並自行重寫。這允許您將 Enfasten 與動態 Web 應用程式一起使用。

路線圖

這是一個週末項目，有一些事情我還沒有抽出時間去做。如果您想看到這些功能，歡迎貢獻！

• 不從原始位置複製文件的選項。如果您的網站和黑名單設定正確，那麼額外的文件只會使輸出膨脹。
• 更好的錯誤訊息。現在我只是到處冒泡 Go 錯誤。
• 更多頻寬優化使您的網站速度更快：
  • HTML 最小化
  • CSS 最小化
  • JS最小化
  • SVG優化
• 產生服務工作人員並將其設定為預先載入和快取內容以提高速度！

這個名字到底是從哪裡來的？

這個字聽起來像是「快速」的意思。它聽起來也像 Emscripten，這是另一個關於提高網路速度的項目，儘管以完全不同且不相關的方式。在我的腦海裡，我交替發音“En-fast-en”和“En-fassen”。我還用谷歌搜尋了它，它看起來並沒有與任何太重要的東西相衝突。

執照

該專案在 Apache 許可下發布，由 Tristan Hume 編寫