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.

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

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

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps