धुंधलापन लाए बिना छोटे डिस्प्ले के लिए हाई-रिज़ॉल्यूशन पिक्सेल आर्ट को कैसे अनुकूलित करें

एक हाई-रिज़ॉल्यूशन स्रोत में लक्ष्य की तुलना में अधिक पिक्सेल होते हैं। आकार बदलने की प्रक्रिया में स्रोत की जानकारी को संयोजित करना या हटाना पड़ता है। स्मूथ फ़िल्टर जैसे कि बाईलिनियर इंटरपोलेशन (bilinear interpolation) आस-पास के पिक्सेल से आउटपुट रंगों की गणना करते हैं; इससे कठोर रंग सीमाएं धुंधली या हल्की हो सकती हैं। नियरेस्ट-नेबर (nearest-neighbor) सैंपलिंग एक स्रोत पिक्सेल का चयन करती है और दूसरों को अनदेखा करती है, इसलिए यह मिश्रित रंगों से बचती है लेकिन बारीक विशेषताओं को छोड़ सकती है या रेखाओं को असमान बना सकती है। गोडोट (Godot) का इमेज संदर्भ दोनों प्रभावों का वर्णन करता है, और MDN बताता है कि ब्राउज़र स्केलिंग का व्यवहार चुने गए रेंडरिंग मोड पर निर्भर करता है। Godot: Image MDN: image-rendering

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

उस डिस्प्ले क्षेत्र को पिक्सेल में मापें जहाँ आर्ट दिखाई देगी, और स्रोत के पहलू अनुपात (एस्पेक्ट रेशियो) को बनाए रखें। यदि मूल 1200 × 800 पिक्सेल है और लक्ष्य 300 × 200 है, तो प्रत्येक दिशा में पैमाना 1:4 है। प्रत्येक चार-पिक्सेल-चौड़ा स्रोत क्षेत्र ठीक एक गंतव्य पिक्सेल पर मैप होता है; यह अनुपात सुविधाजनक है, हालांकि बारीक विवरण अभी भी इस आकार में समाप्त हो जाते हैं।

320 × 180 जैसे लक्ष्य के लिए, पहले छवि को बिना खींचे (stretching) उन सीमाओं के भीतर फ़िट करें। यदि पहलू अनुपात भिन्न हैं, तो चुनें कि क्रॉप करना है, लेटरबॉक्स करना है, या लेआउट को फिर से व्यवस्थित करना है। बॉक्स को भरने के लिए छवि को दबाएं (squeeze) नहीं: यह पिक्सेल के आकार को बदल देता है और चेहरों, सिल्हूट और पैटर्न को विकृत कर सकता है। अलग-अलग पहलू अनुपातों के लिए एक स्पष्ट फ़्रेमिंग विकल्प की आवश्यकता होती है; गोडोट और यूनिटी दोनों डिस्प्ले बेमेल से निपटने के तरीकों के रूप में क्रॉपिंग या बार्स का उपयोग करने का दस्तावेजीकरण करते हैं। Godot: Multiple resolutions Unity: Pixel Perfect Camera reference

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

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

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

एक छोटी छवि के लिए जो समग्र स्रोत को अधिक सुचारू रूप से दर्शाए, लैंक्ज़ोस (Lanczos) जैसे उच्च-गुणवत्ता वाले डाउनसैंपलिंग फ़िल्टर की तुलना एक सरल क्षेत्र या बॉक्स-शैली के रिडक्शन से करें। ये विधियाँ एकाधिक स्रोत पिक्सेल से जानकारी को संयोजित करती हैं, जो व्यापक आकारों को तो सुरक्षित रख सकती हैं लेकिन स्पष्ट किनारों के आसपास मध्यवर्ती रंगों को जोड़ सकती हैं। गोडोट लैंक्ज़ोस को विशेष रूप से डाउनस्केलिंग के लिए एक उच्च-गुणवत्ता वाले विकल्प के रूप में वर्णित करता है; पिलो (Pillow) विभिन्न फ़िल्टरों के सैंपलिंग दृष्टिकोणों का दस्तावेजीकरण करता है। विकर्णों (diagonals), पतली रेखाओं और उच्च-कंट्रास्ट किनारे वाले क्रॉप पर विकल्पों का परीक्षण करें, फिर वास्तविक आकार के परिणाम को देखकर चयन करें। Godot: Image Pillow: Filters

पूर्णांक अनुपात (Integer ratios) तब सबसे उपयोगी होते हैं जब डिस्प्ले के लिए तैयार छोटी छवि को स्केल किया जा रहा हो, या जब स्रोत के आयाम लक्ष्य में समान रूप से विभाजित होते हों। तब प्रत्येक स्रोत पिक्सेल आउटपुट पिक्सेल की समान पूर्ण संख्या पर स्थान लेता है। भिन्नात्मक स्केलिंग (Fractional scaling) पिक्सेल को असमान रूप से वितरित कर सकती है; गोडोट का उदाहरण 640 × 360 की आधार छवि को 1280 × 720 पर 2× स्केल करने की तुलना भिन्नात्मक पैमाने से करता है जो असमान पिक्सेल आकार उत्पन्न करता है। Godot: Multiple resolutions

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

लक्षित पिक्सेल आयामों में निर्यात करें, फिर वास्तविक ऐप, ब्राउज़र या डिवाइस में इच्छित आकार पर निर्यात की गई फ़ाइल देखें। एक स्पष्ट निर्यातित छवि नरम या धुंधली हो सकती है यदि कोई दूसरा चरण इसे स्मूथ रूप से स्केल करता है। ब्राउज़र कैनवास रेखाचित्रों के लिए, स्मूथिंग डिफ़ॉल्ट रूप से सक्षम होती है; MDN दस्तावेज़ बताता है कि जब स्केल की गई छवियों को कठोर किनारे बनाए रखने हों, तो imageSmoothingEnabled को बंद कर दें। CSS image-rendering: pixelated भी प्रदर्शित छवियों को प्रभावित कर सकता है, लेकिन MDN आगाह करता है कि आंशिक डिवाइस-पिक्सेल अनुपात अभी भी पिक्सेल को असमान दिखा सकते हैं। MDN: imageSmoothingEnabled MDN: Crisp pixel art look

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

1. लक्षित चौड़ाई और ऊँचाई निर्धारित करें, और तय करें कि पहलू अनुपात के किसी भी अंतर को कैसे संभालना है।
2. एक कार्यशील प्रतिलिपि बनाएं और उन विवरणों को सरल करें जो उस आकार में फ़िट नहीं हो सकते।
3. तुलना के लिए एक नियरेस्ट-नेबर संस्करण और एक स्मूथ-फ़िल्टर संस्करण निर्यात करें; इसमें बारीक विवरणों और विकर्णों वाला एक क्रॉप शामिल करें।
4. वास्तविक डिस्प्ले आकार पर दोनों की समीक्षा करें, फिर किसी भी ऐसे आवश्यक विवरण को फिर से बनाएं जो गायब हो गया हो या अस्पष्ट हो गया हो।
5. पुष्टि करें कि एप्लिकेशन या ब्राउज़र कोई अवांछित दूसरा आकार परिवर्तन लागू नहीं करता है, और अंतिम संस्करण को इच्छित आयामों पर सहेजें।

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

• Godot Engine: Multiple resolutions
• Godot Engine: Image
• MDN: image-rendering
• Pillow: Concepts — Filters
• Unity: Pixel Perfect Camera reference
• MDN: CanvasRenderingContext2D.imageSmoothingEnabled
• MDN: Crisp pixel art look with image-rendering