enfasten
Initial Release
Enfasten เป็นเครื่องมือที่เขียนด้วยภาษา Go ซึ่งใช้ในไซต์แบบคงที่ ปรับขนาดรูปภาพให้เหลือขนาดต่างๆ จากนั้นเขียน HTML ทั้งหมดของคุณใหม่เพื่อใช้แท็กรูปภาพที่ตอบสนองด้วยแอตทริบิวต์ srcset นอกจากนี้ยังสามารถเรียกใช้รูปภาพทั้งหมดของคุณผ่านเครื่องมือเพิ่มประสิทธิภาพเช่น ImageOptim ซึ่งจะทำให้ไซต์แบบคงที่ของคุณโหลดเร็วขึ้น เนื่องจากเบราว์เซอร์สามารถโหลดรูปภาพที่ดีที่สุดสำหรับขนาดหน้าจอและความละเอียดของพวกเขาได้ และยังสามารถใช้งานร่วมกับเบราว์เซอร์รุ่นเก่าได้อีกด้วย
แม้ว่าจะประหยัดแบนด์วิธได้มาก แต่มีเพียงไม่กี่ไซต์ที่ใช้รูปภาพตอบสนองที่ได้รับการปรับปรุง เนื่องจากจำเป็นต้องสร้างไปป์ไลน์การประมวลผลรูปภาพแบบกำหนดเองซึ่งจะต้องเพิ่มขึ้นทีละน้อยเพื่อให้ได้ประสิทธิภาพที่ดี Enfasten แก้ปัญหานี้ด้วยการทำทุกอย่างเพื่อคุณ!
ฉันเขียนสิ่งนี้เพราะในเว็บไซต์ของฉัน ฉันมักจะรวมรูปภาพที่มีขนาดไร้สาระ เช่น ภาพหน้าจอ 2146x1258 จากจอแสดงผล DPI สูง เบราว์เซอร์ของผู้ใช้ดาวน์โหลดภาพขนาดใหญ่นี้และปรับขนาดให้พอดีกับบล็อกขนาดกว้าง 660px ของฉันทันที สิ่งนี้เลวร้ายอย่างยิ่งเมื่อผู้ที่ไม่มีจอแสดงผล DPI สูงเยี่ยมชมไซต์ของฉัน แต่ฉันยังต้องการให้สิ่งต่าง ๆ ดูดีบนจอแสดงผล DPI สูง ความจริงที่ว่าฉันจำไม่ได้ว่าจะต้องปรับภาพให้เหมาะสมเสมอไป ทำให้การสิ้นเปลืองนี้แย่ลงไปอีก
ด้วย Enfasten ไม่ว่าคุณจะใช้โปรแกรมสร้างไซต์แบบคงที่ใด คุณสามารถเรียกใช้ไซต์ของคุณผ่าน Enfasten ก่อนที่คุณจะปรับใช้และ ประหยัดแบนด์วิดท์ฟรี!!
Enfasten มีฟีเจอร์มากมายที่จะใช้เวลานานในการทำซ้ำในสคริปต์หรืองาน Gulp ที่คุณตั้งค่าเอง:
0.36s อีกทั้งจะประมวลผลรูปภาพใหม่เมื่อจำเป็นเท่านั้น และใช้ตัวปรับขนาดที่รวดเร็ว1345px และคุณบอกให้ Enfasten สร้างเวอร์ชันที่มีความกว้าง 1320px โดยค่าเริ่มต้น ก็ไม่ต้องกังวล คุณสามารถกำหนดค่าเกณฑ์ "ใกล้เพียงพอ" ได้หากต้องการ สำหรับไฟล์ .jpg เกณฑ์สำหรับสิ่งนี้จะแยกจากกัน เนื่องจากการปรับขนาดไฟล์ JPEG มักจะมาพร้อมกับคุณภาพที่ได้รับความนิยมเนื่องจากการเข้ารหัสซ้ำ ดังนั้นการเปลี่ยนแปลงขนาดเล็กน้อยจึงไม่คุ้มค่าเลยsrcset ให้กับแท็กรูปภาพด้วยซ้ำimg src แบบสัมพันธ์กันใหม่png และ jpg ส่วนอย่างอื่นก็เหลืออยู่คนเดียวด้านล่างนี้เป็นตัวอย่างลักษณะอินพุตและเอาท์พุตของ Enfasten โดยพื้นฐานแล้ว มันจะคัดลอกทั้งไซต์ของคุณจากอินพุตไปยังโฟลเดอร์เอาท์พุต โดยเพิ่มโฟลเดอร์รูปภาพที่มีรูปภาพในเวอร์ชันที่แฮช ปรับให้เหมาะสม และปรับขนาดแล้ว จากนั้นจะเขียน HTML ทั้งหมดของคุณใหม่เพื่ออ้างอิงสิ่งเหล่านั้น ในตอนนี้รูปภาพต้นฉบับยังคงถูกคัดลอกในกรณีที่อ้างอิงโดย RSS, สคริปต์, CSS ฯลฯ
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
ในหน้าเผยแพร่ คุณสามารถดาวน์โหลดไบนารีคงที่ที่สร้างไว้ล่วงหน้าสำหรับ macOS และ Linux ที่คุณสามารถใส่ไว้ที่ใดก็ได้ใน PATH
หากคุณติดตั้ง Go แล้ว คุณควรจะสามารถรันได้:
$ go get github.com/trishume/enfasten จากนั้นตรวจสอบให้แน่ใจว่าโฟลเดอร์ Go bin ของคุณอยู่ใน PATH หรืออีกทางหนึ่ง โคลน repo แล้วรัน go get จากนั้น go install
หลังจากที่คุณติดตั้ง enfasten แล้ว ให้สร้างไฟล์กำหนดค่า enfasten.yml ในไดเรกทอรีของไซต์คงที่ของคุณ (ดูตัวอย่างในส่วน "การกำหนดค่า" ด้านล่าง) จากนั้นเรียกใช้:
# 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 ได้รับการกำหนดค่าผ่านไฟล์ enfasten.yml คีย์ทั้งหมดเป็นทางเลือก นี่เป็นไฟล์กำหนดค่าพื้นฐานที่ดีสำหรับไซต์ Jekyll ที่มีความกว้างคงที่ 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และนี่คือตัวเลือกการกำหนดค่าทั้งหมด ค่าเริ่มต้น และเอกสารประกอบของสิ่งที่พวกเขาทำ:
# 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 : [] หมายเหตุ: เมื่อเปลี่ยนตัวเลือกที่ส่งผลต่อการประมวลผลภาพ เช่น widths , jpgquality และ scalethreshold คุณอาจต้องการลบไฟล์ Manifest ของคุณและอาจรวมถึงภาพที่ประมวลผลด้วย หากคุณไม่ทำ ภาพเก่าจะไม่ได้รับการประมวลผลซ้ำ และจะถูกปล่อยไว้ดังเดิม หากคุณทำเช่นนั้น Enfasten จะสร้างภาพที่หายไปขึ้นมาใหม่
Enfasten สามารถส่งออกไฟล์ enfasten_manifest.yml ที่อธิบายภาพทั้งหมดที่ทราบและสร้างขึ้น คุณสามารถลบไฟล์นี้ได้ และโดยส่วนใหญ่แล้ว Enfasten จะทำสิ่งเดียวกันกับที่เคยทำแต่จะช้ากว่า รายการให้ประโยชน์ดังต่อไปนี้:
1.3s บนเว็บไซต์ของฉัน ด้วยรายการดังกล่าว Enfasten จะต้องโหลดไฟล์และแฮชไฟล์เหล่านั้นเท่านั้น ซึ่งใช้เวลาประมาณ 0.3 วินาทีบนไซต์ของฉันเท่านั้นนี่เป็นโปรเจ็กต์สุดสัปดาห์ มีบางสิ่งที่ฉันยังไม่ได้ทำ หากคุณต้องการดูคุณสมบัติเหล่านี้ ฉันยินดีรับการมีส่วนร่วม!
ฟังดูเหมือนคำที่แปลว่า "ทำให้เร็ว" ดูเหมือน Emscripten ซึ่งเป็นอีกโปรเจ็กต์เกี่ยวกับการทำให้เว็บรวดเร็ว แม้ว่าจะแตกต่างไปจากเดิมอย่างสิ้นเชิงและไม่เกี่ยวข้องกันก็ตาม ในหัวของฉัน ฉันสลับระหว่างการออกเสียงว่า "En-fast-en" และ "En-fassen" ฉันยังค้นหาใน Google และดูเหมือนว่ามันจะไม่ได้ชนกับสิ่งใดที่สำคัญเกินไป
โครงการนี้เผยแพร่ภายใต้ลิขสิทธิ์ Apache และเขียนโดย Tristan Hume
