enfasten
Initial Release
Enfasten은 정적 사이트를 가져와 이미지를 다양한 크기로 축소한 다음 모든 HTML을 다시 작성하여 srcset 속성이 있는 반응형 이미지 태그를 사용하는 Go로 작성된 도구입니다. 또한 ImageOptim과 같은 최적화 프로그램을 통해 모든 이미지를 실행할 수도 있습니다. 이렇게 하면 브라우저가 화면 크기와 해상도에 가장 적합한 이미지를 로드할 수 있고 이전 브라우저와 호환되므로 사람들이 정적 사이트를 더 빠르게 로드할 수 있습니다.
엄청난 양의 대역폭을 절약하더라도 최적화된 반응형 이미지를 사용하는 사이트는 거의 없습니다. 좋은 성능을 달성하려면 점진적으로 증가해야 하는 사용자 정의 이미지 처리 파이프라인을 만들어야 하기 때문입니다. Enfasten은 당신을 위해 모든 것을 함으로써 이 문제를 해결합니다!
내 사이트에는 높은 DPI 디스플레이의 2146x1258 스크린샷과 같이 터무니없는 크기의 이미지가 자주 포함되어 있기 때문에 이 글을 썼습니다. 사용자의 브라우저는 이 거대한 이미지를 다운로드하고 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 에 있는지 확인하세요. 또는 저장소를 복제하고 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 파일을 통해 구성됩니다. 모든 키는 선택 사항입니다. 여기에 정적 660px 너비의 Jekyll 사이트에 대한 좋은 기본 구성 파일이 있습니다:
# 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 와 같은 이미지 처리에 영향을 미치는 옵션을 변경할 때 매니페스트 파일을 삭제하고 처리된 이미지 자체도 삭제할 수 있습니다. 그렇지 않으면 이전 이미지가 다시 처리되지 않고 그대로 유지됩니다. 그렇게 하면 Enfasten이 누락된 이미지를 다시 빌드합니다.
Enfasten은 알고 있고 구축한 모든 이미지를 설명하는 enfasten_manifest.yml 파일을 출력할 수 있습니다. 이 파일을 삭제할 수 있으며 대부분의 경우 Enfasten은 그렇지 않은 경우와 동일한 작업을 수행하지만 속도는 더 느립니다. 매니페스트는 다음과 같은 이점을 제공합니다.
1.3s 정도 걸립니다. 매니페스트를 사용하면 Enfasten은 파일을 로드하고 해시하기만 하면 되는데, 이는 내 사이트에서 약 0.3 초만 소요됩니다.이것은 주말 프로젝트였습니다. 아직 해결하지 못한 몇 가지 사항이 있습니다. 이러한 기능을 보고 싶다면 기여를 환영합니다!
"빨리 만들다"라는 뜻의 단어처럼 들렸습니다. 완전히 다르고 관련 없는 방식이기는 하지만 웹을 빠르게 만드는 또 다른 프로젝트인 Emscripten과도 비슷합니다. 내 머릿속에서는 "En-fast-en"과 "En-fassen"을 번갈아 발음합니다. 나도 구글링해봤는데 너무 중요한 내용과 충돌하는 것 같지는 않았습니다.
이 프로젝트는 Apache 라이센스에 따라 릴리스되었으며 Tristan Hume이 작성했습니다.
