ब्लरहैश इमेज प्लेसहोल्डर्स के साथ अपनी वेबसाइट के उपयोगकर्ता अनुभव को बेहतर बनाएं

imgix में, हम उपयोगकर्ता के अनुभव और पेज के प्रदर्शन की गहराई से परवाह करते हैं। पहले, हमने कोर वेब विटल्स पर आलसी लोडिंग और इसके लाभों पर चर्चा की। अनिवार्य रूप से, यह ऑफस्क्रीन छवियों को तब तक लोड होने से रोकता है जब तक आगंतुक स्क्रॉल नहीं करता और छवियां व्यूपोर्ट में प्रवेश नहीं करतीं। यह कम छवियों को किसी भी समय लोड करने की अनुमति देता है और प्रत्येक छवि के लिए लोड समय को गति देता है।

हालांकि, अगर ठीक से सेट अप नहीं किया गया है, तो आलसी लोडिंग पृष्ठ लेआउट की अस्थिरता को बढ़ा सकती है, जिससे खराब संचयी लेआउट शिफ़्ट मीट्रिक हो सकती है, जो तीन प्रमुख वेब विटल्स में से एक है।

संचयी लेआउट शिफ़्ट को कम करते हुए पृष्ठ गति में सुधार करने के लिए, ब्लरहैश के साथ आलसी लोडिंग को संयोजित करना सबसे अच्छा उपाय है।

इस लेख में, हम चर्चा करेंगे कि ब्लरहैश क्या है और इसे इमेजिस का उपयोग करके अपनी छवियों पर कैसे लागू करें।

छवि प्लेसहोल्डर और ब्लरहैश क्या हैं?

जब कोई कनेक्शन या साइट छवियों को लोड करने में धीमी होती है, तो कथित लोड समय में सुधार करने और बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए प्लेसहोल्डर एक बढ़िया विकल्प हैं। ब्लरहैश एक एल्गोरिथम है जो आपको छवि प्लेसहोल्डर का कॉम्पैक्ट संस्करण बनाने देता है।

एल्गोरिथ्म वर्णों की एक स्ट्रिंग बनाता है जो छवि की गुणवत्ता द्वारा निर्धारित वर्णों की संख्या के साथ छवि के धुंधले प्रतिनिधित्व को एन्कोड करता है। स्ट्रिंग इतनी छोटी है कि आप इसे सीधे अपने पृष्ठ के मार्कअप में सर्व कर सकते हैं, और फिर स्ट्रिंग को धुंधली छवि में डिकोड किया जा सकता है—बिना किसी छवि फ़ाइल को लाने और डाउनलोड किए।

ब्लरहैश का एक प्रमुख लाभ यह है कि आप बड़ी छवि फ़ाइलों को डेटा की एक छोटी मात्रा में परिवर्तित कर सकते हैं ताकि मूल फ़ाइल के लोड होने के दौरान छवि का धुंधला प्रतिनिधित्व दिखाई दे। एक धीमे इंटरनेट कनेक्शन पर छवियों को कैसे लोड किया जाएगा, इसके लिए एक बेहतर समाधान खोजने की कोशिश करते समय वोल्ट में एक इंजीनियर ब्लरहैश के लिए विचार के साथ आया था ।

ब्लरहैश फ़ीचर का उपयोग कैसे करें

धुंधली इमेज बनाने के लिए, बस किसी भी इमेज में fm=blurhash जोड़ें और BlurHash स्ट्रिंग प्राप्त करें। एक बार आपके पास ब्लरहैश स्ट्रिंग हो जाने के बाद, आप इसे BlurHash घटक में उपयोग कर सकते हैं। BlurHash घटक हैश को एक ऐसी छवि में डिकोड करने के लिए जिम्मेदार है जिसे प्रदर्शित किया जा सकता है।

इस विशेष उदाहरण में, रिएक्ट 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;

एक बार जब आप अपनी छवि पर ब्लरहैश कोड लागू कर देते हैं, तो परिणामी प्लेसहोल्डर इस तरह दिखाई देगा:

बिल्ड समय पर अपने मार्कअप के साथ ब्लरहैश स्ट्रिंग शामिल करें ताकि यह सुनिश्चित हो सके कि उपयोगकर्ताओं को छवि का धुंधला संस्करण तुरंत दिखाई दे।

आरंभ करने के लिए, आज ही एक नि:शुल्क imgix खाता बनाएं!