enfasten

Attachez ⚡️

Rendez automatiquement votre site plus rapide avec des images réactives optimisées

Enfasten est un outil écrit en Go qui prend en charge un site statique, réduit les images à un certain nombre de tailles différentes, puis réécrit tout votre HTML pour utiliser des balises d'image réactives avec des attributs srcset . Il peut également exécuter toutes vos images via un optimiseur comme ImageOptim. Cela rend votre site statique plus rapide à charger pour les utilisateurs, car leur navigateur peut charger la meilleure image pour leur taille et leur résolution d'écran, et il est rétrocompatible avec les navigateurs plus anciens.

Même s'ils économisent des tonnes de bande passante, peu de sites utilisent des images réactives optimisées, car cela nécessite la création d'un pipeline de traitement d'image personnalisé qui doit être incrémentiel afin d'obtenir de bonnes performances. Enfasten résout ce problème en faisant tout pour vous !

J'ai écrit ceci parce que sur mon site, j'inclus fréquemment des images de tailles absurdes, comme une capture d'écran 2146x1258 provenant d'un écran haute résolution. Le navigateur de l'utilisateur télécharge cette énorme image et la redimensionne rapidement pour l'adapter à mon blog de 660 pixels de large. C'est particulièrement grave lorsque des personnes sans écran haute DPI visitent mon site, mais je veux quand même que les choses soient belles sur les écrans haute DPI. Le fait que je ne pense pas toujours à optimiser mes images aggrave encore ce gaspillage.

Avec Enfasten, quel que soit le générateur de site statique que vous utilisez, vous pouvez exécuter votre site via Enfasten avant de le déployer et obtenir des économies de bande passante gratuites !!

Caractéristiques

Enfasten possède un certain nombre de fonctionnalités qui prendraient beaucoup de temps à répliquer dans un script ou une tâche Gulp que vous avez configuré vous-même :

• Incrémentiel : Enfasten ne passera que du temps à charger, redimensionner et optimiser de nouvelles images. Ceci est particulièrement important lors de l'utilisation d'un optimiseur, car l'optimisation peut prendre beaucoup de temps. Optimiser toutes les images de mon site à chaque fois que je le construisais prendrait une heure.
• Renommage respectueux du cache : Enfasten placera toutes vos images dans un seul dossier et ajoutera des hachages à leur nom afin que vous puissiez dire à votre CDN/navigateurs de les mettre en cache indéfiniment sans problèmes d'invalidation.
• Rapide : ce n'est pas ridiculement optimisé, mais une construction de mon site sans nouvelles images prend 0.36s , et elle ne traite les nouvelles images que lorsque cela est nécessaire et utilise un redimensionneur rapide.
• Culling : Parfois, les optimiseurs PNG peuvent conduire à des images de dimensions plus grandes ayant une taille de fichier plus petite que celles de dimensions plus petites en raison de la façon dont la compression interagit avec les filtres de redimensionnement. Enfasten dispose d'un mode spécial pour les détecter et éliminer les images réduites inefficaces.
• Ne redimensionne que lorsque cela en vaut la peine : si vous avez une image de 1345px de large et que vous demandez à Enfasten de créer une version de 1320px de large, par défaut, cela ne dérangera pas. Vous pouvez configurer le seuil "assez proche" si vous le souhaitez. Pour les fichiers .jpg , le seuil est différent, car le redimensionnement des fichiers JPEG s'accompagne souvent d'une perte de qualité en raison du réencodage, donc de petits changements de taille n'en valent vraiment pas la peine.
• Réduction d'échelle uniquement : contrairement à ce qu'un script plus simple pourrait faire, Enfasten vérifie en fait la taille de vos images par rapport aux largeurs souhaitées et ne redimensionne une image que vers le bas . S'il n'y a pas de tailles plus petites dans votre liste de tailles, Enfasten n'ajoutera même pas d'attribut srcset aux balises d'image.
• Copie correcte : lors de la copie et de la transformation de fichiers de votre dossier d'entrée vers votre dossier de sortie, Enfasten veillera à supprimer les fichiers du dossier de sortie qui ne devraient plus être là.
• Conserve les originaux : vos originaux sont copiés, hachés, optimisés sans perte et proposés dans les attributs srcset, car pourquoi pas. Cela permet également d'éviter les petits redimensionnements et uniquement la réduction d'échelle.
• Liste noire : j'ai un article sur mon site à propos de fichiers PNG spéciaux de conception délicate, je peux dire à Enfasten de ne pas jouer avec ceux-ci et de gâcher l'effet.
• Réécrit même les attributs relatifs img src .
• Prend en charge les fichiers png et jpg , tout le reste est laissé seul.
• Fonctionne avec n'importe quel générateur de site statique !

Exemple

Vous trouverez ci-dessous un exemple de ce à quoi ressemblent les entrées et sorties d’Enfasten. Fondamentalement, il copie l'intégralité de votre site d'une entrée vers un dossier de sortie, en ajoutant un dossier d'images avec des versions hachées, optimisées et redimensionnées de vos images. Ensuite, il réécrit tout votre code HTML pour y faire référence. Pour l'instant, les images originales sont toujours copiées au cas où elles seraient référencées par RSS, scripts, CSS, etc.

Exemple de hiérarchie de répertoires d'entrée et de sortie

 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

Commencer

Sur la page des versions, vous pouvez télécharger des binaires statiques prédéfinis pour macOS et Linux que vous pouvez placer quelque part dans votre PATH .

Si Go est installé, vous devriez pouvoir exécuter :

$ go get github.com/trishume/enfasten

puis assurez-vous que votre dossier Go bin se trouve dans votre PATH . Vous pouvez également cloner le dépôt et exécuter go get puis go install .

Après avoir installé enfasten, créez un fichier de configuration enfasten.yml dans le répertoire de votre site statique (voir la section « Configuration » ci-dessous pour un exemple), puis exécutez :

 # 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

Configuration

Enfasten est configuré via un fichier enfasten.yml . Toutes les clés sont facultatives, voici un bon fichier de configuration de base pour un site Jekyll d'une largeur statique de 660 px :

 # 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

Et voici la liste complète des options de configuration, les valeurs par défaut et la documentation de ce qu'elles font :

 # 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 : []

Remarque : Lorsque vous modifiez les options qui affectent le traitement de l'image, telles que widths , jpgquality et scalethreshold , vous souhaiterez peut-être supprimer votre fichier manifeste et éventuellement également les images traitées elles-mêmes. Si vous ne le faites pas, les anciennes images ne seront pas retraitées et seront laissées telles quelles. Si vous le faites, Enfasten reconstruira toutes les images manquantes.

Le manifeste

Enfasten peut générer un fichier enfasten_manifest.yml qui décrit toutes les images qu'il connaît et qu'il a créées. Vous pouvez supprimer ce fichier et, pour la plupart, Enfasten fera exactement la même chose qu'il aurait fait autrement, mais plus lentement. Le manifeste offre les avantages suivants :

• Rend les builds plus rapides : sans manifeste, Enfasten doit charger tous vos fichiers image, les analyser pour déterminer leur taille, puis se rendre compte qu'il existe déjà une image comme celle-là et l'ignorer. Cela prend environ 1.3s sur mon site. Avec le manifeste, Enfasten n'a qu'à charger les fichiers et à les hacher, ce qui ne prend qu'environ 0.3 s sur mon site.
• Permet l'élimination : Culling est une fonctionnalité grâce à laquelle Enfasten peut détecter des images de plus petites dimensions avec des fichiers de plus grande taille et les supprimer. Sans le manifeste, il ne se souvient pas de ce qu'il a fait, donc si vous essayez d'utiliser l'élimination, il régénérera et optimisera immédiatement ces images.
• Analysez-le vous-même : Si vous le souhaitez, vous pouvez également analyser ce fichier vous-même et l'utiliser dans vos propres étapes de construction. Il existe même une option dans le fichier de configuration d'Enfasten pour ne pas effectuer l'étape de copie et de transformation du processus afin que vous puissiez utiliser Enfasten uniquement pour son optimisation et son redimensionnement et effectuer la réécriture vous-même. Cela vous permet d'utiliser Enfasten avec une application Web dynamique.

Feuille de route

C'était un projet de week-end, il y a quelques choses que je n'ai pas encore abordées. Si vous souhaitez voir ces fonctionnalités, j'apprécie les contributions !

• Option pour ne pas copier les fichiers à partir des emplacements d'origine. Si votre site et votre liste noire sont correctement configurés, les fichiers supplémentaires ne font que gonfler la sortie.
• De meilleurs messages d'erreur. En ce moment, je fais des bulles d'erreurs Go partout.
• Plus d'optimisations de bande passante pour rendre votre site plus rapide :
  • Minimisation HTML
  • Minimisation CSS
  • Minimisation JS
  • Optimisation SVG
• Générez des techniciens de service et configurez-les pour précharger et mettre en cache les éléments pour plus de vitesse !

D’où vient ce nom ?

Cela ressemblait à un mot qui signifierait « faire vite ». Cela ressemble également à Emscripten, un autre projet visant à rendre le Web rapide, bien que d'une manière totalement différente et sans rapport. Dans ma tête, j'alterne entre le prononcer « En-fast-en » et « En-fassen ». Je l'ai également recherché sur Google et il ne semblait pas entrer en collision avec quelque chose de trop important.

Licence

Ce projet est publié sous licence Apache et a été écrit par Tristan Hume