enfasten
Initial Release
Enfasten — это инструмент, написанный на Go, который принимает статический сайт, масштабирует изображения до нескольких разных размеров, а затем переписывает весь ваш HTML для использования адаптивных тегов изображений с атрибутами srcset . Он также может запускать все ваши изображения через оптимизатор, такой как ImageOptim. Это ускоряет загрузку вашего статического сайта для людей, поскольку их браузер может загружать лучшее изображение для своего размера и разрешения экрана, и он обратно совместим со старыми браузерами.
Несмотря на экономию трафика, немногие сайты используют оптимизированные адаптивные изображения, поскольку для достижения хорошей производительности требуется создание собственного конвейера обработки изображений, который должен быть инкрементальным. Enfasten решает эту проблему, делая все за вас!
Я написал это потому, что на своем сайте я часто размещаю изображения абсурдных размеров, например скриншот 2146x1258 с дисплея с высоким разрешением. Браузер пользователя загружает это огромное изображение и быстро уменьшает его размер, чтобы оно поместилось в моем блоге шириной 660 пикселей. Это особенно плохо, когда мой сайт посещают люди, у которых нет дисплеев с высоким разрешением, но я все равно хочу, чтобы на дисплеях с высоким разрешением все выглядело хорошо. Тот факт, что я не всегда забываю оптимизировать свои изображения, делает эту трату еще хуже.
С 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
На странице выпусков вы можете загрузить готовые статические двоичные файлы для 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 . Все ключи являются необязательными. Вот хороший базовый файл конфигурации для сайта Jekyll со статической шириной 660 пикселей:
# 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 сделает то же самое, что и в противном случае, но медленнее. Манифест предоставляет следующие преимущества:
1.3s . С манифестом Enfasten нужно только загружать файлы и хешировать их, что на моем сайте занимает всего около 0.3 с.Это был проект выходного дня, есть несколько вещей, до которых я еще не дошел. Если вы хотите увидеть эти функции, я приветствую вклад!
Это звучало как слово, которое означало бы «поститься». Это также похоже на Emscripten, еще один проект по ускорению Интернета, хотя и совершенно другим и несвязанным образом. В голове я попеременно произношу это «Эн-фаст-ен» и «Эн-фассен». Я также погуглил это, и не похоже, что это противоречило чему-то слишком важному.
Этот проект выпущен под лицензией Apache и написан Тристаном Хьюмом.
