अपनी वेबसाइट पर इमेज का इस्तेमाल कैसे करें

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

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

वेबसाइट इमेज असल में क्या कर रही हैं?

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

जब ये संकेत साफ़ और प्रासंगिक होते हैं, तो विज़िटर को दिशा मिलती है। जब वे धुँधले या आम होते हैं, तो विज़िटर कुछ महसूस नहीं करते, जो सबसे बुरा नतीजा है। जो विज़िटर कुछ महसूस नहीं करता, उसके पास पढ़ते रहने की कोई वजह नहीं होती।

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

असली फ़ोटो बनाम स्टॉक फ़ोटो: क्या फ़र्क पड़ता है?

हाँ। ज़्यादातर लोगों की उम्मीद से कहीं ज़्यादा।

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

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

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

हर पेज के लिए सही इमेज कैसे चुनें?

इमेज ढूँढने से पहले पूछिए कि उसे उस ख़ास पेज पर क्या काम करना है।

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

आपके अबाउट पेज पर इमेज निजी होनी चाहिए। लोगों को दिखाइए। जगह को दिखाइए। कुछ ऐसा दिखाइए जो बिज़नेस को कॉर्पोरेट और अनजान की जगह इंसानी और ख़ास महसूस कराए।

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

जब आपको काम पता हो, तब इमेज ढूँढिए। उलटा नहीं।

कौन-सी इमेज आपके ख़िलाफ़ काम करती है?

अप्रासंगिकता

ऐसी इमेज जिसके पास आपके बिज़नेस, आपकी सर्विस या आपके ग्राहक के बारे में कहने को कुछ ख़ास नहीं है, विज़िटर को बताती है कि साइट के विज़ुअल अनुभव के बारे में किसी ने ध्यान से नहीं सोचा। वह छाप टिक जाती है।

बेमेलपन

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

धीमा लोड होना

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

ऑल्ट टेक्स्ट का न होना

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

आपके पेज पर इमेज कहाँ दिखनी चाहिए?

इमेज की जगह के लिए कोई सार्वभौमिक नियम नहीं है, लेकिन कुछ पैटर्न लगातार काम करते हैं।

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

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

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

आपकी इमेज किस फ़ाइल फ़ॉर्मैट में होनी चाहिए?

छोटा जवाब:

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

फ़ाइल साइज़ के लिए, आम पेज की इमेज के लिए 200 किलोबाइट से कम का लक्ष्य रखिए। हीरो इमेज लगभग 400 किलोबाइट तक जा सकती हैं। इससे बड़ी किसी भी चीज़ को अपलोड करने से पहले कंप्रेस करना होगा। आपके फ़ोन की पाँच मेगाबाइट की फ़ोटो की वेब पेज पर कोई जगह नहीं है।

ऑल्ट टेक्स्ट क्या है और हर इमेज को इसकी ज़रूरत क्यों है?

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

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

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

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

WEMASY में इमेज कैसे संभाली जाती हैं

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

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

क्या-क्या शामिल है, यह WEMASY वेबसाइट बिल्डर पर देखें, या प्राइसिंग पेज पर प्लान देखें।

वेबसाइट इमेज के बारे में अक्सर पूछे जाने वाले सवाल