HTML 및 Markdown에서 이미지 로드 최적화

이것은 내가 블로그에서 Netlify CMS로 실현한 이미지 최적화에 관한 세 번째 문장이다.
본문에서, 나는 어떻게 나의 사이트에서 이 모든 것을 실현할 것인가를 토론할 것이다.뭐가 효과가 있어, 뭐가 효과가 없어.

HTML 형식의 이미지
HTML 설정을 사용한 이미지부터 시작합니다.
나는 이렇게 했다.

<img
  src="/img/sample_image.png?nf_resize=fit&w=250"
  loading="lazy"
  alt=". . ."
/>

Netlify 대형 미디어에서 최적화된 이미지 로드
나는 폭이 250픽셀로 줄어들고 높이가 비례하는 그림을 불러오기 위해 ?nf_resize&w=250 를 추가했다.
내가 왜 선택했을까250px?렌더링할 때 특정 이미지의 최대 너비를 확인하고 그에 따라 너비를 설정합니다.
내 사이트에서, 이미지는 보통 다른 크기로 표시된다.데스크톱 브라우저의 폭은 고정되어 있습니다.모바일 기기에서는 화면 너비와 연결되어 있기 때문에 30px 에서 236px 까지 (이와 유사하게) 범위가 넓을 수 있기 때문에, 나는 단지 250px 을 선택할 뿐이다. 왜냐하면 이것은 영원히 이것보다 크지 않기 때문이다.
Netlify Large Media에서 이미지 요청에 따라 지정할 수 있는 추가 매개 변수를 docs에서 찾을 수 있습니다.

로드 지연
추가loading="lazy"는 브라우저가 이미지가 뷰포트에 가까울 때만 이미지를 로드해야 함을 나타냅니다.
처음에 설정하지 않았을 때 페이지는 다음과 같이 로드됩니다. 페이지가 열릴 때 브라우저는 첫 번째 HTML을 그리고 현재 페이지에 사용된 모든 이미지를 로드할 때까지 로드합니다.만약 페이지에 많은 그림이 포함되어 있다면, 이것은 시간이 필요하다.때로는 많다.
설정loading="lazy"시 브라우저는 페이지 보기 섹션과 1250px-2500px 아래doc 영역의 이미지만 로드합니다.적어도 크롬 브라우저에서는 이렇게 작동해야 한다.
따라서, 네, 그것은 페이지의 마운트 속도를 크게 높일 수 있습니다. 왜냐하면 필요에 따라 앞의 세 장의 그림을 불러온 다음에 다른 그림을 불러오는 것이 한 번에 더 많은 그림을 불러오는 것보다 빠르기 때문입니다.😉.
그러나 공식 제안here에 따라 페이지의 첫 번째 그림에 이 옵션을 설정하지 않았습니다.이 그림들은 어쨌든 열린 페이지에 불러올 것이다🙂.

시도 중srcset 및 sizes응답 이미지를 로드하려면 Mozilla의 다음 코드를 사용하십시오.

<img srcset="path_to_image.png?nf_resize=fit&w=180 180w,
             path_to_image.png?nf_resize=fit&w=250 250w"
     sizes="(max-width: 400px) 180px,
            250px"
     src="path_to_image.png?nf_resize=fit&w=250"
     alt=". . ."
/>

코드로 볼 때, 이것은 폭이 400픽셀에 달하는 화면에서 브라우저가 다음과 같은 매개 변수를 가진 이미지를 요청해야 한다는 것을 의미한다. ?nf_resize=fit&w=180 180w따라서 폭은 180픽셀입니다.너비가 400픽셀이 넘는 화면에서는 다음 매개 변수가 있는 이미지를 로드해야 합니다. ?nf_resize=fit&w=250 250w.그래서 너비는 250화소일 거예요.
근데 다 소용없어.
(뷰포트) 백분율sizes에 vw을 지정하면 모든 것이 정상적이며 나중에 태그 이미지가 표시됩니다.그러나 px규격에는 아무 소용이 없다.이미지는 항상 다음 매개 변수를 로드합니다. ?nf_resize=fit&w=250 250w🤷‍♂️.
한동안 놀다가 나는 내가 ?nf_resize=fit&w=250 250w 매개 변수만 사용할 수 있다는 것을 알게 되었다.예전처럼 이렇게:

<img
  src="/img/sample_image.png?nf_resize=fit&w=250"
  loading="lazy"
  alt=". . ."
/>

나의 이미지는 모바일 기기에서 매우 민감해져서 서로 다른 레이아웃의 정확성을 찾아내는 것은 상당히 고통스러운 일이다. (적어도 나에게는)
나는 그것들의 크기를 비교하기 위해 몇 개의 사진을 다운로드했다.vw 하나는 114KB이고, 그중 250px 하나는 63,3KB이다.두 배의 차이를 보였지만, 180px 이미지로 페이지 속도 테스트를 실행한 후, 나는 아무런 개선도 보지 못했다🤷‍♂️.

가격 인하에서 최적화 이미지 로드
블로그 게시물에 대한 모든 최적화는 좀 복잡하다.
나의 모든 게시물은 가격 인하법으로 작성되었고 markdown-it 플러그인을 통해 HTML로 변환되었다.
Markdown 언어는 그림에 대한 설명 방식에 대해 약간의 규범과 제한이 있다.다음은 이미지 사양의 구조입니다.180px.우리가 구체적으로 설명할 수 있는 일이 그렇게 많지 않다.다행히도, 우리는 추가 ![Alt text people will see if picture can’t be seen](https://link.of/image “Title to show under the image”) 플러그인을 통해 태그를 HTML로 변환하는 방법을 대량으로 수정할 수 있습니다.

게으른 그림
우선, 표시를 통해 렌더링된 모든 이미지에 markdown-it- 추가할 플러그인을 찾았고 추가했습니다.
여기 있습니다. markdown-it-image-lazy-loading!이미지에 URL 매개 변수를 추가하여 최적화된 이미지를 로드할 계획이라면 추가하기 전에 잠시 기다려 주십시오.내가 다음에 보여줄 플러그인만 사용할 수 있고, 이 플러그인을 설치할 필요가 없다.다음 섹션을 계속합니다.
설정loading=”lazy” 후 대량의 그림을 포함하는 블로그 페이지의 마운트 속도가 대폭 향상되었다.이 속성은 반드시 갖추어야 한다.테이블에서 결과를 봅니다.
loading="lazy" 및 srcset 이미지 포함
그리고 나는 markdown-it-responsive 패키지를 추가하려고 시도했다. 이 패키지는 모든 이미지에 sizes와 srcset 속성을 추가해야 하는데 이것은 전혀 작용하지 않는다.HTML 렌더링 오류와 페이지 끊기☹️.
추가 검색을 통해 이 플러그인을 찾았습니다: markdown-it-modify-token.검사를 한 후에, 나는 그것이 아주 잘 일할 것이라는 것을 알았다. 나는 그것으로 내가 필요로 하는 모든 것을 할 수 있다.
한동안 이 비밀번호가 탄생했다.

modifyToken: function(token, env) {
  switch (token.type) {
    case "image":
      token.attrObj.srcset =
        `${token.attrObj.src}?nf_resize=fit&w=300 300w, ` +
        `${token.attrObj.src}?nf_resize=fit&w=600 600w`;
      token.attrObj.src = token.attrObj.src + "?nf_resize=fit&w=600";
      break;
  }
},

이렇게 지정sizes을 통해 나는 브라우저에 다음과 같이 말했다. 여기는 두 개의 이미지가 있는데 너비는 각각 srcset와 300px이고 100%의 뷰포트 너비에 따라 어떤 이미지를 불러올지 스스로 결정한다.
먼저 다음과 같이 600px 속성을 추가했습니다.

token.attrObj.sizes = “100vw”;

그러나 크리스 코이어article의 글을 읽은 뒤 삭제했다.이것은 브라우저의 기본값이기 때문에 따로 지정할 필요가 없습니다.
이것은 실행할 수 있지만, 이런 행위는 좀 이상하다. (적어도 나에게는)화면 너비가 size인 경우 브라우저는 너비가 200px인 이미지를 로드하지만 화면 너비가 300px인 경우 너비가 250px인 이미지를 로드합니다... 이해가 되지 않습니다.😐. 600px에서 다시 지정하면sizes 이미지만 로드됩니다.
다음은 제가 시도한 코드입니다.

token.attrObj.sizes = "(max-width: 400px) 300px, 600px"

네, 브라우저가 언제 무엇을 불러올지 결정하도록 크기를 px 로 남겨 두겠습니다.브라우저가 스마트했으면 좋겠어요.
앞서 쓴 바와 같이 플러그인의 사용법을 삭제할 수 있습니다.

modifyToken: function(token, env) {

}

다음만 추가하면 됩니다.

token.attrObj.loading = "lazy";

600px:

switch (token.type) {
  case "image":
    token.attrObj.srcset =
      `${token.attrObj.src}?nf_resize=fit&w=300 300w, ` +
      `${token.attrObj.src}?nf_resize=fit&w=600 600w`;
    token.attrObj.src = token.attrObj.src + "?nf_resize=fit&w=600";

    // This will make all images loading lazy
    token.attrObj.loading = "lazy";
    break;
}

참고로, 항상 크기의 그림을 불러오고 싶으면 100vw setter를 삭제하십시오.보아하니 이렇다.

switch (token.type) {
  case "image":
    token.attrObj.src = token.attrObj.src + "?nf_resize=fit&w=600";
    // token.attrObj.loading = "lazy";
    break;
}

기억하는 바와 같이, 마운트 지연 없이 첫 번째 그림을 만드는 것이 좋습니다. 하지만Markdown의 그림을 사용하는 것은 좀 어렵습니다.가격 인하를 위해 별도의 논리를 써야 하는데, 시간 투자는 나에게 정말 가치가 없다.네, 구글의 말대로 실적이 소폭 하락했지만 회사를 파산시키지 않을 것이라고 생각합니다.
이것이 바로 내가 나의 사이트에 이미지를 더 잘 불러오기 위해 한 모든 것이다.에서 페이지 속도 향상을 확인할 수 있습니다.그것들은 매우 튼튼하다😉.
제 블로그 창작을 계속 공유하는 과정에서 저는 더 많은 비하인드를 보고 싶습니다.
그나저나 왜 case "image":와srcset만 함께 사용할 수 있는지 아시면 댓글로 공유해 주세요.나 진짜 관심 있어!