ऐसा काउंटर, जो लेआउट न बिगाड़े

सावधानी से बनाए गए वेब पेज में बाहर की इमेज जोड़ने से हमेशा यह जोखिम रहता है कि तय दृश्य ढाँचा बिगड़ जाए। ब्राउज़र जब कोई पेज बनाता है, तो वह हर टेक्स्ट ब्लॉक और ग्राफ़िक की जगह का हिसाब लगाता है, ताकि पढ़ना सहज रहे।

अगर किसी इमेज के आकार के बारे में साफ़ निर्देश न हों, तो ब्राउज़र पहले से ज़रूरी जगह नहीं छोड़ सकता। उसे इमेज फ़ाइल के पूरी तरह डाउनलोड होने तक इंतज़ार करना पड़ता है, तभी उसकी सही ऊँचाई और चौड़ाई पता चलती है। इस देरी से वह होता है, जिसे लेआउट शिफ़्ट कहते हैं।

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

टैग में दो संख्याएँ जगह थामे रखती हैं

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

ग्राफ़िक आने तक जगह बिल्कुल खाली रहती है, और आसपास का टेक्स्ट अपनी जगह मज़बूती से टिका रहता है। सही माप जानने के लिए गैलरी में चुने गए डिज़ाइन को देखना होता है।

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

जब इमेज न दिखे, तब क्या दिखता है

जब नेटवर्क कनेक्शन अटकता है या पूरी तरह टूट जाता है, तो गायब इमेज स्क्रीन पर एक भद्दा, टूटा हुआ आइकन छोड़ सकती है। इसे सलीके से सँभालने में वैकल्पिक टेक्स्ट वाला एट्रिब्यूट, यानी alt एट्रिब्यूट, अहम भूमिका निभाता है।

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

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

जान-बूझकर सबसे आखिर में लोड

आधुनिक वेब मानक और भी साधन देते हैं, जिनसे तय किया जा सकता है कि बाहर के ग्राफ़िक डॉक्यूमेंट की कुल लोडिंग रफ़्तार पर कैसे असर डालें। दो खास एट्रिब्यूट, loading और decoding, ब्राउज़र को बताते हैं कि इमेज को कितनी प्राथमिकता दी जाए।

loading एट्रिब्यूट को lazy पर सेट करने से ब्राउज़र फ़ाइल को तब तक नहीं मँगाता, जब तक पाठक सचमुच नीचे स्क्रॉल करके उसकी जगह के पास न पहुँच जाए। decoding एट्रिब्यूट को async पर सेट करने से ब्राउज़र इमेज डेटा के पूरी तरह समझे जाने का इंतज़ार किए बिना मुख्य टेक्स्ट और लेआउट को प्रोसेस कर लेता है।

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