enfasten
Initial Release
Enfasten adalah alat yang ditulis dalam Go yang mengambil situs statis, memperkecil gambar ke beberapa ukuran berbeda, lalu menulis ulang semua HTML Anda untuk menggunakan tag gambar responsif dengan atribut srcset . Itu juga dapat menjalankan semua gambar Anda melalui pengoptimal seperti ImageOptim. Hal ini membuat situs statis Anda lebih cepat dimuat oleh orang-orang karena browser mereka dapat memuat gambar terbaik untuk ukuran dan resolusi layar mereka, dan kompatibel dengan browser lama.
Meskipun menghemat banyak bandwidth, hanya sedikit situs yang menggunakan gambar responsif yang dioptimalkan karena memerlukan pembuatan jalur pemrosesan gambar khusus yang harus dilakukan secara bertahap untuk mencapai kinerja yang baik. Enfasten memecahkan masalah ini dengan melakukan segalanya untuk Anda!
Saya menulis ini karena di situs saya, saya sering menyertakan gambar dengan ukuran yang tidak masuk akal, seperti tangkapan layar 2146x1258 dari tampilan DPI tinggi. Browser pengguna mendownload gambar besar ini dan segera mengubah ukurannya agar sesuai dengan blog saya yang lebarnya 660px. Hal ini sangat buruk ketika orang-orang tanpa tampilan DPI tinggi mengunjungi situs saya, namun saya tetap ingin semuanya terlihat bagus pada tampilan DPI tinggi. Fakta bahwa saya tidak selalu ingat untuk mengoptimalkan gambar saya membuat pemborosan ini semakin parah.
Dengan Enfasten, apa pun generator situs statis yang Anda gunakan, Anda dapat menjalankan situs Anda melalui Enfasten sebelum diterapkan dan mendapatkan penghematan bandwidth gratis!!
Enfasten memiliki banyak fitur yang memerlukan waktu lama untuk direplikasi dalam skrip atau tugas Gulp yang Anda atur sendiri:
0.36s , ditambah lagi hanya memproses gambar baru bila diperlukan dan menggunakan pengubah ukuran cepat.1345px dan Anda meminta Enfasten untuk membuat versi dengan lebar 1320px , secara default hal itu tidak akan mengganggu. Anda dapat mengonfigurasi ambang batas "cukup dekat" jika Anda mau. Untuk file .jpg , ambang batasnya terpisah karena mengubah ukuran file JPEG sering kali menghasilkan kualitas yang buruk karena pengkodean ulang, jadi perubahan kecil dalam ukuran sebenarnya tidak sepadan.srcset ke tag gambar.img src relatif.png dan jpg , yang lainnya dibiarkan saja.Di bawah ini adalah contoh tampilan input dan output Enfasten. Pada dasarnya ini menyalin seluruh situs Anda dari folder masukan ke folder keluaran, menambahkan folder gambar dengan versi gambar Anda yang di-hash, dioptimalkan, dan diubah ukurannya. Kemudian ia menulis ulang semua HTML Anda untuk merujuknya. Untuk saat ini gambar asli masih disalin jika direferensikan oleh RSS, skrip, CSS, dll.
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
Pada halaman rilis Anda dapat mengunduh biner statis bawaan untuk macOS dan Linux yang dapat Anda letakkan di suatu tempat di PATH Anda.
Jika Anda telah menginstal Go, Anda seharusnya dapat menjalankan:
$ go get github.com/trishume/enfasten lalu pastikan folder Go bin Anda ada di PATH Anda. Alternatifnya, kloning repo dan jalankan go get lalu go install .
Setelah Anda menginstal enfasten, buat file konfigurasi enfasten.yml di direktori situs statis Anda (lihat bagian "Konfigurasi" di bawah untuk contohnya) lalu jalankan:
# 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 dikonfigurasi melalui file enfasten.yml . Semua kunci bersifat opsional, berikut adalah file konfigurasi dasar yang bagus untuk situs Jekyll dengan lebar statis 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.pngDan inilah daftar lengkap opsi konfigurasi, nilai default, dan dokumentasi fungsinya:
# 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 : [] Catatan: Saat mengubah opsi yang memengaruhi pemrosesan gambar seperti widths , jpgquality , dan scalethreshold , Anda mungkin ingin menghapus file manifes dan mungkin juga gambar yang diproses itu sendiri. Jika Anda tidak melakukannya, gambar lama tidak akan diproses ulang dan akan dibiarkan apa adanya, jika Anda melakukannya, Enfasten akan membangun kembali gambar yang hilang.
Enfasten dapat menampilkan file enfasten_manifest.yml yang mendeskripsikan semua gambar yang diketahui dan dibuatnya. Anda dapat menghapus file ini dan sebagian besar Enfasten akan melakukan hal yang sama seperti sebelumnya, tetapi lebih lambat. Manifes memberikan manfaat sebagai berikut:
1.3s di situs saya. Dengan manifesnya, Enfasten hanya perlu memuat file dan melakukan hashing, yang hanya membutuhkan waktu sekitar 0.3 detik di situs saya.Ini adalah proyek akhir pekan, ada beberapa hal yang belum saya selesaikan. Jika Anda ingin melihat fitur ini, saya menyambut kontribusi!
Kedengarannya seperti sebuah kata yang berarti "mempercepat". Ini juga terdengar seperti Emscripten yang merupakan proyek lain tentang membuat web menjadi cepat, meskipun dengan cara yang sama sekali berbeda dan tidak berhubungan. Di kepalaku aku bergantian mengucapkannya "En-fast-en" dan "En-fassen". Saya juga mencarinya di Google dan sepertinya tidak bertabrakan dengan sesuatu yang terlalu penting.
Proyek ini dirilis di bawah lisensi Apache dan ditulis oleh Tristan Hume
