Inline Image Previews with Sharp, BlurHash, and Lambda Functions

Website and web app loading often suffers from content reflow: images load after the surrounding content, causing jarring shifts in layout. This frustrating user experience can be mitigated. While React's Suspense offers a solution, it sacrifices performance by delaying all content until images are fully loaded. A better approach? Displaying blurry image previews immediately, seamlessly replaced by the high-resolution images upon loading.

Progressive JPEGs might seem like the answer, offering blurry initial rendering followed by gradual refinement. However, even progressive JPEGs require a wait for initial data, leading to that same initial content reflow.

This article explores two alternative methods: creating custom blurry previews and leveraging BlurHash.

Libraries Used:

• Jimp (version 0.16.1)
• BlurHash (version 1.1.5)
• Sharp (version 0.30.3)

Method 1: Generating Custom Previews

Instead of relying on image URLs, we can embed Base64-encoded, low-quality, blurry image previews directly into our JavaScript. While Base64 encoding typically leads to large file sizes, a small, blurry preview remains manageable. This preview is displayed immediately, replaced by the high-resolution image once loaded.

The following resizeImage function (simplified for brevity) uses Jimp to create a blurry preview:

function resizeImage(src, maxWidth, quality) {
  return new Promise(res => {
    Jimp.read(src, async function (err, image) {
      if (image.bitmap.width > maxWidth) {
        image.resize(maxWidth, Jimp.AUTO);
      }
      image.quality(quality);

      const previewImage = image.clone();
      previewImage.quality(25).blur(8);
      const preview = await previewImage.getBase64Async(previewImage.getMIME());

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

This preview, while not tiny, is significantly smaller than the original image. The corresponding React code (simplified) handles displaying the preview and swapping it with the full-resolution image:

// ... React component code ...

Method 2: Improving with BlurHash (and a better alternative)

While initially suggested, BlurHash, while generating extremely small previews via Base83 encoding, requires client-side JavaScript and <canvas></canvas> tags, making it less ideal for server-side rendering (SSR) frameworks like Next.js and SvelteKit.

A superior alternative is Plaiceholder. It utilizes Sharp, requiring similar Lambda installation considerations as described later, but generates tiny base64 previews. By tracking the image's dimensions and applying a blur filter, it achieves results comparable to BlurHash, while being fully SSR-friendly. The preview can be displayed under the real image using CSS, providing a seamless transition.

Original BlurHash Implementation (Less Recommended):

The Sharp library can generate BlurHash previews. For AWS Lambda deployment, use this installation command:

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

The following function generates the BlurHash preview:

import { encode, isBlurhashValid } from "blurhash";
const sharp = require("sharp");

export async function getBlurhashPreview(src) {
  // ... (Sharp processing and BlurHash encoding) ...
}

The PreviewCanvas component then decodes and renders the BlurHash preview using the Canvas API.

Conclusion:

Preventing content reflow during image loading enhances user experience. Generating custom blurry previews or using Plaiceholder offers a balance between performance and visual smoothness, providing a superior alternative to simply delaying content rendering until all images are loaded. Choose the method that best suits your project's needs and framework.

The above is the detailed content of Inline Image Previews with Sharp, BlurHash, and Lambda Functions. For more information, please follow other related articles on the PHP Chinese website!