enfasten
Initial Release
Enfasten ist ein in Go geschriebenes Tool, das eine statische Website aufnimmt, die Bilder auf verschiedene Größen verkleinert und dann Ihren gesamten HTML-Code neu schreibt, um responsive Bild-Tags mit srcset -Attributen zu verwenden. Es kann auch alle Ihre Bilder durch einen Optimierer wie ImageOptim laufen lassen. Dadurch wird Ihre statische Website für Benutzer schneller geladen, da ihr Browser das beste Bild für ihre Bildschirmgröße und Auflösung laden kann und sie abwärtskompatibel mit älteren Browsern ist.
Obwohl sie eine Menge Bandbreite einsparen, verwenden nur wenige Websites optimierte responsive Bilder, da hierfür eine benutzerdefinierte Bildverarbeitungspipeline erstellt werden muss, die inkrementell sein muss, um eine gute Leistung zu erzielen. Enfasten löst dieses Problem, indem es alles für Sie erledigt!
Ich habe dies geschrieben, weil ich auf meiner Website häufig Bilder in absurden Größen einfüge, beispielsweise einen Screenshot 2146x1258 von einem Display mit hoher DPI. Der Browser des Benutzers lädt dieses riesige Bild herunter und verkleinert es sofort, damit es in meinen 660 Pixel breiten Blog passt. Das ist besonders schlimm, wenn Leute ohne High-DPI-Displays meine Website besuchen, ich aber trotzdem möchte, dass die Dinge auf High-DPI-Displays gut aussehen. Die Tatsache, dass ich nicht immer daran denke, meine Bilder zu optimieren, macht diese Verschwendung noch schlimmer.
Unabhängig davon, welchen statischen Site-Generator Sie mit Enfasten verwenden, können Sie Ihre Site vor der Bereitstellung über Enfasten ausführen und von kostenlosen Bandbreiteneinsparungen profitieren!!
Enfasten verfügt über eine Reihe von Funktionen, deren Replikation in einem Skript oder einer Gulp-Aufgabe, die Sie selbst einrichten, lange dauern würde:
0.36s , außerdem werden neue Bilder nur bei Bedarf verarbeitet und eine schnelle Größenänderung verwendet.1345px haben und Enfasten anweisen, eine Version mit einer Breite von 1320px zu erstellen, stört es standardmäßig nicht. Sie können den Schwellenwert „nahe genug“ konfigurieren, wenn Sie möchten. Für .jpg Dateien ist der Schwellenwert hierfür unterschiedlich, da die Größenänderung von JPEG-Dateien aufgrund der Neukodierung oft mit einem Qualitätsverlust einhergeht, sodass sich kleine Größenänderungen wirklich nicht lohnen.srcset Attribut hinzu.img src Attribute neu.png und jpg Dateien, alles andere bleibt in Ruhe.Nachfolgend finden Sie ein Beispiel dafür, wie die Ein- und Ausgabe von Enfasten aussehen. Im Grunde kopiert es Ihre gesamte Site von einem Eingabe- in einen Ausgabeordner und fügt einen Bilderordner mit gehashten, optimierten und in der Größe geänderten Versionen Ihrer Bilder hinzu. Dann wird Ihr gesamter HTML-Code neu geschrieben, um darauf zu verweisen. Vorerst werden die Originalbilder noch kopiert, falls sie von RSS, Skripten, CSS usw. referenziert werden.
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
Auf der Release-Seite können Sie vorgefertigte statische Binärdateien für macOS und Linux herunterladen, die Sie irgendwo in Ihrem PATH ablegen können.
Wenn Sie Go installiert haben, sollten Sie Folgendes ausführen können:
$ go get github.com/trishume/enfasten und stellen Sie dann sicher, dass sich Ihr Go- bin Ordner in Ihrem PATH befindet. Alternativ klonen Sie das Repo und führen Sie go get und dann go install .
Nachdem Sie enfasten installiert haben, erstellen Sie eine enfasten.yml -Konfigurationsdatei im Verzeichnis Ihrer statischen Site (ein Beispiel finden Sie im Abschnitt „Konfiguration“ unten) und führen Sie dann Folgendes aus:
# 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 wird über eine enfasten.yml Datei konfiguriert. Alle Schlüssel sind optional. Hier ist eine gute Basiskonfigurationsdatei für eine Jekyll-Site mit einer statischen Breite von 660 Pixeln:
# 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.pngUnd hier ist die vollständige Liste der Konfigurationsoptionen, die Standardwerte und die Dokumentation ihrer Funktionsweise:
# 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 : [] Hinweis: Wenn Sie die Optionen ändern, die sich auf die Bildverarbeitung auswirken, wie widths , jpgquality und scalethreshold , möchten Sie möglicherweise Ihre Manifestdatei und möglicherweise auch die verarbeiteten Bilder selbst löschen. Wenn Sie dies nicht tun, werden die alten Bilder nicht erneut verarbeitet und bleiben unverändert. Wenn Sie dies nicht tun, erstellt Enfasten alle fehlenden Bilder neu.
Enfasten kann eine Datei enfasten_manifest.yml ausgeben, die alle ihm bekannten und erstellten Bilder beschreibt. Sie können diese Datei löschen und Enfasten wird größtenteils genau das Gleiche tun, was es sonst getan hätte, nur langsamer. Das Manifest bietet die folgenden Vorteile:
1.3s . Mit dem Manifest muss Enfasten nur Dateien laden und hashen, was auf meiner Website nur etwa 0.3 s dauert.Das war ein Wochenendprojekt, es gibt ein paar Dinge, zu denen ich noch nicht gekommen bin. Wenn Sie diese Funktionen sehen möchten, freue ich mich über Beiträge!
Es klang wie ein Wort, das „schnell machen“ bedeuten würde. Es klingt auch nach Emscripten, einem weiteren Projekt, bei dem es darum geht, das Web schneller zu machen, wenn auch auf eine völlig andere und unabhängige Art und Weise. In meinem Kopf spreche ich es abwechselnd „En-fast-en“ und „En-fassen“ aus. Ich habe es auch gegoogelt und es sah nicht so aus, als ob es mit etwas allzu Wichtigem kollidierte.
Dieses Projekt steht unter der Apache-Lizenz und wurde von Tristan Hume geschrieben
