enfasten

Aperte ⚡️

Torne seu site mais rápido automaticamente com imagens responsivas otimizadas

Enfasten é uma ferramenta escrita em Go que pega um site estático, reduz as imagens para vários tamanhos diferentes e, em seguida, reescreve todo o seu HTML para usar tags de imagem responsivas com atributos srcset . Ele também pode executar todas as suas imagens por meio de um otimizador como o ImageOptim. Isso torna seu site estático mais rápido para as pessoas carregarem, porque o navegador pode carregar a melhor imagem para o tamanho e a resolução da tela e é compatível com versões anteriores de navegadores mais antigos.

Embora economizem muita largura de banda, poucos sites usam imagens responsivas otimizadas porque isso requer a criação de um pipeline de processamento de imagem personalizado que deve ser incremental para obter um bom desempenho. A Enfasten resolve esse problema fazendo tudo por você!

Escrevi isso porque em meu site frequentemente incluo imagens de tamanhos absurdos, como uma captura de tela 2146x1258 de uma tela de alto DPI. O navegador do usuário baixa esta imagem enorme e imediatamente a redimensiona para caber no meu blog de 660px de largura. Isso é especialmente ruim quando pessoas sem telas de alto DPI visitam meu site, mas ainda quero que as coisas tenham uma boa aparência em telas de alto DPI. O fato de nem sempre me lembrar de otimizar minhas imagens piora ainda mais esse desperdício.

Com o Enfasten, não importa qual gerador de site estático você use, você pode executar seu site através do Enfasten antes de implantar e obter economia de largura de banda gratuita!!

Características

O Enfasten tem vários recursos que levariam muito tempo para serem replicados em um script ou tarefa Gulp que você mesmo configurou:

• Incremental : o Enfasten gastará apenas tempo carregando, redimensionando e otimizando novas imagens. Isto é especialmente importante ao usar um otimizador, pois a otimização pode levar muito tempo. Otimizar todas as imagens do meu site toda vez que eu construía demoraria uma hora.
• Renomeação amigável ao cache : Enfasten colocará todas as suas imagens em uma pasta e adicionará hashes aos seus nomes para que você possa dizer ao seu CDN/navegadores para armazená-las em cache indefinidamente sem problemas de invalidação.
• Rápido : não é ridiculamente otimizado, mas uma construção do meu site sem novas imagens leva 0.36s , além de processar novas imagens apenas quando necessário e usar um redimensionador rápido.
• Seleção : às vezes, os otimizadores de PNG podem fazer com que imagens com dimensões maiores tenham tamanho de arquivo menor do que aquelas com dimensões menores devido à forma como a compactação interage com os filtros de redimensionamento. Enfasten tem um modo especial para detectá-los e selecionar imagens ineficientes em escala reduzida.
• Redimensione apenas quando valer a pena: se você tiver uma imagem com 1345px de largura e disser ao Enfasten para fazer uma versão com 1320px de largura, por padrão isso não incomodará. Você pode configurar o limite "suficientemente próximo", se desejar. Para arquivos .jpg , o limite para isso é separado, pois o redimensionamento de arquivos JPEG geralmente causa um impacto na qualidade devido à recodificação, portanto, pequenas alterações no tamanho realmente não valem a pena.
• Apenas redução de escala: ao contrário do que um script mais simples poderia fazer, o Enfasten na verdade verifica o tamanho de suas imagens em relação às larguras desejadas e apenas redimensiona uma imagem para baixo . Se não houver tamanhos menores em sua lista de tamanhos, o Enfasten nem mesmo adicionará um atributo srcset às tags de imagem.
• Cópia adequada: Ao copiar e transformar arquivos de sua pasta de entrada para sua pasta de saída, o Enfasten irá excluir os arquivos da pasta de saída que não deveriam mais estar lá.
• Mantém os originais: seus originais são copiados, hash, otimizados sem perdas e oferecidos em atributos srcset, porque não. Isso também permite os recursos de evitar pequenos redimensionamentos e apenas redução de escala.
• Lista negra: tenho uma postagem em meu site sobre arquivos PNG especiais elaborados de maneira complicada. Posso dizer ao Enfasten para não mexer com eles e estragar o efeito.
• Até reescreve atributos relativos img src .
• Suporta arquivos png e jpg , todo o resto é deixado de lado.
• Funciona com qualquer gerador de site estático!

Exemplo

Abaixo está um exemplo da aparência da entrada e saída do Enfasten. Basicamente, ele copia todo o seu site de uma pasta de entrada para uma pasta de saída, adicionando uma pasta de imagens com versões hash, otimizadas e redimensionadas de suas imagens. Em seguida, ele reescreve todo o seu HTML para fazer referência a eles. Por enquanto as imagens originais ainda são copiadas caso sejam referenciadas por RSS, scripts, CSS, etc.

Exemplo de hierarquia de diretórios de entrada e saída

 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

Começando

Na página de lançamentos você pode baixar binários estáticos pré-construídos para macOS e Linux que você pode colocar em algum lugar no seu PATH .

Se você tiver o Go instalado, poderá executar:

$ go get github.com/trishume/enfasten

e certifique-se de que sua pasta Go bin esteja em seu PATH . Alternativamente, clone o repositório e execute go get e então go install .

Depois de instalar o enfasten, crie um arquivo de configuração enfasten.yml no diretório do seu site estático (consulte a seção "Configuração" abaixo para obter um exemplo) e execute:

 # 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

Configuração

O Enfasten é configurado por meio de um arquivo enfasten.yml . Todas as chaves são opcionais, aqui está um bom arquivo de configuração básico para um site Jekyll com largura estática de 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

E aqui está a lista completa de opções de configuração, os valores padrão e a documentação do que eles fazem:

 # 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: Ao alterar as opções que afetam o processamento de imagens, como widths , jpgquality e scalethreshold , você pode querer excluir seu arquivo de manifesto e possivelmente também as próprias imagens processadas. Caso contrário, as imagens antigas não serão reprocessadas e serão deixadas como estão. Se você fizer isso, o Enfasten reconstruirá todas as imagens ausentes.

O Manifesto

O Enfasten pode gerar um arquivo enfasten_manifest.yml que descreve todas as imagens que ele conhece e construiu. Você pode excluir este arquivo e, na maior parte, o Enfasten fará exatamente a mesma coisa que faria de outra forma, mas mais lento. O manifesto oferece os seguintes benefícios:

• Torna as compilações mais rápidas : sem um manifesto, o Enfasten precisa carregar todos os seus arquivos de imagem, analisá-los para descobrir seu tamanho, então perceber que já existe uma imagem como essa e ignorá-la. Isso leva cerca de 1.3s no meu site. Com o manifesto, o Enfasten só precisa carregar os arquivos e fazer hash deles, o que leva apenas cerca de 0.3 s no meu site.
• Permite seleção : seleção é um recurso onde o Enfasten pode detectar imagens de dimensões menores com tamanhos de arquivo maiores e excluí-las. Sem o manifesto, ele não consegue se lembrar do que fez isso, portanto, se você tentar usar o abate, ele irá imediatamente gerar novamente e otimizar essas imagens novamente.
• Analise você mesmo : se desejar, você também pode analisar esse arquivo e usá-lo em suas próprias etapas de construção. Existe até uma opção no arquivo de configuração do Enfasten para não fazer o estágio de copiar e transformar do processo, para que você possa usar o Enfasten apenas para otimizar e redimensionar e reescrever você mesmo. Isso permite que você use o Enfasten com um aplicativo da web dinâmico.

Roteiro

Este foi um projeto de fim de semana, há algumas coisas que ainda não fiz. Se você quiser ver esses recursos, agradeço contribuições!

• Opção para não copiar arquivos dos locais originais. Se você tiver seu site e sua lista negra configurados corretamente, os arquivos extras apenas sobrecarregarão a saída.
• Melhores mensagens de erro. No momento, apenas apareço erros Go em todos os lugares.
• Mais otimizações de largura de banda para tornar seu site mais rápido:
  • Minimização de HTML
  • Minimização de CSS
  • Minimização JS
  • Otimização SVG
• Gere service workers e configure-os para pré-carregar e armazenar itens em cache para obter velocidade extra!

De onde diabos veio o nome?

Parecia uma palavra que significaria “agilizar”. Também parece o Emscripten, que é outro projeto sobre como tornar a web mais rápida, embora de uma forma totalmente diferente e não relacionada. Na minha cabeça eu alterno entre pronunciar "En-fast-en" e "En-fassen". Também pesquisei no Google e não parecia ter colidido com nada muito importante.

Licença

Este projeto foi lançado sob a licença Apache e foi escrito por Tristan Hume