Inline -Bildvorschau mit scharfen, Blurhash- und Lambda -Funktionen

Das Laden von Website- und Web -Apps leidet häufig unter dem Inhaltsreflow: Bilder laden nach dem umgebenden Inhalt und verursachen Verschiebungen im Layout. Diese frustrierende Benutzererfahrung kann gemindert werden. Während die Spannung von React eine Lösung bietet, opfert sie die Leistung, indem sie alle Inhalte verzögert, bis die Bilder vollständig geladen sind. Ein besserer Ansatz? Die sofort unscharfe Bildvorschau anzeigen sofort, nahtlos durch die hochauflösenden Bilder beim Laden ersetzt.

Progressive JPEGs scheinen die Antwort zu sein, die ein verschwommenes erstes Rendering bietet, gefolgt von einer schrittweisen Verfeinerung. Selbst progressive JPEGs müssen jedoch auf anfängliche Daten warten, was zu demselben anfänglichen Inhaltsausfall führt.

In diesem Artikel werden zwei alternative Methoden untersucht: Erstellen benutzerdefinierter verschwommener Vorschau und Nutzung von Blurhash.

Bibliotheken verwendet:

• JIMP (Version 0.16.1)
• Blurhash (Version 1.1.5)
• Scharf (Version 0.30.3)

Methode 1: benutzerdefinierte Vorschau generieren

Anstatt sich auf Bild-URLs zu verlassen, können wir Basis64-kodierter, minderwertiges und verschwommenes Bild-Vorschau direkt in unser JavaScript einbetten. Während die Codierung von Base64 normalerweise zu großen Dateigrößen führt, bleibt eine kleine, verschwommene Vorschau überschaubar. Diese Vorschau wird sofort angezeigt und durch das hochauflösende Bild nach dem Laden ersetzt.

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

 Funktion RESIZEIMAGE (SRC, Maxwidth, Qualität) {
  Neues Versprechen zurückgeben (res => {
    JIMP.READ (SRC, ASYNC -Funktion (Err, Bild) {
      if (image.bitmap.width> maxwidth) {
        Image.Resize (Maxwidth, Jimp.auto);
      }
      Bild.qualität (Qualität);

      const previewImage = image.clone ();
      PreviewImage.Quality (25) .Blur (8);
      const preview = warte previewImage.getBase64async (previewImage.getMime ());

      Res ({Status: "Erfolg", Bild, Vorschau});
    });
  });
}

Diese Vorschau ist zwar nicht winzig, ist jedoch deutlich kleiner als das Originalbild. Mit dem entsprechenden React-Code (vereinfacht) wird die Vorschau angezeigt und mit dem Bild mit voller Auflösung ausgetauscht:

 // ... den Komponentencode reagieren ...

Methode 2: Verbesserung mit Blurhash (und einer besseren Alternative)

Obwohl Blurhash ursprünglich vorgeschlagen wurde, erfordert der clientseitige JavaScript und sorgt für extrem kleine Vorschau über Base83-Codierung<canvas></canvas> Tags, so dass es weniger ideal für serverseitige Rendering (SSR) -Rahmenbedingungen wie Next.js und SufleKit.

A superior alternative is Plaiceholder . Es verwendet Sharp und erfordert ähnliche Überlegungen zur Lambda -Installation wie später beschrieben, erzeugt jedoch winzige Basis64 -Vorschau. Durch die Verfolgung der Abmessungen des Bildes und die Anwendung eines Unschärfungsfilters erzielt es Ergebnisse, die mit Blurhash vergleichbar sind und gleichzeitig vollständig ssr-freundlich sind. Die Vorschau kann unter dem realen Bild mit CSS angezeigt werden, wodurch ein nahtloser Übergang bereitgestellt wird.

Original Blurhash -Implementierung (weniger empfohlen):

Die scharfe Bibliothek kann Blurhash -Vorschau erzeugen. Verwenden Sie diesen Installationsbefehl für die AWS Lambda -Bereitstellung:

 "installdeps": "npm i && sharp_ignore_global_libvips = 1 npm i --arch = x64 --Platform = Linux Sharp"

Die folgende Funktion erzeugt die Blurhash -Vorschau:

 importieren {codieren, isblurhashvalid} aus "Blurhash";
const Sharp = Request ("Sharp");

Exportieren Sie die asynchronisierte Funktion getBlurHashPreview (SRC) {
  // ... (scharfe Verarbeitung und Blurhash -Codierung) ...
}

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

Abschluss:

Das Verhinderung des Inhalts -Reflows während der Bildbelastung verbessert die Benutzererfahrung. Das Erzeugen benutzerdefinierter verschwommener Vorschau oder die Verwendung von Plaiceholder bietet ein Gleichgewicht zwischen Leistung und visueller Glätte und bietet eine überlegene Alternative, um das Rendern des Inhalts einfach zu verzögern, bis alle Bilder geladen sind. Wählen Sie die Methode, die den Bedürfnissen und Framework Ihres Projekts am besten entspricht.

Das obige ist der detaillierte Inhalt vonInline -Bildvorschau mit scharfen, Blurhash- und Lambda -Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!