Chez imgix, nous accordons une grande importance à l'expérience utilisateur et aux performances des pages. Auparavant, nous avons discuté . Essentiellement, il diffère le chargement des images hors écran jusqu'à ce que le visiteur fasse défiler et que les images entrent dans la fenêtre d'affichage. Il permet de charger moins d'images à un moment donné et accélère le temps de chargement de chaque image. du chargement différé et de ses avantages sur Core Web Vitals Cependant, s'il n'est pas correctement configuré, le chargement paresseux peut augmenter l'instabilité de la mise en page, ce qui entraîne une dégradation de la métrique Cumulative Layout Shift, qui est l'un des trois Core Web Vitals. Pour améliorer la vitesse de la page tout en minimisant le Cumulative Layout Shift, la meilleure solution consiste à combiner le chargement différé avec . BlurHash Dans cet article, nous expliquerons ce qu'est BlurHash et comment l'appliquer à vos images à l'aide d'imgix. Que sont les espaces réservés d'image et BlurHash ? Les espaces réservés sont une excellente option pour améliorer les temps de chargement perçus et offrir une meilleure expérience utilisateur lorsqu'une connexion ou un site tarde à charger les images. BlurHash est un algorithme qui vous permet de créer une version compacte d'un espace réservé d'image. L'algorithme crée une chaîne de caractères qui encode une représentation floue de l'image, le nombre de caractères étant déterminé par la qualité de l'image. La chaîne est suffisamment courte pour que vous puissiez la servir directement dans le balisage de votre page, puis la chaîne peut être décodée dans l'image floue, sans avoir à récupérer et à télécharger un fichier image. L'un des principaux avantages de BlurHash est que vous pouvez convertir des fichiers image volumineux en une plus petite quantité de données afin qu'une représentation floue de l'image apparaisse pendant le chargement du fichier d'origine. Un ingénieur de Wolt tout en essayant de trouver une meilleure solution pour le chargement des images sur une connexion Internet plus lente. a eu l'idée de BlurHash Comment utiliser la fonction BlurHash Pour créer une image floue, ajoutez simplement à n'importe quelle image pour obtenir la chaîne BlurHash. Une fois que vous avez la chaîne BlurHash, vous pouvez l'utiliser dans le composant . Le composant est responsable du décodage du hachage en une image pouvant être affichée. fm=blurhash BlurHash BlurHash Dans cet exemple particulier, le composant React génère un élément canvas dans le balisage final. Remarque : le balisage généré peut différer légèrement en fonction de la bibliothèque ou du décodeur de framework utilisé. BlurHash import './App.css'; import Imgix from "react-imgix"; import { Blurhash } from "react-blurhash"; function App() { return ( <div className="App"> <section className="App-header"> <Blurhash hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU" width={600} height={400} /> <Imgix src="https://assets.imgix.net/example-images/puffins.jpg" width={600} height={400} /> </section> </div> ); } export default App; Une fois que vous avez appliqué le code BlurHash à votre image, l'espace réservé résultant ressemblera à ceci : Incluez la chaîne BlurHash avec votre balisage au moment de la construction pour vous assurer que les utilisateurs voient immédiatement la version floue de l'image. Pour commencer, créez un dès aujourd'hui ! compte imgix gratuit Également publié ici.

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

Améliorez l'expérience utilisateur de votre site Web avec les espaces réservés d'image BlurHash

Trop long; Pour lire

imgix

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Améliorez l'expérience utilisateur de votre site Web avec les espaces réservés d'image BlurHash

Trop long; Pour lire

imgix

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES