आपकी वेबसाइट पर इमेज क्यों टूटती हैं (और हर एक को कैसे ढूँढें)

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

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

टूटी इमेज की आपको असल में क्या क़ीमत चुकानी पड़ती है

ग़ायब इमेज को सिर्फ़ दिखावे की बात मान लेना आसान है। लेकिन ऐसा नहीं है।

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

इनमें से कुछ भी आपके डैशबोर्ड में एरर के रूप में नहीं दिखता। पेज अब भी 200 OK लौटाता है। इसी वजह से टूटी इमेज महीनों तक नज़र से छूट जाती हैं।

इमेज टूटने की पाँच असली वजहें

कुछ इमेज ठीक करने के बाद आप पैटर्न पहचानने लगते हैं। लगभग हर टूटी इमेज इनमें से किसी एक समूह में आती है।

1. फ़ाइल डिलीट हो गई या उसका नाम बदल गया

किसी ने मीडिया लाइब्रेरी साफ़ की, "बेकार" फ़ाइलें हटा दीं, या hero-final-v2.jpg का नाम बदलकर hero.jpg कर दिया। पेज अब भी पुराने नाम की ओर इशारा करता है। WordPress साइटों पर और जहाँ भी कई लोग कंटेंट संभालते हैं, यह सबसे आम वजह है।

2. साइट बदल गई लेकिन इमेज के पते नहीं बदले

नए डोमेन पर माइग्रेशन, HTTP से HTTPS पर स्विच, या staging साइट से production पर जाने के बाद, पुरानी पोस्ट की इमेज अक्सर अब भी पिछले पते की ओर इशारा करती हैं। अगर पुराना सर्वर चालू है तो वे कुछ समय तक काम करती रह सकती हैं, और जिस दिन वह बंद होता है उस दिन फ़ेल हो जाती हैं।

3. इमेज किसी और के सर्वर पर है

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

4. CDN, कैश या प्लगइन ने पता बदल दिया

इमेज ऑप्टिमाइज़ करने वाले प्लगइन और CDN अक्सर इमेज के URL दोबारा लिखते हैं। अगर प्लगइन हटा दिया जाए, CDN की सेटिंग बदल जाए या कैश ग़लत तरीक़े से साफ़ हो, तो पेज ऐसे पतों की ओर इशारा करने लगते हैं जो अब मौजूद नहीं हैं।

5. पता ही ग़लत है

एक अक्षर कम, फ़ालतू स्पेस, ग़लत फ़ोल्डर, .jpg की जगह .jpeg, या इमेज फ़ाइल की जगह इमेज के बारे में किसी वेब पेज का लिंक। ये आम तौर पर हाथ से लिखे HTML, ईमेल टेम्पलेट और कॉपी-पेस्ट की ग़लतियों से आते हैं।

पेज पर हर टूटी इमेज कैसे ढूँढें

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

1. पेज को अपने ब्राउज़र में खोलें और सोर्स देखने के लिए Ctrl+U (या Mac पर Cmd+Option+U) दबाएँ।
2. पूरा सोर्स कोड सेलेक्ट करके कॉपी करें।
3. उसे Broken Image Checker में पेस्ट करें।

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

कुछ बातें जानना ज़रूरी है ताकि नतीजे समझ में आएँ:

• Relative पते अलग से लिस्ट होते हैं। /uploads/photo.jpg जैसा पता सिर्फ़ अपनी साइट के साथ ही काम करता है। लाइव पेज से सोर्स कॉपी करने पर आम तौर पर पूरे पते मिलते हैं; अगर नहीं, तो पाथ के आगे अपना डोमेन जोड़ें।
• Lazy-load होने वाली इमेज अपना असली पता छिपा सकती हैं। कुछ lazy-loading स्क्रिप्ट src में एक छोटा placeholder और data-src में असली पता रखती हैं। अगर कोई पेज ऐसा करता है, तो नीचे तक स्क्रॉल करने के बाद, जब असली पते भर जाएँ, अपने ब्राउज़र के डेवलपर टूल (Elements पैनल) से HTML कॉपी करें।
• सिर्फ़ मुख्य इमेज का पता जाँचा जाता है। srcset के दूसरे साइज़ और CSS बैकग्राउंड के रूप में लगी इमेज शामिल नहीं हैं, इसलिए अगर आपकी थीम उन पर निर्भर है तो उन्हें अलग से जाँचें।

जो मिले उसे ठीक करना

लिस्ट मिलने के बाद, ज़्यादातर सुधारों में एक-एक मिनट लगता है।

टूटे पते को नए ब्राउज़र टैब में खोलना वजह पक्की करने का तेज़ तरीक़ा है। 404 पेज का मतलब है कि फ़ाइल जा चुकी है। तस्वीर की जगह आम वेब पेज का मतलब है कि लिंक ग़लत जगह इशारा करता है। लॉगिन स्क्रीन का मतलब है कि इमेज प्राइवेट है।

जब चेकर कोई ऐसी इमेज दिखाए जो ज़रूरत से कहीं बड़ी है, जैसे 300 पिक्सेल के कार्ड में दिखाई गई 3000 पिक्सेल की फ़ोटो, तो उसे भी ठीक करना फ़ायदेमंद है। इससे पेज टूटेगा नहीं, लेकिन धीमा हो जाता है। Image Resizer उसे सही डाइमेंशन तक छोटा कर सकता है, और फ़ोटो को तय KB साइज़ में रीसाइज़ करने की हमारी गाइड बताती है कि धुंधला किए बिना फ़ाइल साइज़ का टारगेट कैसे पाएँ।

Alt टेक्स्ट: वह हिस्सा जिसे सब ग़लत करते हैं

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

तीन संभावित स्थितियाँ हैं, और उनमें से सिर्फ़ दो सही हैं:

• विवरण वाला alt टेक्स्ट, जैसे alt="Handmade oak dining table with six chairs"। मतलब रखने वाली किसी भी इमेज के लिए सही।
• ख़ाली alt टेक्स्ट, जो alt="" लिखा जाता है। सिर्फ़ सजावटी इमेज के लिए सही, जैसे डिवाइडर, बैकग्राउंड की आकृतियाँ और उस टेक्स्ट के बगल के आइकन जो पहले से वही बात कहता है। यह स्क्रीन रीडर को इमेज छोड़ने को कहता है।
• कोई alt एट्रिब्यूट ही नहीं। हमेशा ग़लत। स्क्रीन रीडर उसकी जगह फ़ाइल का नाम पढ़ सकते हैं, जिससे किसी को मदद नहीं मिलती।

कुछ आदतें alt टेक्स्ट को सचमुच काम का बनाती हैं:

• पेज के संदर्भ में इमेज क्या दिखाती है, उसे एक छोटे वाक्य में बताएँ।
• "image of" या "picture of" से शुरू न करें। स्क्रीन रीडर पहले ही बता देते हैं कि यह इमेज है।
• कोई प्रासंगिक कीवर्ड तभी शामिल करें जब वह तस्वीर का स्वाभाविक वर्णन हो। कीवर्ड से ठूँसा alt टेक्स्ट ख़राब अनुभव देता है और रैंकिंग में मदद नहीं करता।
• जिन इमेज में टेक्स्ट है, जैसे ऑफ़र वाला बैनर, उस टेक्स्ट को alt एट्रिब्यूट में डालें।

इमेज को टूटने से पहले ही रोकें

टूटी इमेज एक बार ठीक करना संतोष देता है। दोबारा न करना पड़े, यह और बेहतर है।

• अपनी इमेज ख़ुद होस्ट करें। Hotlinking से बचें। अगर कोई इमेज मायने रखती है, तो उसकी जगह आपके सर्वर पर है।
• हर माइग्रेशन के बाद जाँचें। अपनी लॉन्च चेकलिस्ट में टूटी इमेज की जाँच जोड़ें, Redirect Checker से रीडायरेक्ट जाँचने के ठीक बगल में।
• मीडिया साफ़ करने वाले प्लगइन से सावधान रहें। "बेकार" फ़ाइलों की पहचान पूरी तरह सही नहीं होती। डिलीट करने से पहले बैकअप लें, और बाद में ज़रूरी पेज सरसरी तौर पर जाँच लें।
• साथ ही लिंक भी जाँचें। टूटी इमेज वाले पेजों में अक्सर टूटे लिंक भी होते हैं। उसी पेज को Broken Link Checker से भी गुज़ारें।
• पेज की स्पीड पर नज़र रखें। बहुत बड़ी इमेज पेज के मुख्य कंटेंट को धीमे दिखाने की सबसे आम वजह हैं। Core Web Vitals की हमारी गाइड बताती है कि इमेज का साइज़ Largest Contentful Paint पर कैसे असर डालता है।

पाँच मिनट का एक रूटीन जो अपनाने लायक़ है

इमेज ठीक रखने के लिए आपको किसी महँगी मॉनिटरिंग सेवा की ज़रूरत नहीं है। महीने में एक बार, या किसी भी बड़े बदलाव के बाद, अपना होमपेज, सबसे ज़्यादा देखे जाने वाले पेज और सबसे ज़्यादा बिकने वाले प्रोडक्ट जाँचें। सोर्स कॉपी करें, उसे Broken Image Checker में पेस्ट करें, जो लाल है उसे ठीक करें, और जहाँ alt टेक्स्ट नहीं है वहाँ जोड़ें।

यह एक छोटी सी आदत है, लेकिन इसका मतलब है कि अगली बार जब आप किसी को अपनी साइट दिखाएँगे, तो पेज ठीक वैसा ही दिखेगा जैसा आपने चाहा था।