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

Chez imgix, nous accordons une grande importance à l'expérience utilisateur et aux performances des pages. Auparavant, nous avons discuté du chargement différé et de ses avantages sur Core Web Vitals . 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.

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 a eu l'idée de BlurHash tout en essayant de trouver une meilleure solution pour le chargement des images sur une connexion Internet plus lente.

Comment utiliser la fonction BlurHash

Pour créer une image floue, ajoutez simplement fm=blurhash à 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 BlurHash . Le composant BlurHash est responsable du décodage du hachage en une image pouvant être affichée.

Dans cet exemple particulier, le composant React BlurHash 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é.

 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 compte imgix gratuit dès aujourd'hui !