imgix में, हम उपयोगकर्ता के अनुभव और पेज के प्रदर्शन की गहराई से परवाह करते हैं। पहले, हमने   चर्चा की। अनिवार्य रूप से, यह ऑफस्क्रीन छवियों को तब तक लोड होने से रोकता है जब तक आगंतुक स्क्रॉल नहीं करता और छवियां व्यूपोर्ट में प्रवेश नहीं करतीं। यह कम छवियों को किसी भी समय लोड करने की अनुमति देता है और प्रत्येक छवि के लिए लोड समय को गति देता है। कोर वेब विटल्स पर आलसी लोडिंग और इसके लाभों पर  हालांकि, अगर ठीक से सेट अप नहीं किया गया है, तो आलसी लोडिंग पृष्ठ लेआउट की अस्थिरता को बढ़ा सकती है, जिससे खराब संचयी लेआउट शिफ़्ट मीट्रिक हो सकती है, जो तीन प्रमुख वेब विटल्स में से एक है।  संचयी लेआउट शिफ़्ट को कम करते हुए पृष्ठ गति में सुधार करने के लिए,   के साथ आलसी लोडिंग को संयोजित करना सबसे अच्छा उपाय है। ब्लरहैश  इस लेख में, हम चर्चा करेंगे कि ब्लरहैश क्या है और इसे  इमेजिस का उपयोग करके अपनी छवियों पर कैसे लागू करें।  छवि प्लेसहोल्डर और ब्लरहैश क्या हैं?  जब कोई कनेक्शन या साइट छवियों को लोड करने में धीमी होती है, तो कथित लोड समय में सुधार करने और बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए प्लेसहोल्डर एक बढ़िया विकल्प हैं। ब्लरहैश एक एल्गोरिथम है जो आपको छवि प्लेसहोल्डर का कॉम्पैक्ट संस्करण बनाने देता है।  एल्गोरिथ्म वर्णों की एक स्ट्रिंग बनाता है जो छवि की गुणवत्ता द्वारा निर्धारित वर्णों की संख्या के साथ छवि के धुंधले प्रतिनिधित्व को एन्कोड करता है। स्ट्रिंग इतनी छोटी है कि आप इसे सीधे अपने पृष्ठ के मार्कअप में सर्व कर सकते हैं, और फिर स्ट्रिंग को धुंधली छवि में डिकोड किया जा सकता है—बिना किसी छवि फ़ाइल को लाने और डाउनलोड किए।   ब्लरहैश का एक प्रमुख लाभ यह है कि आप बड़ी छवि फ़ाइलों को डेटा की एक छोटी मात्रा में परिवर्तित कर सकते हैं ताकि मूल फ़ाइल के लोड होने के दौरान छवि का धुंधला प्रतिनिधित्व दिखाई दे। एक धीमे इंटरनेट कनेक्शन पर छवियों को कैसे लोड किया जाएगा, इसके लिए एक बेहतर समाधान खोजने की कोशिश करते समय वोल्ट में एक इंजीनियर   । ब्लरहैश के लिए विचार के साथ आया था  ब्लरहैश फ़ीचर का उपयोग कैसे करें  धुंधली इमेज बनाने के लिए, बस किसी भी इमेज में   जोड़ें और BlurHash स्ट्रिंग प्राप्त करें। एक बार आपके पास ब्लरहैश स्ट्रिंग हो जाने के बाद, आप इसे   घटक में उपयोग कर सकते हैं।   घटक हैश को एक ऐसी छवि में डिकोड करने के लिए जिम्मेदार है जिसे प्रदर्शित किया जा सकता है। fm=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 खाता   यहाँ भी प्रकाशित हुआ।

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

He/Him/Master of Discovery

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

He/Him/Master of Discovery

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps