(가이드) Gatsby-Image를 사용한 중간 스타일 이미지 블러업 로드

구독 벽이 성가실 수 있지만 미디엄이 꽤 훌륭한 블로깅 플랫폼이라고 말하는 것이 타당하다고 생각합니다. 사용이 간편하고 기능이 탑재되어 있지만 가장 중요한 것은 정말 빠릅니다.

웹 사이트를 빠르게 만드는 데는 여러 가지가 필요하지만( Check Web.Dev for more tips ) Medium이 특히 잘 수행하는 한 가지는 프로그레시브 이미지 로딩입니다.

LQIP(Low Quality Image Placeholder) 패턴이라고도 하는 프로그레시브 이미지 로딩은 이미지의 저품질 버전을 먼저 로드한 다음 기본 페이지 콘텐츠가 로드되면 전체 크기 버전을 지연 로드하는 기술입니다.

이것이 갖는 효과는 스켈레톤 콘텐츠를 사용하는 것과 약간 유사하며 웹사이트의 인지된 성능에 놀라운 일을 할 수 있고 첫 번째 콘텐츠 페인트(FCP) 시간을 줄이는 데 도움이 될 수 있습니다. GatsbyJS LQIP는 Gatsby-Image 플러그인과 함께 즉시 사용 가능하지만 Gatsby 외부에서 사용하려면 자유롭게 체크아웃하십시오lazysizes.

그러나 Gatsby에서는 흐림 효과가 기본적으로 활성화되어 있지 않으며 너무 자주 간과됩니다. 이 때문에 많은 사이트에서 흐릿한 이미지 대신 픽셀화되거나 압축된 이미지 버전이 표시되지 않습니다. 하지만 placeholderStyle 속성 덕분에 이 문제를 수정하는 것은 실제로 JSX의 한 줄을 추가하는 것만큼 쉽습니다.

import Img from "gatsby-image";

<Img
    fluid={someFluidSrcImage}
    title={imageTitle}
    placeholderStyle={{ filter: `blur(1.5rem)` }}
  />

placeholderStyle 속성을 추가하여 자리 표시자로 로드되는 이미지에 스타일을 적용할 수 있으며 Gatsby가 나머지를 처리합니다! 흐림 효과, 픽셀화 또는 원하는 다른 종류의 CSS 필터를 추가합니다. 최종 결과는 다음과 같습니다.


궁금한 점이 있으면 알려주세요. 도움이 되었기를 바랍니다.

maxphillipsdev.com의 내 블로그에 원래 게시됨