टेक्स्ट-और-इमेज वाले लेख में तस्वीरों का आकार और स्थान कैसे तय करें

तस्वीर की भूमिका से शुरुआत करें

किसी तस्वीर को हटाने या उसका आकार बदलने से पहले, यह तय करें कि पाठक को उससे क्या प्राप्त होना चाहिए। क्या यह कोई ऐसा साक्ष्य है जिसका उन्हें बारीकी से निरीक्षण करना है, कोई ऐसा उदाहरण है जो किसी गद्यांश की कल्पना करना आसान बनाता है, या सिर्फ सजावट है? पहले से तय इमेज की चौड़ाई से शुरुआत करने की तुलना में यह अंतर समझना अधिक उपयोगी है।

यदि तस्वीर में ऐसी जानकारी है जो टेक्स्ट में नहीं है, तो उसे पर्याप्त जगह दें ताकि उससे संबंधित विवरण स्पष्ट रूप से पढ़ा जा सके। किसी दस्तावेज़, वस्तु या प्रक्रिया की छोटी छवि अपने मुख्य उद्देश्य में विफल हो सकती है यदि पाठक उसका निरीक्षण नहीं कर पाता। यदि तस्वीर केवल टेक्स्ट में पहले से समझाई गई बात को दर्शाती है, तो छोटा आकार पर्याप्त हो सकता है—या हो सकता है कि उस छवि की बिल्कुल आवश्यकता ही न हो। यह तस्वीर के उद्देश्य से तय किया गया एक व्यावहारिक डिज़ाइन नियम है, कोई सार्वभौमिक आकार मानक नहीं। GOV.UK डिज़ाइन सिस्टम का इमेज मार्गदर्शन भी इसी तरह कहता है कि छवियों को उपयोगकर्ता की वास्तविक आवश्यकता को पूरा करना चाहिए और दृश्य सहायता के रूप में काम करना चाहिए, जबकि आवश्यक जानकारी लिखित रूप में उपलब्ध रहनी चाहिए। इसकी सिफारिशें सरकारी ऑनलाइन सेवाओं के लिए लिखी गई हैं, इसलिए इन्हें हर प्रकार के लेख के लिए कोई नियम-पुस्तिका मानने के बजाय एक उपयोगी संदर्भ के रूप में देखें।

एक उपयोगी निर्णय सहायता यह है कि प्रत्येक तस्वीर को तीन में से एक भूमिका सौंपी जाए: निरीक्षण (inspect), चित्रण (illustrate), या अलंकरण (ornament)। "निरीक्षण" के लिए आमतौर पर एक बड़े डिस्प्ले और एक ऐसे स्पष्टीकरण या कैप्शन की आवश्यकता होती है जो संबंधित विवरण की ओर ध्यान आकर्षित करे। "चित्रण" अक्सर उस पैराग्राफ के पास मध्यम आकार में रह सकता है जिसका वह समर्थन करता है। "अलंकरण" का कोई जानकारीपूर्ण काम नहीं होता; इसे हटाने या देखने में शांत रखने पर विचार करें। ये श्रेणियां एक व्यावहारिक संपादन उपकरण हैं, स्रोतों द्वारा निर्धारित कोई अनिवार्य शब्दावली नहीं।

महत्व और उपलब्ध स्थान के अनुसार आकार चुनें

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

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

जब कोई तस्वीर चौड़ी स्क्रीन पर टेक्स्ट के बगल में दिखाई देती है, तो दोनों को एक जोड़ी के रूप में मानें। छवि को उसका विषय दिखाने के लिए पर्याप्त चौड़ाई दें और टेक्स्ट को पढ़ने में सहज रहने के लिए पर्याप्त जगह दें। यदि दोनों में से किसी में भी जगह कम पड़ती है, तो तस्वीर को सिकोड़ने और टेक्स्ट को एक संकरी पट्टी में दबाने के बजाय उन्हें ऊपर-नीचे (stack) रखें। छोटी स्क्रीन पर, एक सिंगल-कॉलम क्रम अक्सर सबसे स्पष्ट व्यवस्था होती है: टेक्स्ट, फिर उससे संबंधित तस्वीर, फिर अगला गद्यांश। WCAG 2.2 रीफ्लो (Reflow) पर W3C का स्पष्टीकरण बताता है कि कैसे कई लेख पृष्ठ सिंगल कॉलम में अनुकूलित हो सकते हैं और सामान्य रूप से पढ़ने वाली सामग्री के लिए दो दिशाओं में स्क्रॉलिंग से बचने के लक्ष्य की व्याख्या करता है। यह उन सामग्रियों के लिए अपवादों का भी उल्लेख करता है जिनके अर्थ या उपयोग के लिए टू-डायमेंशनल लेआउट की आवश्यकता होती है। किसी लेख के लेआउट के लिए मुख्य बात यह सुनिश्चित करना है कि इमेज-टेक्स्ट की जोड़ी पाठकों को टेक्स्ट पढ़ने के लिए साइड में स्क्रॉल (pan sideways) करने पर मजबूर न करे।

प्रत्येक तस्वीर को वहाँ रखें जहाँ उसका संबंध स्पष्ट हो

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

कैप्शन का उपयोग तब करें जब वह कुछ विशिष्ट जोड़ता हो: विषय की पहचान करें, किसी विवरण को इंगित करें, या बताएं कि छवि क्यों महत्वपूर्ण है। आसपास के वाक्य को शब्द-दर-शब्द दोहराने के लिए कैप्शन का उपयोग न करें। यदि तस्वीर को बारीकी से निरीक्षण की आवश्यकता है, तो पास के टेक्स्ट के साथ-साथ कैप्शन में भी बताएं कि क्या देखना है; पाठकों को केवल तस्वीर की स्थिति से अर्थ का अनुमान नहीं लगाना चाहिए।

तस्वीर और उसके टेक्स्ट के बीच का संबंध गैर-दृश्य पठन (nonvisual reading) के लिए भी महत्वपूर्ण है। W3C का इमेज ट्यूटोरियल कहता है कि जानकारीपूर्ण छवियों को अपनी आवश्यक जानकारी देने वाले टेक्स्ट विकल्पों (alt text) की आवश्यकता होती है, जबकि सजावटी छवियां खाली विकल्प का उपयोग कर सकती हैं ताकि सहायक तकनीक (assistive technology) उन्हें छोड़ सके। W3C का जानकारीपूर्ण-इमेज मार्गदर्शन इस बात पर जोर देता है कि टेक्स्ट विकल्प को संदर्भ में छवि के अर्थ को व्यक्त करना चाहिए, न कि केवल दिखाई देने वाली वस्तुओं को सूचीबद्ध करना चाहिए। एक व्यावहारिक जांच के रूप में, पूछें: यदि कोई इस तस्वीर को नहीं देख सकता, तो वह किस जानकारी से चूक जाएगा? आवश्यक जानकारी को लेख के टेक्स्ट में शामिल करें, और छवि के लिए एक उपयुक्त टेक्स्ट विकल्प प्रदान करें। यदि छवि निकटवर्ती टेक्स्ट से अलग कुछ नया नहीं जोड़ती है, तो उसके विवरण को दोहराना अनावश्यक हो सकता है।

तस्वीर के उपयोगी आकार को सुरक्षित रखें

किसी तस्वीर का आस्पेक्ट रेशियो (चौड़ाई और ऊंचाई का अनुपात) इस बात को प्रभावित करता है कि वह कितनी जगह लेती है और क्या दिखाई देता है। पूरी तस्वीर को चुने गए क्षेत्र के भीतर फिट करके शुरुआत करें। क्रॉप केवल तभी करें जब विषय स्पष्ट रहे और क्रॉप करने से पाठक के लिए आवश्यक विवरण न हटे। एक लैंडस्केप क्रॉप चौड़ी मुख्य छवि के अनुकूल हो सकता है; एक पोर्ट्रेट छवि कॉलम के भीतर कम चौड़ाई में बेहतर काम कर सकती है। ये कंपोज़िशनल विकल्प हैं, कोई तय नियम नहीं।

यदि क्रॉप करने से संदर्भ हट जाता है, स्पष्ट अर्थ बदल जाता है, या लेख में चर्चा किया गया कोई विवरण छिप जाता है, तो एक अलग क्रॉप का उपयोग करें या मूल अनुपात में ही प्रदर्शित करें। आरेखों (diagrams), लेबलों या दस्तावेज़ों के लिए, अंतिम प्रदर्शन आकार का निरीक्षण करें: किसी तस्वीर में एम्बेडेड टेक्स्ट पढ़ने के लिए बहुत छोटा हो सकता है। GOV.UK इमेज मार्गदर्शन आम तौर पर छवियों में टेक्स्ट डालने से बचने की सलाह देता है क्योंकि इसे पढ़ना, कॉपी करना, आकार बदलना या स्क्रीन रीडर से एक्सेस करना मुश्किल हो सकता है; जब टेक्स्ट छवि के लिए आवश्यक हो, तो पास की लिखित सामग्री में भी उसका अर्थ प्रदान करें।

पाठकों द्वारा उपयोग किए जाने वाले आकार पर लेआउट की जांच करें

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

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

एक त्वरित निर्णय क्रम

भूमिका तय करें। क्या तस्वीर का उद्देश्य निरीक्षण करना है, टेक्स्ट को चित्रित करना है, या केवल पृष्ठ को सजाना है?

उसका आधार खोजें। उस गद्यांश की पहचान करें जो उसका परिचय देता है या उस पर निर्भर करता है, फिर तस्वीर को उस गद्यांश के पास रखें।

प्रदर्शन की चौड़ाई निर्धारित करें। मुख्य साक्ष्य को पर्याप्त जगह दें; यदि विवरण आवश्यक नहीं है, तो सहायक तस्वीर को कम जगह लेने दें।

क्रॉप की जांच करें। मुख्य विषय और सभी प्रासंगिक संदर्भ को दृश्यमान रखें।

क्रम में लेआउट को पढ़कर देखें। संकरी स्क्रीन पर, पुष्टि करें कि टेक्स्ट और फ़ोटो अभी भी एक उचित क्रम में दिखाई दे रहे हैं और टेक्स्ट पठनीय बना हुआ है।

जानकारी का वर्णन करें। जब उपयोगी हो तो एक कैप्शन जोड़ें, और छवि की भूमिका के आधार पर एक टेक्स्ट विकल्प (alt text) प्रदान करें।

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

इस विषय को आगे पढ़ें