enfasten

Abrochar ⚡️

Haga que su sitio sea más rápido automáticamente con imágenes responsivas optimizadas

Enfasten es una herramienta escrita en Go que toma un sitio estático, reduce las imágenes a varios tamaños diferentes y luego reescribe todo su HTML para usar etiquetas de imágenes responsivas con atributos srcset . También puede ejecutar todas sus imágenes a través de un optimizador como ImageOptim. Esto hace que su sitio estático sea más rápido de cargar para las personas porque su navegador puede cargar la mejor imagen para el tamaño y la resolución de su pantalla, y es compatible con navegadores más antiguos.

Aunque ahorran toneladas de ancho de banda, pocos sitios utilizan imágenes con capacidad de respuesta optimizada porque requiere la creación de un proceso de procesamiento de imágenes personalizado que debe ser incremental para lograr un buen rendimiento. ¡Enfasten resuelve este problema haciendo todo por usted!

Escribí esto porque en mi sitio frecuentemente incluyo imágenes de tamaños absurdos, como una captura de pantalla 2146x1258 de una pantalla de alto DPI. El navegador del usuario descarga esta enorme imagen y rápidamente la reduce para que quepa en mi blog de 660 píxeles de ancho. Esto es especialmente malo cuando personas sin pantallas de alto DPI visitan mi sitio, pero aún quiero que las cosas se vean bien en pantallas de alto DPI. El hecho de que no siempre me acuerdo de optimizar mis imágenes hace que este desperdicio sea aún peor.

Con Enfasten, no importa qué generador de sitios estáticos utilice, puede ejecutar su sitio a través de Enfasten antes de implementarlo y obtener ahorros de ancho de banda gratuitos.

Características

Enfasten tiene un montón de características que llevarían mucho tiempo replicar en un script o tarea Gulp que usted mismo configure:

• Incremental : Enfasten solo dedicará tiempo a cargar, cambiar el tamaño y optimizar nuevas imágenes. Esto es especialmente importante cuando se utiliza un optimizador, ya que la optimización puede llevar mucho tiempo. Optimizar todas las imágenes de mi sitio cada vez que lo construía me llevaría una hora.
• Cambio de nombre compatible con caché : Enfasten colocará todas sus imágenes en una carpeta y agregará hashes a su nombre para que pueda decirle a su CDN/navegadores que las almacenen en caché indefinidamente sin problemas de invalidación.
• Rápido : no está ridículamente optimizado, pero una compilación de mi sitio sin imágenes nuevas toma 0.36s , además solo procesa imágenes nuevas cuando es necesario y utiliza un cambio de tamaño rápido.
• Selección selectiva : a veces los optimizadores PNG pueden hacer que las imágenes con dimensiones más grandes tengan un tamaño de archivo más pequeño que aquellas con dimensiones más pequeñas debido a cómo interactúa la compresión con los filtros de cambio de tamaño. Enfasten tiene un modo especial para detectarlos y seleccionar las imágenes reducidas ineficientes.
• Solo cambia el tamaño cuando vale la pena: si tienes una imagen de 1345px de ancho y le dices a Enfasten que haga una versión de 1320px de ancho, de forma predeterminada no molestará. Puede configurar el umbral "suficientemente cercano" si lo desea. Para los archivos .jpg , el umbral para esto es independiente, ya que cambiar el tamaño de los archivos JPEG a menudo conlleva una pérdida de calidad debido a la recodificación, por lo que los pequeños cambios de tamaño realmente no valen la pena.
• Solo reducción de escala: a diferencia de lo que podría hacer un script más simple, Enfasten en realidad verifica el tamaño de sus imágenes con los anchos que desea y solo reduce el tamaño de una imagen. Si no hay tamaños más pequeños en su lista de tamaños, Enfasten ni siquiera agregará un atributo srcset a las etiquetas de imagen.
• Copia adecuada: al copiar y transformar archivos de su carpeta de entrada a su carpeta de salida, Enfasten se asegurará de eliminar los archivos de la carpeta de salida que ya no deberían estar allí.
• Mantiene los originales: sus originales se copian, se procesan, se optimizan sin pérdidas y se ofrecen en atributos srcset, porque ¿por qué no? Esto también habilita las funciones de evitar pequeños cambios de tamaño y solo reducir la escala.
• Lista negra: tengo una publicación en mi sitio sobre archivos PNG especiales elaborados con astucia, puedo decirle a Enfasten que no se meta con ellos y arruine el efecto.
• Incluso reescribe los atributos relativos img src .
• Admite archivos png y jpg , todo lo demás se deja en paz.
• ¡Funciona con cualquier generador de sitios estáticos!

Ejemplo

A continuación se muestra un ejemplo de cómo se ven la entrada y salida de Enfasten. Básicamente, copia todo su sitio desde una carpeta de entrada a una de salida, agregando una carpeta de imágenes con versiones hash, optimizadas y redimensionadas de sus imágenes. Luego reescribe todo su HTML para hacer referencia a ellos. Por ahora las imágenes originales todavía se copian en caso de que se haga referencia a ellas mediante RSS, scripts, CSS, etc.

Ejemplo de jerarquía de directorios de entrada y salida

 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

Empezando

En la página de lanzamientos, puede descargar archivos binarios estáticos prediseñados para macOS y Linux que puede colocar en algún lugar de su PATH .

Si tienes Go instalado deberías poder ejecutar:

$ go get github.com/trishume/enfasten

y luego asegúrese de que su carpeta Go bin esté en su PATH . Alternativamente, clone el repositorio y ejecute go get y luego go install .

Después de haber instalado enfasten, cree un archivo de configuración enfasten.yml en el directorio de su sitio estático (consulte la sección "Configuración" a continuación para ver un ejemplo) y luego ejecute:

 # 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

Configuración

Enfasten se configura a través de un archivo enfasten.yml . Todas las claves son opcionales, aquí hay un buen archivo de configuración básico para un sitio Jekyll que tiene un ancho estático 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

Y aquí está la lista completa de opciones de configuración, los valores predeterminados y la documentación de lo que hacen:

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

Nota: Al cambiar las opciones que afectan el procesamiento de imágenes como widths , jpgquality y scalethreshold , es posible que desee eliminar su archivo de manifiesto y posiblemente también las imágenes procesadas. Si no lo hace, las imágenes antiguas no se volverán a procesar y se dejarán como están; si lo hace, Enfasten reconstruirá las imágenes faltantes.

El Manifiesto

Enfasten puede generar un archivo enfasten_manifest.yml que describe todas las imágenes que conoce y ha creado. Puede eliminar este archivo y, en su mayor parte, Enfasten hará exactamente lo mismo que habría hecho de otra manera, pero más lento. El manifiesto proporciona los siguientes beneficios:

• Hace que las compilaciones sean más rápidas : sin un manifiesto, Enfasten tiene que cargar todos sus archivos de imagen, analizarlos para determinar su tamaño, luego darse cuenta de que ya existe una imagen como esa y omitirla. Esto toma alrededor de 1.3s en mi sitio. Con el manifiesto, Enfasten solo tiene que cargar archivos y aplicarles hash, lo que solo toma alrededor de 0.3 s en mi sitio.
• Habilita la selección : la selección es una función mediante la cual Enfasten puede detectar imágenes de dimensiones más pequeñas con tamaños de archivo más grandes y eliminarlas. Sin el manifiesto, no puede recordar que hizo esto, por lo que si intenta utilizar el sacrificio, inmediatamente volverá a generar y optimizar esas imágenes nuevamente.
• Analícelo usted mismo : si lo desea, también puede analizar este archivo usted mismo y utilizarlo en sus propios pasos de compilación. Incluso hay una opción en el archivo de configuración de Enfasten para no realizar la etapa de copiar y transformar del proceso para que pueda usar Enfasten solo para optimizar y cambiar el tamaño y reescribirlo usted mismo. Esto le permite utilizar Enfasten con una aplicación web dinámica.

Hoja de ruta

Este fue un proyecto de fin de semana, hay algunas cosas que aún no he hecho. Si desea ver estas funciones, ¡acepto contribuciones!

• Opción de no copiar archivos de ubicaciones originales. Si tiene su sitio y su lista negra configurados correctamente, los archivos adicionales simplemente aumentarán la salida.
• Mejores mensajes de error. En este momento simplemente aparezco errores de Go en todas partes.
• Más optimizaciones de ancho de banda para hacer que su sitio sea más rápido:
  • Minimización de HTML
  • Minimización de CSS
  • Minimización de JS
  • Optimización SVG
• ¡Genere trabajadores de servicio y configúrelos para precargar y almacenar en caché elementos para mayor velocidad!

¿De dónde diablos vino el nombre?

Sonaba como una palabra que significaría "ayunar". También suena a Emscripten, que es otro proyecto sobre cómo hacer que la web sea más rápida, aunque de una manera totalmente diferente y sin relación. En mi cabeza alterno entre pronunciarlo "En-fast-en" y "En-fassen". También lo busqué en Google y no parecía que chocara con nada demasiado importante.

Licencia

Este proyecto se publica bajo la licencia Apache y fue escrito por Tristan Hume.