Aperçu d'image en ligne avec des fonctions Sharp, Blurhash et Lambda

Le chargement du site Web et de l'application Web souffre souvent de reflux de contenu: Chargement des images après le contenu environnant, provoquant des changements de disposition. Cette expérience utilisateur frustrante peut être atténuée. Bien que le suspense de React offre une solution, il sacrifie les performances en retardant tout le contenu jusqu'à ce que les images soient pleinement chargées. Une meilleure approche? Affichage des aperçus de l'image floue immédiatement, remplacée de manière transparente par les images haute résolution lors du chargement.

Les JPEG progressifs peuvent sembler être la réponse, offrant un rendu initial flou, suivi d'un raffinement progressif. Cependant, même les JPEG progressifs nécessitent une attente pour les données initiales, conduisant à la même reflux de contenu initial.

Cet article explore deux méthodes alternatives: la création de prévisualisation floue personnalisée et tirant parti de Blurhash.

Bibliothèques utilisées:

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

Méthode 1: générer des aperçus personnalisés

Au lieu de s'appuyer sur les URL de l'image, nous pouvons intégrer des prévisualistes floues codées en base64, de faible qualité et floues directement dans notre JavaScript. Alors que le codage Base64 conduit généralement à des tailles de fichiers importantes, un petit aperçu flou reste gérable. Cet aperçu s'affiche immédiatement, remplacé par l'image haute résolution une fois chargé.

La fonction resizeImage suivante (simplifiée pour Brevity) utilise Jimp pour créer un aperçu flou:

 fonction redimensimage (src, maxwidth, qualité) {
  retourner la nouvelle promesse (res => {
    Jimp.read (src, fonction async (err, image) {
      if (image.bitmap.width> maxwidth) {
        image.resize (maxwidth, jimp.auto);
      }
      Image.quality (qualité);

      const aperviewImage = image.clone ();
      préviewimage.quality (25) .blur (8);
      const aperview = wait aperviewImage.getBase64Async (aperviewImage.getMime ());

      res ({status: "succès", image, prévisualisation});
    });
  });
}

Cet aperçu, bien que non minuscule, est nettement plus petit que l'image d'origine. Le code de réact correspondant (simplifié) s'affiche affichant l'aperçu et l'échange avec l'image en pleine résolution:

 // ... réagir le code des composants ...

Méthode 2: Amélioration avec Blurhash (et une meilleure alternative)

Bien que initialement suggéré, Blurhash, tout en générant des aperçus extrêmement petits via l'encodage de la base83, nécessite JavaScript côté client et<canvas></canvas> Tags, ce qui le rend moins idéal pour les frameworks de rendu côté serveur (SSR) comme Next.js et sveltekit.

Une alternative supérieure est le support de plice . Il utilise une netteté, nécessitant des considérations d'installation de Lambda similaires, comme décrit plus loin, mais génère de minuscules aperçus de base64. En suivant les dimensions de l'image et en appliquant un filtre flou, il obtient des résultats comparables à Blurhash, tout en étant entièrement adapté aux SSR. L'aperçu peut être affiché sous l'image réelle à l'aide de CSS, fournissant une transition transparente.

Implémentation originale de Blurhash (moins recommandée):

La bibliothèque Sharp peut générer des aperçus de Blurhash. Pour le déploiement AWS Lambda, utilisez cette commande d'installation:

 "Install-Deps": "npm i && sharp_ignore_global_libvips = 1 npm i --arch = x64 --platform = linux sharp"

La fonction suivante génère l'aperçu Blurhash:

 import {Encoder, IsBlurhashValid} de "blurhash";
const Sharp = require ("Sharp");

Exporter la fonction asynchrone getBlurHashPreview (src) {
  // ... (Traitement net et codage Blurhash) ...
}

Le composant Aperçu PreviewCanvas décode et rend l'aperçu Blurhash à l'aide de l'API Canvas.

Conclusion:

La prévention du reflux de contenu pendant le chargement de l'image améliore l'expérience utilisateur. La génération de prévisualisations floues personnalisées ou l'utilisation de Paiceholder offre un équilibre entre les performances et la douceur visuelle, offrant une alternative supérieure pour simplement retarder le rendu de contenu jusqu'à ce que toutes les images soient chargées. Choisissez la méthode qui convient le mieux aux besoins et au cadre de votre projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!