Lepto를 사용하여 이미지 최적화 프로세스 자동화

이미지를 최적화하는 것은 장기적인 작업입니다. 이미지민이나 ImageOptim을 사용하고 있을 수도 있습니다. 이것은 좋은 도구이지만 자동으로 사용하기는 어려울 것 같습니다.
인터넷을 위해 이미지를 최적화하고 싶을 때 해야 할 일이 많다. 예를 들어 다음과 같다.

크기 조정

다른 해상도 파일 만들기(망막 스크린용)

최적화(메타데이터 삭제)

압축

WebP와 같은 더 나은 형식 대안 만들기

우리는 모듈 귀속기와 전/후 프로세서를 통해 자바스크립트와 CSS를 컴파일하고 있습니다. 다음은 이미지 처리의 새로운 구축 절차입니다.

Lepto 시작

github.com/leptojs/lepto
Lepto는 노드입니다.js 모듈과 명령줄 인터페이스는 이미지 자원을 편집, 최적화, 분석하는 것을 책임진다.시작합시다!
우선, "npm 초기화 프로젝트"가 필요합니다.없으면 명령npm init을 실행합니다.
또한 CLI 도구를 개발자 종속성으로 설치해야 합니다.

$ npm install -D lepto-cli

만약 당신이 일반적인 그림을 수집하는 것이 귀찮다면, 제가 당신에게 you can download on this gist 을 드리겠습니다. "ZIP 다운로드"단추를 누르면 이 자원들을 "자산"디렉터리에 넣을 수 있습니다.
그런 다음 lepto.config.json 라는 구성 파일을 생성해야 합니다.

{
  "input": "assets",
  "output": "assets/output",
  "watch": true,
  "filters": [
    {
      "glob": "**/*.*",
      "use": [
        {
          "name": "lepto.jpeg",
          "quality": 75
        },
        {
          "name": "lepto.png",
          "quality": 75
        }
      ]
    }
  ]
}

build 에서 likepackage.json라는 새 npm 스크립트를 만듭니다.

{
  ...
  "scripts": {
    "build": "lepto",
    ...
  }
  ...
}

이제 명령npm run build을 실행하면 Lepto는 "assets"디렉터리에 있는 모든 jpg와 png를 압축하여 출력 디렉터리로 내보냅니다.watch 옵션을 true 로 설정하면 Lepto는 "assets"디렉터리의 모든 변경 사항을 감시하여 이 과정을 다시 시작합니다.
기본적으로 Lepto에는 0 구성이 있으므로 filters 목록과 glob 플러그인 목록을 작성해야 합니다.이 프로필 예시에서 Lepto는 품질이 75인 모든 jpg와 png 파일을 압축할 것을 요구합니다.

플러그인 추가

이제 이미지의 크기를 조정하려고 합니다.플러그인이 있습니다. use 이렇게 설치해야 합니다.

$ npm install -D lepto-resize

그런 다음 Lepto 구성에 새 필터를 추가합니다.

{
  "glob": "**/*.{jpg,jpeg}",
  "use": [
    {
      "name": "lepto-resize",
      "maxWidth": 1200
    }
  ]
}

현재 모든 JPG의 폭은 1200px보다 작거나 같습니다.저장소 lepto-resize 에서 github.com/leptojs/lepto-resize 와 함께 사용할 수 있는 추가 옵션을 찾을 수 있습니다.

망막 버전의 png을 만들기 위해 다른 필터를 추가합니다.

{
  "glob": "**/*.png",
  "use": [
    {
      "name": "lepto-resize",
      "retina": [2, 3]
    }
  ]
}

현재, 우리는 lepto-resize를 사용하여 그것들을 쉽게 html에 삽입할 수 있다.

<img srcset="assets/output/icon.png,
             assets/output/[email protected] 2x,
             assets/output/[email protected] 3x"
     src="assets/output/icon.png" alt="Icon alt">

JPG의 WebP 대체품을 만들기 위해 플러그인 srcset 을 추가할 수 있다는 것이 확실합니다!문서를 보려면 여기를 클릭하십시오.github.com/leptojs/lepto-webp.

GUI 사용

최적화된 이미지를 얻기 위해서는 모든 이미지에 가장 적합한 품질 비율을 꼼꼼히 선택해야 한다.
기본적으로 GUI는 포트 4490에서 액세스할 수 있으므로 lepto-webp 를 실행하고 계속 localhost:4490 진행합니다.우리는 이 아름다운 인터페이스를 얻을 것이다. 그것은 세 부분으로 구성된다. 파일 목록, 필터 목록을 입력하고, 마지막으로 파일 선택을 기다리는 최적화기이다.

따라서 목록에서 파일을 선택하십시오. 이 파일은 현재 최적화기에 표시되어 있습니다. 품질 슬라이더를 타고 출력을 실시간으로 볼 수 있습니다.품질 백분율에 만족하면 최적화 플러그인 추가 버튼을 클릭하고 구성 저장 을 클릭하여 새 구성을 저장하거나⌘S/Ctrl+S).

"플러그인 최적화"를 추가하면 GUI는 새 필터를 만들 수 있습니다. glob는 파일 이름과 같고 플러그인은 파일 확장자에 대응합니다.

{
  "glob": "001.jpg",
  "use": [
    {
      "name": "lepto.jpeg",
      "quality": 48
    }
  ]
}

이러한 특정 필터가 목록의 끝에 있는지 확인합니다.

진일보하다

이 공구의 용례는 무궁무진하다. npm run build 플러그인을 사용하여 이미지의 선명한 색상을 자동으로 수집하여 단일 JSON 파일에 넣을 수도 있습니다.

Lepto에 대한 자세한 내용은 lepto-vibrant-color 및 lepto 문서를 참조하십시오.

github.com/leptojs/lepto

github.com/leptojs/lepto-cli

최상의 이미지 최적화 실천에 대한 더 많은 정보를 얻으려면 Essential Image Optimization 안내서를 읽어보시기 바랍니다. images.guide.

나에 관하여

나는 프랑스 학생으로 여러 해 동안 전단 개발에 열중해 왔다.Lepto를 만드는 데 최선을 다했습니다. 낙담하지 않고 효율적인 도구를 만들어서 이미지 최적화를 쉽게 관리할 수 있습니다.성능과 용이성을 고려하여 명령행 인터페이스를 구축하는 것은 명백하다this great article about Terminal and designby 참조).그러나 GUI는 최적의 압축 품질을 선택하는 데 필요합니다.그래서 나는 이 조화에 왔다.
나는 이메일[email protected]을 통해 모든 건의, 토론, 폭력 비판을 듣고 있다.
읽어주셔서 감사합니다!😄

Dimitrincolas 회사 / lepto 회사

CLI 및 웹 인터페이스를 통해 이미지 편집, 최적화 및 분석이 자동으로 수행됩니다.lepto에 입력과 출력 디렉터리를 주고 플러그인과 옵션을 사용하십시오.그리고 lepto는 그의 작업을 완성했습니다. 원본 파일과 입력 디렉터리의 구조를 보존했습니다.일부 플러그인은 이미지에서 원색과 같은 데이터를 수집하여 JSON 파일에 저장할 수도 있습니다.

이 도구의 주요 목적은 자동으로 이미지 최적화와 분석을 하는 것이다
이 프로젝트는 최근의 것이기 때문에 조심스럽게 사용해야 합니다. 저는 모든 피드백을 들을 것입니다 (우리)
채팅을 통해 따라오지 마세요. 트위터는 안 해요.
ImageMin 뭐가 달라요?하면, 만약, 만약...
대규모 애플리케이션의 경우 ImageMin을 계속 사용하지만 소규모 애플리케이션을 구축하는 경우
정적 사이트, 만약 당신이 자원을 쉽게 최적화하고 싶다면, 당신은
lepto 해봐.
lepto에 입력과 출력 디렉터리, 원하는 플러그인
및 해당 옵션을 사용합니다.그리고 lepto는 그의 일을 합니다. 원본 파일을 보존하십시오.
그리고 입력 디렉터리의 구조입니다.일부 플러그인은 심지어 데이터를 수집할 수 있다
(예: 원색) 및 JSON 파일에 저장합니다.
이미지 최적화에 대한 더 많은 정보를 원하신다면 추천합니다.
놀랍다images.guide...
View on GitHub