內聯圖像預覽具有鋒利，藍色和lambda功能

網站和Web應用程序加載通常會遭受內容反映：圖像在周圍內容後加載，從而導致佈局震動。這種令人沮喪的用戶體驗可以得到緩解。雖然React的懸念提供了解決方案，但它通過延遲所有內容直到圖像滿載來犧牲性能。更好的方法？立即顯示模糊的圖像預覽，加載後無縫地被高分辨率圖像替換。

漸進的jpegs似乎是答案，提供模糊的初始渲染，然後進行逐步完善。但是，即使是漸進式JPEG也需要等待初始數據，從而導致相同的初始內容回流。

本文探討了兩種替代方法：創建自定義模糊預覽並利用Blurhash。

使用的庫：

• JIMP（版本0.16.1）
• Blurhash（版本1.1.5）
• 夏普（版本0.30.3）

方法1：生成自定義預覽

我們可以將基本64編碼的低質量圖像預覽直接嵌入base64編碼的base64編碼，而不是依靠圖像URL。雖然編碼的base64通常會導致大型文件尺寸，但小型模糊預覽仍然易於管理。該預覽會立即顯示，一旦加載，就被高分辨率圖像所取代。

以下resizeImage函數（簡化為簡潔）使用JIMP創建模糊預覽：

函數resizeImage（src，maxWidth，質量）{
  返回新的承諾（res => {
    jimp.Read（src，async函數（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 =等待PreviewImage.getBase64Async（previewimage.getMime（））;

      res（{狀態：“成功”，image，preview}）;
    }）;
  }）;
}

此預覽雖然不是很小，但比原始圖像要小得多。相應的反應代碼（簡化）句柄顯示預覽並使用完整分辨率圖像交換：

 // ... React組件代碼...

方法2：使用Blurhash改進（和更好的替代方案）

雖然最初建議，但Blurhash在通過Base83編碼生成極小的預覽時，需要客戶端JavaScript和<canvas></canvas>標籤，使其不太理想服務器端渲染（SSR）框架，例如Next.js和Sveltekit。

優越的選擇是plaiceholder 。它利用尖銳的，需要類似的lambda安裝注意事項，如稍後所述，但生成了Tiny Base64預覽。通過跟踪圖像的尺寸並應用模糊過濾器，它可以實現與Blurhash相當的結果，同時完全適合SSR友好。預覽可以使用CSS在真實圖像下顯示，提供無縫過渡。

原始Blurhash實施（不推薦）：

尖銳的庫可以生成Blurhash預覽。對於AWS Lambda部署，請使用此安裝命令：

 “ install-deps”：“ npm i && sharp_ignore_global_libvips = 1 npm i -ark = x64  -  platform = linux sharp”

以下功能生成Blurhash預覽：

從“ Blurhash”中導入{encode，isblurhashvalid};
const sharp = require（“夏普”）;

導出異步函數getblurhashpreview（src）{
  // ...（尖銳的處理和Blurhash編碼）...
}

然後， PreviewCanvas組件使用帆布API解碼並呈現Blurhash預覽。

結論：

在圖像加載過程中防止內容回流可增強用戶體驗。生成自定義模糊預覽或使用plaiceholder在性能和視覺平滑度之間提供平衡，為簡單地延遲內容渲染的替代方案提供了一個較高的替代方案，直到加載了所有圖像。選擇最適合您項目需求和框架的方法。

以上是內聯圖像預覽具有鋒利，藍色和lambda功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！