पिक्सेल बनाम मिलीमीटर: संपूर्ण इकाई रूपांतरण गाइड

हर स्क्रीन और हर प्रिंट जॉब एक ही दरार पर टिकी हुई है: पिक्सेल का कोई निश्चित भौतिक आकार नहीं होता। वही 100-पिक्सेल का आयत एक सामान्य ब्राउज़र पर 26 मिलीमीटर, मैगज़ीन के पन्ने पर 8 मिलीमीटर, और एक फाइन-आर्ट प्रिंट पर सिर्फ 4 मिलीमीटर जितना छोटा दिख सकता है। डिजिटल पिक्सेल और वास्तविक दुनिया की लंबाई के बीच अनुवाद करने वाली संख्या है DPI (डॉट्स प्रति इंच) — और इसे सही करना ही फर्क है एक आरामदायक टैप वाले बटन और एक ऐसे बटन के बीच जिसे उँगली पार कर जाती है, एक तेज़ छपे लोगो और एक धुंधले छपे लोगो के बीच।

यह गाइड बताती है कि पिक्सेल असल में क्या होता है, DPI क्यों मायने रखता है, पिक्सेल और मिलीमीटर के बीच परिवर्तित करने वाला गणित, असल दुनिया में मिलने वाले DPI मानक, और वे व्यावहारिक वर्कफ्लो जिनमें डिज़ाइनरों, फोटोग्राफरों और डेवलपरों को रूपांतरण करना ही पड़ता है। बीच-बीच में हम Screen Ruler Online के मुफ्त Pixel Converter की ओर इशारा करेंगे — इसे दूसरे टैब में खोल लें और पढ़ते-पढ़ते संख्याएँ खुद जाँचते रहें।

पिक्सेल क्या है?

एक पिक्सेल ("picture element" का संक्षिप्त रूप) किसी डिजिटल छवि या डिस्प्ले की सबसे छोटी अलग इकाई है। स्क्रीन पर यह एक संबोधन-योग्य बिंदु है, आमतौर पर तीन सब-पिक्सेल से बना — लाल, हरा और नीला — जो मिलकर एक अनुभूत रंग बनाते हैं। एक छवि फ़ाइल में यह रंग मानों के ग्रिड में एक एकल प्रविष्टि है। महत्वपूर्ण बात यह है कि पिक्सेल एक तार्किक इकाई है, भौतिक नहीं। इसका वास्तविक आकार पूरी तरह इस बात पर निर्भर करता है कि उसे रेंडर करने वाला डिवाइस कैसे कैलिब्रेट किया गया है।

1920×1080 की एक छवि लीजिए। नेटिव रेज़ोल्यूशन पर चल रहे 24-इंच के मॉनिटर पर, हर पिक्सेल लगभग 0.265 mm चौड़ा है। उसी छवि को फिट करने के लिए स्केल करने वाले 5.5-इंच के फोन पर, हर पिक्सेल लगभग 0.06 mm है। 300 DPI पर छपी मैगज़ीन पर, हर पिक्सेल 0.085 mm बन जाता है। छवि वही है; पिक्सेल का भौतिक आकार आउटपुट माध्यम का फ़ंक्शन है।

यही कारण है कि जैसे ही आप माध्यम बदलते हैं, सिर्फ पिक्सेल पर आधारित स्पेसिफिकेशन टूट जाते हैं। "इस बटन को 44 px ऊँचा बनाओ" वाला नियम जो iPhone पर आरामदायक टैप टारगेट देता है, 4K मॉनिटर पर एक पतली पट्टी और बिलबोर्ड पर एक विशाल आकृति बना देता है। असली आकार की बात करने के लिए, आपको DPI की बात करनी होगी।

DPI (और PPI) क्या है?

DPI का अर्थ है "डॉट्स प्रति इंच" — भौतिक सतह के एक रैखिक इंच में पैक किए गए पिक्सेल (या प्रिंट में डॉट्स) की संख्या। PPI वही विचार है जो विशेष रूप से स्क्रीन पर लागू होता है ("पिक्सेल प्रति इंच")। आम लेखन में दोनों शब्दों का परस्पर उपयोग होता है; यह गाइड ज़्यादातर DPI कहेगी क्योंकि रूपांतरण का गणित उसी पर निर्भर करता है।

DPI ही रूपांतरण कारक है:

inches = pixels / DPI
millimeters = (pixels / DPI) × 25.4

स्थिरांक 25.4 तय है: अंतर्राष्ट्रीय परिभाषा के अनुसार एक इंच में ठीक 25.4 मिलीमीटर होते हैं। चर है DPI, और यही माध्यम के साथ बदलता है:

Context	Typical DPI	What it means
Web (CSS pixels)	96 DPI	The reference resolution for browsers and operating systems
Legacy Mac typography	72 DPI	One pixel = one printer's point in early Apple software
Draft / large-format print	150 DPI	Posters, banners, proofs
High-quality print	300 DPI	Magazines, books, packaging
Photo / fine art	600 DPI	Photo prints, line art, text under magnification

इन पाँच DPI पर वही 100 पिक्सेल इस तरह मैप होते हैं:

DPI	Inches	Millimeters
72	1.389	35.28
96	1.042	26.46
150	0.667	16.93
300	0.333	8.47
600	0.167	4.23

ध्यान दीजिए कि DPI बढ़ने के साथ भौतिक लंबाई कितनी नाटकीय रूप से सिकुड़ जाती है। पिक्सेल की संख्या कभी नहीं बदलती; सिर्फ मानी हुई घनता बदलती है।

गणित, क़दम-दर-क़दम

मान लीजिए आपके पास 800 पिक्सेल चौड़ा एक बैनर है और आप जानना चाहते हैं कि स्क्रीन पर वह कितना बड़ा होगा। फ़ॉर्मूले से शुरू करें:

inches = pixels / DPI = 800 / 96 ≈ 8.33 inches
millimeters = inches × 25.4 ≈ 211.67 mm
centimeters = inches × 2.54 ≈ 21.17 cm

तो मानक वेब 96 DPI पर 800 px लगभग 21 cm चौड़ा होता है — A4 कागज के आधे शीट के बराबर।

अब वही 800 px की संपत्ति 300-DPI प्रिंट पर ले जाइए:

inches = 800 / 300 ≈ 2.67 inches
millimeters ≈ 67.73 mm

वही पिक्सेल संख्या, बहुत छोटा प्रिंट। प्रिंट पर वही भौतिक आकार पाने के लिए, आपको पिक्सेल संख्या तीन गुना करके लगभग 2400 px करनी होगी। इसीलिए प्रिंट डिज़ाइनर वेब संपत्तियों के "300 DPI वर्शन" माँगते हैं — फोटो या लोगो को उच्च पिक्सेल घनता पर पुनः-नमूना या पुनः-निर्यात करना पड़ता है ताकि वही भौतिक आकार तेज़ छपे।

उल्टी दिशा भी उतनी ही आम है। एक प्रिंटर 300 DPI पर 100 mm × 50 mm का लोगो माँगता है। ज़रूरी पिक्सेल आयाम होंगे:

pixels = (millimeters / 25.4) × DPI
       = (100 / 25.4) × 300 ≈ 1181 px wide
       = (50 / 25.4) × 300 ≈ 591 px tall

Pixel Converter यह गोल-यात्रा रियल टाइम में करता है। मिलीमीटर फील्ड में 100 टाइप कीजिए, DPI को 300 पर स्विच कीजिए, और एक यूनिट चिप क्लिक करते ही यह आपको 1181 पिक्सेल दिखा देता है।

वेब हकीकत: 96 DPI और CSS पिक्सेल

आधुनिक वेब ब्राउज़र, ऑपरेटिंग सिस्टम और CSS स्पेसिफिकेशन सब 96 रेफरेंस पिक्सेल प्रति इंच पर मानकीकृत हैं। इसका मतलब है कि 96 px की एक रेखा को भौतिक स्क्रीन पर एक इंच के रूप में रेंडर होना चाहिए। व्यवहार में कुछ चीज़ें इसे जटिल बनाती हैं:

1. डिस्प्ले स्केलिंग। macOS और Windows UI को 125%, 150%, 200% आदि से स्केल कर सकते हैं। 200% स्केलिंग पर 4K डिस्प्ले पर 100 px की एक रेखा 100% स्केलिंग पर 1080p डिस्प्ले के समान भौतिक आकार में दिखती है — एक सिस्टम-स्तरीय समायोजन ताकि हाई-DPI हार्डवेयर पर टेक्स्ट इतना न सिकुड़ जाए कि पढ़ना मुश्किल हो जाए।
2. डिवाइस पिक्सेल अनुपात (DPR)। एक "Retina" या हाई-DPI डिस्प्ले हर CSS पिक्सेल के लिए कई भौतिक पिक्सेल रेंडर करता है। iPhone स्क्रीनें आमतौर पर DPR 3 पर चलती हैं, मतलब आप जो हर CSS पिक्सेल दर्ज करते हैं उसके लिए ब्राउज़र 3 असली पिक्सेल खींचता है। यह आपको कुछ ख़ास किए बिना टेक्स्ट को कुरकुरा रखता है; CSS CSS पिक्सेल में बात करता रहता है और GPU अपसैंपलिंग संभाल लेता है।
3. ब्राउज़र ज़ूम। उपयोगकर्ता द्वारा शुरू किया गया ज़ूम CSS पिक्सेल को भौतिक पिक्सेल के सापेक्ष गुणा करता है। 150% ज़ूम 100 px की रेखा को लेआउट इंजन के लिए 150 CSS पिक्सेल का काम बना देता है।

सीख यह है: वेब डिज़ाइन के लिए, 96 DPI का उपयोग कीजिए। CSS पिक्सेल पहले से ही सही भाषा बोलते हैं। अगर आप एक भौतिक मॉकअप बना रहे हैं जिसे ठीक आकार में प्रिंट होना है, तो कन्वर्टर को 300 DPI पर स्विच कीजिए और दोबारा गणना कीजिए।

प्रिंट हकीकत: 300 DPI और रीसैंपलिंग

प्रिंट चाहता है कि स्रोत डेटा का हर पिक्सेल डिवाइस के रेज़ोल्यूशन पर भौतिक रूप से पैक हो। 300 DPI पर चलने वाली एक मैगज़ीन हर छपे इंच में लगभग 300 पिक्सेल जितनी डिटेल देखना चाहती है। कम भेजिए, और प्रेस को इंटरपोलेट करना पड़ेगा — आपके किनारे नर्म हो जाएँगे, बारीक रेखाएँ टेढ़ी-मेढ़ी।

डिज़ाइनर दो चरणों में रूपांतरण करते हैं:

1. असली दुनिया की इकाइयों में लेआउट। एक मैगज़ीन स्प्रेड "210 mm × 297 mm" (A4 पोर्ट्रेट) होता है, "2480 × 3508 पिक्सेल" नहीं। InDesign, Affinity Publisher और Photoshop का प्रिंट मोड — सब आपको कैनवस मिलीमीटर या इंच में सेट करने देते हैं।
2. लक्ष्य DPI पर निर्यात। जब लेआउट को प्रेस के लिए PDF या TIFF में निर्यात किया जाता है, तो सॉफ़्टवेयर रास्टर छवियों को लक्ष्य DPI पर रीसैंपल करता है। 300-DPI के पन्ने पर 100% स्केल पर रखी गई फोटो को पिक्सेल के हिसाब से पहले से ही 300 DPI पर होना चाहिए। अगर वह सिर्फ 150 DPI पर है, तो निर्यात के समय वह दोगुनी हो जाएगी — और तभी नर्मी आ जाती है।

Pixel Converter चरण 1 में सबसे उपयोगी है — यह तय करने में कि कितने पिक्सेल का स्रोत चाहिए। अगर 300-DPI ब्रोशर पर लोगो ठीक 50 mm चौड़ा छपना है, तो आपको 591 px की स्रोत डिटेल चाहिए। 300 px पर स्रोत लीजिए और प्रेस पर धुँधलापन दिखेगा।

फोटोग्राफी: सेंसर से प्रिंट तक

24-मेगापिक्सेल का कैमरा लगभग 6000 × 4000 पिक्सेल की छवि बनाता है। फोटोग्राफर लगातार पिक्सेल → भौतिक प्रिंट आकार में परिवर्तित करते रहते हैं:

At 300 DPI: 6000 / 300 = 20 inches wide → 50.8 cm
At 240 DPI: 6000 / 240 = 25 inches wide → 63.5 cm
At 180 DPI: 6000 / 180 ≈ 33 inches wide → 84.7 cm

बाँह की लंबाई से देखे जाने वाले प्रिंट (किताबें, गैलरी प्रिंट) के लिए 300 DPI स्वर्ण मानक है। जब देखने की दूरी बढ़ती है — बड़े दीवार आर्ट जिनसे आप पीछे हटकर देखते हैं — तब 240 DPI स्वीकार्य है। 180 DPI वह न्यूनतम है जिसके नीचे ज़्यादातर लोग नर्मी महसूस करने लगते हैं।

Pixel Converter के 300 और 600 DPI प्रीसेट फोटो वर्कफ्लो को साफ-सुथरा कवर करते हैं: अपने सेंसर का पिक्सेल काउंट डालिए, इंच और सेंटीमीटर में प्रिंट आयाम देखिए, और तय कीजिए कि नेटिव रेज़ोल्यूशन पर प्रिंट करना है या अपस्केल।

Retina, हाई-DPI, और डिवाइस पिक्सेल अनुपात

iPhone 4 ने 2010 में "Retina" ब्रांडिंग शुरू की — एक ऐसा डिस्प्ले जो इतनी घनी हो कि सामान्य देखने की दूरी पर अलग-अलग पिक्सेल मानवीय दृष्टि के रेज़ोल्यूशन से नीचे हों। आज ज़्यादातर लैपटॉप, टैबलेट और फोन स्क्रीनें हाई-DPI हैं, हर CSS पिक्सेल के लिए दो या तीन भौतिक पिक्सेल के साथ।

कन्वर्टर के लिए, इससे कुछ नहीं बदलता। वेब परंपरा के अनुसार CSS पिक्सेल अब भी 96 DPI पर हैं। हाई-DPI का गणित ब्राउज़र संभालता है। अगर आप विशेष रूप से devicePixelRatio को लक्षित करते हुए आइकन डिज़ाइन या एसेट निर्यात कर रहे हैं (जैसे, उसी एसेट के @2x और @3x वर्शन निर्यात करना), तो हाँ, अपने स्रोत के पिक्सेल काउंट को दोगुना या तीन गुना कीजिए — लेकिन भौतिक मिलीमीटर में रूपांतरण अब भी CSS रेफरेंस के लिए 96 DPI ही उपयोग करता है।

अगर आप किसी हाई-DPI स्क्रीन पर 1:1 भौतिक आकार में विज़ुअल मॉकअप बना रहे हैं, तो आप या तो:

• 96 DPI पर CSS पिक्सेल में काम करते रहिए (अनुशंसित — OS स्केलिंग संभालता है)
• वास्तविक भौतिक पिक्सेल काउंट के लिए window.devicePixelRatio से गुणा कीजिए, और फिर भौतिक आकार के लिए डिवाइस के असली PPI से (जो हार्डवेयर पर निर्भर करता है) भाग दीजिए

कन्वर्टर सरल वर्शन करता है। किसी भी विशिष्ट स्क्रीन पर सटीक भौतिक-आकार माप के लिए, पहले Screen Ruler tool से कैलिब्रेट कीजिए।

आम बारीकियाँ

72 और 96 का घालमेल। Illustrator या Photoshop से निर्यात की गई पुरानी Mac संपत्तियाँ कभी-कभी 72 DPI मेटाडेटा टैग रखती हैं। अगर आप उन्हें 300 DPI के प्रिंट लेआउट में आयात करते हैं, तो सॉफ़्टवेयर उन्हें अप्रत्याशित रूप से ऊपर स्केल कर सकता है। हमेशा आयातित फ़ाइल के "वास्तविक" पिक्सेल आयाम जाँचिए, उसका DPI टैग नहीं।

वेब निर्यात पर "DPI"। Photoshop का "Save for Web" डिफ़ॉल्ट रूप से DPI को 72 पर सेट करता है — और इससे कोई फ़र्क नहीं पड़ता, क्योंकि ब्राउज़र टैग को नज़रअंदाज़ करते हैं और 96 मान लेते हैं। इसकी चिंता मत कीजिए। वेब के लिए पिक्सेल काउंट ही मायने रखता है।

नेटिव रेज़ोल्यूशन से नीचे प्रिंट सिकोड़ना। पढ़ने की दूरी से देखे जाने वाले प्रिंट के लिए 200 DPI से नीचे जाना — तभी नर्मी साफ दिखने लगती है। Pixel Converter आपको रोकेगा नहीं, लेकिन गणित आपको सच बता देगा: 50 mm चौड़ी 600 px की संपत्ति 305 DPI है; वही संपत्ति 100 mm चौड़ी पर सिर्फ 152 DPI है।

4K मॉनिटर पर CSS स्केलिंग भूल जाना। 200% स्केलिंग पर 4K मॉनिटर पर परीक्षित 1080p डिज़ाइन ठीक दिखता है। स्केलिंग को 100% पर गिराइए और वही डिज़ाइन आधे आकार का दिखेगा। हमेशा सामान्य उपयोगकर्ता स्केलिंग पर परीक्षण कीजिए, नेटिव रेज़ोल्यूशन पर नहीं।

रीसैंपलिंग के समय आस्पेक्ट रेशियो का खिसकना। अगर आप 1920 × 1080 की छवि को 1024 × 1024 के वर्ग में फिट करने के लिए स्केल करते हैं, तो या तो आप क्रॉप करेंगे या विकृत। पिक्सेल काउंट बदलता है; आस्पेक्ट रेशियो भी मायने रखता है। जब दोनों कारक खेल में आएँ, तो Pixel Converter को Aspect Ratio Calculator के साथ जोड़िए।

कब कौन-सा DPI चुनें

DPI चुनने का त्वरित संदर्भ:

• वेब डिज़ाइन, ऐप UI, सिर्फ ब्राउज़र की संपत्तियाँ: 96 DPI। हमेशा।
• दस्तावेज़ टेम्पलेट जो प्रिंट हो सकते हैं: लेआउट के लिए 96, लेकिन निर्यात से पहले प्रिंट आउटपुट को 300 DPI पर मॉडल कीजिए।
• प्रिंट प्रूफ, बड़े-फ़ॉर्मैट बैनर, दूर से देखे जाने वाले पोस्टर: 150 DPI ठीक है।
• पास से देखी जाने वाली मैगज़ीन, किताबें, पैकेजिंग, मार्केटिंग सामग्री: 300 DPI न्यूनतम है।
• फोटो प्रिंट, बारीक लाइन आर्ट, आवर्धन के नीचे टेक्स्ट-भारी लेआउट: 300–600 DPI।
• पुरानी Mac लीगेसी संपत्तियाँ: 72 DPI संगतता के लिए मौजूद है। नए काम के लिए इसका उपयोग मत कीजिए।

संदेह में हों तो स्क्रीन के लिए 96 और प्रिंट के लिए 300 को डिफ़ॉल्ट रखिए। Pixel Converter में दोनों एक-क्लिक प्रीसेट हैं।

सब जोड़कर

एक सामान्य ब्रांड डिज़ाइनर का दिन ऐसा दिख सकता है। प्रोडक्ट मैनेजर "एक हीरो बैनर, 1920 × 720 px, जो किसी इवेंट पोस्टर के लिए 300 DPI पर तेज़ छपे" माँगता है। आप कन्वर्टर खोलिए, पिक्सेल फील्ड में 1920 दर्ज कीजिए, 300 DPI पर स्विच कीजिए: यानी 162.56 mm चौड़ा। पोस्टर का स्पेक 297 mm × 420 mm (A3) है। 162.56 mm पर, संपत्ति सिर्फ ऊपरी आधे हिस्से को भरेगी — मतलब आपको 300 DPI पर पूरे 297 mm की चौड़ाई के लिए 3508 × 1316 px का स्रोत चाहिए। अब आपको पता है कि फोटोग्राफर से क्या माँगना है।

प्रिंट मॉकअप को अपनाने वाला एक वेब डेवलपर उल्टी दिशा में जाता है। मॉकअप 300 DPI पर 100 mm ऊँचा है — स्रोत में यानी 1181 px, लेकिन वेबसाइट स्क्रीन पर 96 DPI पर प्रदर्शित होती है। अगर वे CSS में संपत्ति को 1181 px ऊँचा रखते हैं, तो वह स्क्रीन पर लगभग 308 mm ऊँची होगी, बहुत बड़ी। उन्हें या तो 378 px पर डाउनसैंपल करना होगा (= 100 mm × 96 / 25.4) या CSS आयामों को स्पष्ट रूप से mm इकाइयों में सेट करना होगा।

कुछ बार करने के बाद ये रूपांतरण याद कर लेने लायक सरल हैं। लेकिन जब आप तेज़ी से माध्यमों के बीच संपत्तियाँ ले-दे रहे होते हैं, तब एक समर्पित उपकरण होना — जो गणित संभाले, DPI प्रीसेट याद रखे, और परिणाम कॉपी करने दे — एक स्मूथ वर्कफ्लो और लगातार चलते हिसाब के बीच का फर्क बन जाता है। ठीक यही Pixel Converter के लिए है।

संबंधित

• Aspect Ratio Calculator — जब आप पिक्सेल आयाम परिवर्तित कर रहे हों, तब आस्पेक्ट रेशियो भी मायने रखता है
• Screen Ruler — कैलिब्रेटेड 1:1 आकार पर अपनी स्क्रीन के सामने भौतिक वस्तुएँ मापने के लिए
• Device Specs Database — किसी भी फोन, टैबलेट या लैपटॉप का असली PPI देखने के लिए