enfasten
Initial Release
Enfastenは、静的サイトを取り入れ、画像をさまざまなサイズにスケーリングし、すべてのHTMLを書き直して、 srcset属性を持つレスポンシブイメージタグを使用するツールです。また、すべての画像をImageOptimのようなオプティマイザーを使用して実行することもできます。これにより、ブラウザが画面のサイズと解像度に最適な画像をロードできるため、人々がロードできるように静的サイトが速くなり、古いブラウザーと逆方向に互換性があります。
大量の帯域幅を節約しますが、優れたパフォーマンスを実現するためにインクリメンタルでなければならないカスタム画像処理パイプラインを作成する必要があるため、最適化されたレスポンシブ画像を使用するサイトはほとんどありません。 Enfastenはあなたのためにすべてをすることでこの問題を解決します！
私のサイトには、高DPIディスプレイの2146x1258スクリーンショットなど、不条理なサイズの画像を頻繁に含めるため、私はこれを書きました。ユーザーのブラウザはこの巨大な画像をダウンロードし、660px幅のブログに収まるように速やかにサイズを変更します。これは、高DPIディスプレイのない人が私のサイトにアクセスする場合に特に悪いことですが、私はまだHighDPIディスプレイで物事を見栄えがしたいと思っています。私がいつも自分の画像を最適化することを覚えているわけではないという事実は、この廃棄物をさらに悪化させます。
Enfastenを使用すると、使用している静的サイトジェネレーターに関係なく、展開する前にEnfastenを介してサイトを実行して無料の帯域幅の節約を取得できます!!
Enfastenには、自分で設定したスクリプトまたはGulpタスクで複製するのに長い時間がかかる機能がたくさんあります。
0.36s必要です。さらに、必要な場合にのみ新しい画像を処理し、高速リセイザーを使用します。1345pxの画像があり、Enfastenに幅1320pxのバージョンを作成するように指示する場合、デフォルトでは気になりません。必要に応じて、「十分に近い」しきい値を構成できます。 .jpgファイルの場合、JPEGファイルのサイズを変更することが多いため、再エンコードのために質の高いヒットが付いているため、これのしきい値は別々です。srcset属性を追加しません。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
[リリース]ページでは、 PATHのどこかに置くことができるMacosとLinuxの事前に構築された静的バイナリをダウンロードできます。
インストールした場合は、実行できるはずです。
$ 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 -cullenfastenは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_manifest.ymlファイルを出力できます。このファイルを削除することができ、ほとんどの場合、Enfastenはそれ以外の場合はまったく同じことを行いますが、遅くなります。マニフェストは次の利点を提供します。
1.3sかかります。マニフェストを使用すると、Enfastenはファイルをロードしてハッシュするだけで、サイトで約0.3秒しかかかりません。これは週末のプロジェクトでしたが、私がまだ回っていないことがいくつかあります。これらの機能を見たい場合は、貢献を歓迎します！
「速くする」ことを意味する言葉のように聞こえました。また、Emscriptenのように聞こえます。これは、まったく異なる無関係な方法ではありますが、Webを高速にすることに関する別のプロジェクトです。私の頭の中で、私はそれを「en-fast-en」と「en-fassen」と発音することを交互にします。私もそれをグーグルで検索しましたが、それはあまりにも重要なものと衝突したようには見えませんでした。
このプロジェクトはApacheライセンスの下でリリースされ、Tristan Humeによって書かれました
