어떻게 eleventy(11ty)에서 이미지를 최적화합니까

22663 단어 webdevtutorialjavascript
Originally Published on my blog
이미지가 있는 사이트를 구축하려면 이를 최적화해야 한다
어떤 내용의 이전도 피하고 좋은 사용자 체험을 제공한다.
이를 실현하려면 이미지의 형식을 압축하고 크기를 조정하며 변환해야 합니다.
본고에서 우리는 어떻게 eleventy에서 자동으로 이미지를 생성하는지 연구할 것이다
정적 사이트 사용eleventy-img 및sharp 사이트 생성.

시작할 기본 항목 만들기


새 디렉터리를 만들고 11ty-img-example 또는 원하는 이름으로 명명합니다.
그런 다음 실행
yarn init -y
원하는 경우 npm 를 사용할 수 있습니다.
현재 설치eleventy하고 인덱스를 만듭니다.회사 명
루트에 기본 html 태그를 사용합니다.
yarn add -D @11ty/eleventy
touch index.njk

<!-- index.njk -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>11ty img example</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>
package.json 파일을 열고 개발 및 구축 스크립트를 추가합니다.
// package.json

"scripts": {
  "dev": "eleventy --serve",
  "build": "eleventy"
}

브라우저에서 항목 실행


원하는 단말기를 열고 달리기
yarn dev
이제 브라우저에서 열기 localhost:8080이것은 사용자 정의 eleventy 설정이 없는 상태에서 일해야 합니다.

이미지 표시


이미지를 가져와서 images 디렉토리에 배치합니다.
및 내부 index.njk 에서 주제를 표시합니다.
ls images/

518k   0001.jpg
2.6M   0002.jpg
1.7M   0003.jpg
368k   0004.jpg
679k   0005.jpg
556k   0006.jpg
602k   0007.jpg
1.6M   0008.jpg
1.4M   0009.jpg

<!-- index.njk -->
<body>
  <img src="/images/0001.jpg" alt="image no 01" />
  <img src="/images/0002.jpg" alt="image no 02" />
  <!-- ... -->
</body>
브라우저를 엽니다. 그림을 렌더링해서는 안 됩니다.
네, 맞아요.😀 왜냐하면 eleventy 처리할 수 없기 때문이다
css, js 또는 이미지 등 자산, 따라서 우리는 이것에 대해 설정해야 한다
우리끼리.
루트 디렉터리에 .eleventy.js 파일을 만들고,
그리고 다음과 같이 쓰십시오.
module.exports = (cfg) => {
  cfg.addPassthroughCopy("images");
}
현재 디렉터리의 모든 내용
생성 디렉토리로 복사합니다.
서버를 다시 시작하고 브라우저로 돌아가기
모든 것이 정상이어야 한다.

최적화 없이 이미지 성능 테스트


어떤 최적화를 진행하기 전에 그림이 어떻게 작동하는지 봅시다.
devtool 내의 네트워크 옵션 카드를 열고 images 을 네트워크 시뮬레이션으로 설정합니다.
내 예에서 모든 이미지와 그 중 일부 이미지를 렌더링하려면 fast 3G 이 필요하다
이미지 크기가 50s 보다 큽니다.그래서 저희가 방법을 찾아야 돼요.
더 빨리 하라고.

2mb 플러그인 추가


사용할 때가 되었습니다 eleventy-img. 이 플러그인은
eleventy 팀 here 에서 환매를 찾을 수 있습니다.
우리의 프로젝트에 그것을 설치하다.
yarn add -D @11ty/eleventy-img
eleventy-img 파일을 열고 이전에 작성한 줄을 삭제한 다음 다음 다음 코드를 추가합니다.
// .eleventy.js

const Image = require("@11ty/eleventy-img");

module.exports = (cfg) => {
  cfg.addNunjucksAsyncShortcode("Image", async (src, alt) => {
    if (!alt) {
      throw new Error(`Missing \`alt\` on myImage from: ${src}`);
    }

    let stats = await Image(src, {
      widths: [25, 320, 640, 960, 1200, 1800, 2400],
      formats: ["jpeg", "webp"],
      urlPath: "/images/",
      outputDir: "./_site/images/",
    });

    let lowestSrc = stats["jpeg"][0];

    const srcset = Object.keys(stats).reduce(
      (acc, format) => ({
        ...acc,
        [format]: stats[format].reduce(
          (_acc, curr) => `${_acc} ${curr.srcset} ,`,
          ""
        ),
      }),
      {}
    );

    const source = `<source type="image/webp" srcset="${srcset["webp"]}" >`;

    const img = `<img
      loading="lazy"
      alt="${alt}"
      src="${lowestSrc.url}"
      sizes='(min-width: 1024px) 1024px, 100vw'
      srcset="${srcset["jpeg"]}"
      width="${lowestSrc.width}"
      height="${lowestSrc.height}">`;

    return `<div class="image-wrapper"><picture> ${source} ${img} </picture></div>`;
  });
}
코드를 분해하고 작동 원리를 알아보자
  • .eleventy.js
    • eleventy는 addNunjucksAsyncShortcodelet이라는 기능을 가지고 있다
    사용자 정의 함수를 작성하여 템플릿 엔진을 확장할 수 있습니다.
    우리의 예에서, 우리는 새로운 짧은 코드를 가지고 있는데, 우리는 통과할 수 있다
    글쓰기:
    {% Image "/images/00.jpg", "this is an alt description" %}
  • shortcodes
    • 우리는 srcurl, 형식, 다양한 폭을 그림 플러그인에 전달합니다.
    따라서 각 이미지에 다양한 크기와 형식을 제공합니다.
  • stats = new Image(...)
    • const srcset = ... 결과는 다음과 같다.
    stats = {
  jpeg: [
    {
      url: '...',
      src: '...',
      srcset: '...'
    }
  ],
  webp: [
    ...
  ]
}
    우리는 stats 함수를 사용하여 모든 크기의 srcset을 하나의 srcset 문자열로 변환해야 하기 때문에
    우리는 그것을 코드에 주입할 수 있다.
    그래서 변수의 결과reduce
    srcset = {
  jpeg: '<srcset>'
  webp: '<srcset>'
}
  • srcset 및 const source = ...
    • const img = ... 형식을 webp 기본 이미지 유형으로, source 표시를 반환하려면 jpg 형식을 사용합니다.
    이제 우리는 전체 img 로 돌아갈 수 있다.

    이미지 사용 후 이미지 테스트


    열기 eleventy-img 및 모든 태그 바꾸기 index.njk
    <!-- index.njk -->

<!-- ... -->
{% Image "images/0001.jpg", "image no 01" %}
{% Image "images/0002.jpg", "image no 02" %}
{% Image "images/0003.jpg", "image no 03" %}
{% Image "images/0004.jpg", "image no 04" %}
<!-- ... -->

    PS: you have to write image paths include the full path from the root of the project to make it works.


    서버를 다시 시작하고 브라우저로 이동합니다.그런 다음 네트워크 탭을 다시 엽니다.
    기중기💥 이 기간 동안 모든 그림이 img 에 불러옵니다. 그림이 없습니다.
    크기5s보다 큽니다.

    지연 로드 및 흐림 효과 추가


    이것은 추가 절차입니다. 사용을 통해
    인라인 120kb 이미지를 이미지 자리 표시자로 사용하고
    javascript는 지원되지 않는 브라우저의 백업 방안입니다.
    현지 게으름뱅이vanilla-lazyload.
    희미한 내부 연결base64 이미지를 얻기 위해sharp 패키지를 설치합니다
    yarn add -D sharp
    base64importsharp 패키지에 다음 코드를 추가합니다.
    // .eleventy.js

const sharp = require('sharp');

// ...

const placeholder = await sharp(lowestSrc.outputPath)
  .resize({ fit: sharp.fit.inside })
  .blur()
  .toBuffer();

const base64Placeholder = `data:image/png;base64,${placeholder.toString(
  "base64"
)}`;

// ...
    그리고 .eleventy.js, src 및 srcset 을 resize, data-src 및 data-srcset 로 교체합니다.data-resize 태그의 src 속성을 <img> 에 추가합니다.
    변경된 최종 코드:
    const source = `<source type="image/webp" data-srcset="${srcset["webp"]}" >`;

const img = `<img
  class="lazy"
  alt="${alt}"
  src="${base64Placeholder}"
  data-src="${lowestSrc.url}"
  data-sizes='(min-width: 1024px) 1024px, 100vw'
  data-srcset="${srcset["jpeg"]}"
  width="${lowestSrc.width}"
  height="${lowestSrc.height}">`;
    앞에서 말한 바와 같이,eleventy는 html만 처리한다
    템플릿 엔진, 그래서 우리는 src="${base64Placeholder}" 의 script 라벨을 사용하여 type="module" 패키지를 사용할 것이다.vanilla-lazyload 본문 끝 표시 index.njk 전에 이 스크립트를 추가합니다.
    <script type="module" async>
  import Lazyload from "https://cdn.skypack.dev/vanilla-lazyload";
  const lazyload = new Lazyload();
</script>
    img 태그에 이 스타일 추가
    <style>
img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
</style>

    게으른 불러온 테스트 이미지


    보다🎉, 현재, 우리는 당신의 사이트에 보기 좋고 빠른 이미지를 하나 가지고 있습니다.

    결론


    이제 플러그인</body> 및 eleventy-img 패키지를 통합하는 방법을 알게 되었습니다.
    이미지 최적화에 대한 더 많은 정보를 필요로 한다면, eleventy 사이트를 사용하는 것을 권장합니다.
    검사vanilla-lazyload저자의blog.
    github에서 완전한 예시를 찾을 수 있습니다

    22 마하무드 / eleventy 이미지 예


    이것은 나의 블로그 문장의 완전한 예이다
    linux 고정 사용자 접근 IP 제한
    에이전트 IP

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage