जानें कि छवियां आपकी वेबसाइट पर क्यों प्रदर्शित नहीं हो रही हैं और उन्हें कैसे ठीक किया जाए
पुरानी कहावत है कि "एक तस्वीर हजारों शब्दों के लायक है।" यह वेब पर विशेष रूप से सच है, जहां ध्यान अवधि कुख्यात रूप से कम होती है और इसलिए सही छवि वास्तव में सही ध्यान आकर्षित करके और पेज आगंतुकों को आकर्षक बनाने के लिए साइट को बना सकती है ताकि वे सीख सकें कि उन्हें क्या सीखना है या एक विशिष्ट प्रदर्शन करना है ऐसी क्रिया जो साइट के लिए "जीत" को इंगित करती है। हां, जब किसी वेबसाइट की बात आती है, तो छवियां वास्तव में हजारों शब्दों से अधिक मूल्यवान हो सकती हैं!
तो स्थापित ऑनलाइन छवियों के महत्व के साथ, आइए अगला विचार करें कि आपकी वेबसाइट क्या कह रही है यदि साइट पर होने वाली छवि लोड करने में विफल हो जाती है? ऐसा हो सकता है कि आपके पास इनलाइन छवियां हैं जो HTML या पृष्ठभूमि छवियों का हिस्सा हैं जो सीएसएस के साथ लागू होती हैं (और आपकी साइट में इनमें से दोनों की संभावना है)। निचली पंक्ति यह है कि जब कोई ग्राफिक किसी पृष्ठ पर लोड करने में विफल रहता है, तो यह डिज़ाइन को टूटा हुआ बनाता है और, कुछ मामलों में, उस साइट पर उपयोगकर्ता अनुभव को पूरी तरह से नष्ट कर सकता है। चित्र भेज रहा है कि "हजार शब्द" निश्चित रूप से सकारात्मक नहीं हैं!
आइए कुछ सामान्य कारणों पर नज़र डालें कि छवियों को साइट पर लोड करने में असफल क्यों होगा, साथ ही वेबसाइट परीक्षण के दौरान इस समस्या का निवारण करते समय आपको क्या ध्यान रखना चाहिए।
गलत फ़ाइल पथ
जब आप किसी साइट की HTML या CSS फ़ाइल में छवियां जोड़ते हैं, तो आपको अपनी निर्देशिका संरचना में उस स्थान के लिए पथ बनाना होगा जहां वे फ़ाइलें रहते हैं। यह वह कोड है जो ब्राउज़र को बताता है कि छवि को देखने और लाने के लिए कहां से। ज्यादातर मामलों में, यह 'छवियों' नामक फ़ोल्डर के अंदर होगा। यदि इस फ़ोल्डर का पथ और इसके अंदर की फाइलें गलत हैं, तो छवियां ठीक से लोड नहीं होंगी क्योंकि ब्राउज़र सही फ़ाइलों को पुनर्प्राप्त करने में सक्षम नहीं होगा। यह उस पथ का पालन करेगा जिसे आपने बताया था, लेकिन यह एक मृत अंत को मार देगा और उचित छवि को प्रदर्शित करने के बजाय, खाली हो जाएगा।
छवि लोडिंग समस्याओं को डीबग करने में चरण 1 यह सुनिश्चित करना है कि आपके द्वारा कोडित फ़ाइल पथ सही है। शायद आपने गलत निर्देशिका निर्दिष्ट की है या उस निर्देशिका के पथ को सही तरीके से सूचीबद्ध नहीं किया है। यदि ये मामले नहीं हैं, तो आपके पास उस पथ के साथ एक और समस्या हो सकती है। पढ़ते रहिये!
फाइल नाम गलत वर्तनी
जैसे ही आप अपनी फ़ाइलों के लिए फ़ाइल पथ की जांच करते हैं, यह भी सुनिश्चित करें कि आपने छवि का नाम सही ढंग से लिखा है। हमारे अनुभव में, गलत नाम या गलत वर्तनी छवि लोडिंग समस्याओं का सबसे आम कारण हैं। याद रखें, जब फ़ाइल नामों की बात आती है तो वेब ब्राउज़र बहुत क्षमा नहीं कर रहे हैं। यदि आप गलती से एक पत्र भूल जाते हैं या गलत पत्र का उपयोग करते हैं, तो ब्राउजर एक ऐसी फाइल की तलाश नहीं करेगा जो समान है और कहें, "ओह, आप शायद इसका मतलब है, है ना?" नहीं - अगर फ़ाइल गलत है, भले ही यह करीब है, तो यह पृष्ठ पर लोड नहीं होगा।
गलत फ़ाइल एक्सटेंशन
कुछ मामलों में, आपके पास फ़ाइल का नाम सही ढंग से वर्तनी हो सकता है, लेकिन फ़ाइल एक्सटेंशन गलत हो सकता है। अगर आपकी छवि एक .jpg फ़ाइल है , लेकिन आपका HTML एक .png की तलाश में है, तो कोई समस्या होगी। सुनिश्चित करें कि आप प्रत्येक छवि के लिए सही फ़ाइल प्रकार का उपयोग कर रहे हैं और फिर सुनिश्चित करें कि आपने अपनी वेबसाइट के कोड में उसी एक्सटेंशन के लिए बुलाया है।
केस संवेदनशीलता भी देखें। यदि आपकी फ़ाइल कैप्स में अक्षरों के साथ .JPG के साथ समाप्त होती है, लेकिन आपके कोड संदर्भ .jpg, सभी लोअरकेस, कुछ वेब सर्वर हैं जो देखेंगे कि वे दोनों अलग हैं, भले ही वे अक्षरों के समान सेट हों। केस संवेदनशीलता मायने रखती है! यही कारण है कि हम हमेशा हमारी फाइलों को सभी लोअरकेस अक्षरों से बचाते हैं। ऐसा करने से हम हमेशा हमारे कोड में लोअरकेस का उपयोग करने की अनुमति देते हैं, जिससे हमारी छवि फ़ाइलों के साथ एक संभावित समस्या हो सकती है।
फाइलें गुम हैं
यदि आपकी छवि फ़ाइलों के पथ सही हैं, और नाम और फ़ाइल एक्सटेंशन भी त्रुटि मुक्त हैं, तो जांच करने के लिए अगला आइटम यह सुनिश्चित करना है कि फ़ाइलों को वास्तव में वेब सर्वर पर अपलोड किया गया है। साइट लॉन्च होने पर उस सर्वर पर फ़ाइलों को अपलोड करने की उपेक्षा करना एक आम गलती है जिसे अनदेखा करना आसान है।
आप इस समस्या को कैसे ठीक करते हैं? उन छवियों को अपलोड करें, अपने वेब पेज को रीफ्रेश करें, और इसे तुरंत अपेक्षित फ़ाइलों को प्रदर्शित करना चाहिए। आप सर्वर पर छवि को हटाने और इसे पुनः अपलोड करने का भी प्रयास कर सकते हैं। यह अजीब लग सकता है, लेकिन हमने इस काम को एक से अधिक बार देखा है। कभी-कभी फ़ाइलें दूषित हो जाती हैं, इसलिए यह "हटाएं और प्रतिस्थापित करें" विधि सहायता समाप्त कर सकती है।
छवियों को होस्ट करने वाली वेबसाइट डाउन है
आप आमतौर पर किसी भी छवियों को होस्ट करना चाहते हैं जो आपकी साइट आपके सर्वर पर उपयोग करती है, लेकिन कुछ मामलों में, आप कहीं और होस्ट की गई छवियों का उपयोग कर सकते हैं। यदि छवि होस्ट करने वाली साइट नीचे जाती है, तो आपकी छवियां या तो लोड नहीं होने जा रही हैं।
समस्या स्थानांतरण
चाहे कोई बाहरी फ़ाइल किसी बाहरी डोमेन से या अपने आप से लोड की गई हो, फिर भी हमेशा एक मौका होता है कि उस फ़ाइल के लिए स्थानांतरण समस्या हो सकती है जब इसे ब्राउज़र द्वारा पहली बार अनुरोध किया जाता है। यह एक आम घटना नहीं होनी चाहिए (यदि ऐसा है, तो आपको एक नए होस्टिंग प्रदाता की तलाश करनी पड़ सकती है), लेकिन यह समय-समय पर हो सकती है।
इस मुद्दे का दुर्भाग्यपूर्ण पक्ष यह है कि वास्तव में ऐसा कुछ नहीं है जिसके बारे में आप इसके बारे में कर सकते हैं क्योंकि यह आपके नियंत्रण से बाहर एक समस्या है। अच्छी खबर यह है कि यह एक अस्थायी समस्या है जिसे अक्सर बहुत जल्दी हल किया जाता है। उदाहरण के लिए, जब कोई टूटा हुआ पृष्ठ देखता है और इसे रीफ्रेश करता है, तो वह अकेले समस्या को ठीक करेगा और छवियों को ठीक से लोड करेगा। अगर आप टूटी हुई छवि देख रहे हैं, तो ब्राउज़र को रीफ्रेश करें कि यह देखने के लिए कि शायद यह केवल एक ट्रांसमिशन मुद्दा था आपका प्रारंभिक अनुरोध
कुछ अंतिम नोट्स
छवियों और लोडिंग चिंताओं के बारे में सोचते समय, दो चीजों को ध्यान में रखना भी एएलटी टैग और आपकी वेबसाइट की गति और समग्र प्रदर्शन का उचित उपयोग है ।
एएलटी, या "वैकल्पिक पाठ", टैग एक ब्राउज़र द्वारा प्रदर्शित किया जाता है यदि कोई छवि लोड होने में विफल रहता है। वे सुलभ वेबसाइट बनाने में भी एक महत्वपूर्ण घटक हैं जिनका उपयोग कुछ विकलांग लोगों द्वारा किया जा सकता है। आपकी साइट में प्रत्येक इनलाइन छवि में एक उपयुक्त एएलटी टैग होना चाहिए। ध्यान दें कि सीएसएस के साथ लागू छवियों में यह विशेषता नहीं है।
वेबसाइट प्रदर्शन के लिए, बहुत सारी छवियों को लोड करना, या यहां तक कि केवल कुछ दिग्गज छवियां जिन्हें वेब डिलीवरी के लिए उचित रूप से अनुकूलित नहीं किया गया है , लोडिंग गति पर नकारात्मक प्रभाव डालेगा। इस कारण से, अपनी साइट के डिज़ाइन में उपयोग की जाने वाली किसी भी छवि के प्रभाव का परीक्षण करना सुनिश्चित करें और उस साइट के प्रदर्शन को बेहतर बनाने के लिए आवश्यक कदम उठाएं, जबकि अभी भी समग्र रूप से दिखने और महसूस करें जो आपकी वेबसाइट प्रोजेक्ट के लिए उचित है।