Sharp, Blurhash 및 Lambda 기능으로 인라인 이미지 미리보기

웹 사이트 및 웹 앱로드는 종종 컨텐츠 리플 로우로 고통받습니다. 주변 컨텐츠 후 이미지로드하여 레이아웃이 바뀌 었습니다. 이 실망스러운 사용자 경험은 완화 될 수 있습니다. React의 서스펜스는 솔루션을 제공하지만 이미지가 완전히로드 될 때까지 모든 컨텐츠를 지연시켜 성능을 희생합니다. 더 나은 접근? 흐릿한 이미지 미리보기를 즉시 표시하면로드시 고해상도 이미지로 원활하게 대체됩니다.

프로그레시브 JPEG는 대답처럼 보일 수 있으며, 초기 렌더링과 점진적인 정제를 제공합니다. 그러나 프로그레시브 JPEG조차도 초기 데이터를 대기해야하므로 동일한 초기 컨텐츠 리플 로우로 이어집니다.

이 기사는 두 가지 대안 방법을 탐구합니다. 사용자 정의 흐릿한 미리보기 생성 및 Blurhash 활용.

사용 된 라이브러리 :

• Jimp (버전 0.16.1)
• BlurHash (version 1.1.5)
• 샤프 (버전 0.30.3)

방법 1 : 사용자 정의 미리보기 생성

이미지 URL에 의존하는 대신 Base64- 인코딩 된 저품질의 흐릿한 이미지 미리보기를 JavaScript에 직접 포함시킬 수 있습니다. Base64 인코딩은 일반적으로 큰 파일 크기로 이어지지 만 작고 흐릿한 미리보기는 여전히 관리 가능합니다. 이 미리보기는 즉시 표시되며 일단로드 된 고해상도 이미지로 대체됩니다.

다음 resizeImage 함수 (간단한 경우 단순화)는 Jimp를 사용하여 흐릿한 미리보기를 만듭니다.

 함수 resizeImage (SRC, MaxWidth, 품질) {
  새로운 약속을 반환합니다 (res => {
    jimp.read (src, 비동기 함수 (err, image) {
      if (image.bitmap.width> maxWidth) {
        image.resize (maxwidth, jimp.auto);
      }
      image.quality (품질);

      const previewimage = image.clone ();
      previewimage.quality (25) .Blur (8);
      const preview = await previewimage.getBase64Async (previewImage.getMime ());

      res ({status : "success", image, preview});
    });
  });
}

이 미리보기는 작지는 않지만 원래 이미지보다 훨씬 작습니다. 해당 반응 코드 (단순화 된)는 미리보기를 표시하고이를 전체 해상도 이미지로 바꾸는 것을 처리합니다.

 // ... 컴포넌트 코드를 반응 ...

방법 2 : Blurhash로 개선 (및 더 나은 대안)

처음 제안했지만 Blurhash는 Base83 인코딩을 통해 매우 작은 미리보기를 생성하는 동안 클라이언트 측 JavaScript가 필요하며<canvas></canvas> 태그, SSR (Server-Side Rendering) 프레임 워크에 덜 이상적입니다. JS 및 Sveltekit.

우수한 대안은 Plaiceholder 입니다. 나중에 설명 된 것과 유사한 Lambda 설치 고려 사항이 필요한 Sharp를 사용하지만 작은 Base64 미리보기를 생성합니다. 이미지의 크기를 추적하고 블러 필터를 적용함으로써 Blurhash와 비슷한 결과를 얻을 수 있지만 SSR 친화적입니다. 미리보기는 CSS를 사용하여 실제 이미지 아래에 표시되어 원활한 전환을 제공 할 수 있습니다.

원래 Blurhash 구현 (권장 덜 권장) :

Sharp Library는 Blurhash 미리보기를 생성 할 수 있습니다. AWS Lambda 배포의 경우이 설치 명령을 사용하십시오.

 "install-deps": "npm i && SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm i --arch=x64 --platform=linux sharp"

다음 함수는 Blurhash 미리보기를 생성합니다.

 "blurhash"에서 import {encode, isblurhashvalid};
const sharp = 요구 사항 ( "Sharp");

Async 함수 내보내기 getBlurhashpreview (src) {
  // ... (날카로운 가공 및 블루 해시 인코딩) ...
}

PreviewCanvas 구성 요소는 Canvas API를 사용하여 Blurhash 미리보기를 디코딩하고 렌더링합니다.

결론:

이미지 로딩 중에 콘텐츠 리플 로우 방지하면 사용자 경험이 향상됩니다. 맞춤형 흐릿한 미리보기를 생성하거나 Plaiceholder를 사용하면 성능과 시각적 부드러움 사이의 균형을 제공하여 모든 이미지가로드 될 때까지 컨텐츠 렌더링을 지연시키는 데 우수한 대안을 제공합니다. 프로젝트의 요구와 프레임 워크에 가장 적합한 방법을 선택하십시오.

위 내용은 Sharp, Blurhash 및 Lambda 기능으로 인라인 이미지 미리보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!