क्या वेब डिज़ाइन के लिए छवियों को 72DPI पर रखना अनिवार्य है?


50

मैं एक साल से अधिक समय से वेब बैनर डिजाइन कर रहा हूं लेकिन डीपीआई पर कभी विचार नहीं किया गया।

मैं डिफ़ॉल्ट 72DPI का उपयोग कर रहा था, लेकिन अब मैं जानना चाहता हूं कि क्या 72DPI में वेब डिज़ाइन बनाना आवश्यक है? क्या होगा यदि हम इससे अधिक का उपयोग करते हैं, उदाहरण के लिए 200DPI?

मुझे पता है कि अधिक डीपीआई का मतलब अधिक गुणवत्ता वाली छवि है और यही कारण है कि मैं उच्च डीपीआई का उपयोग करना चाहता हूं, लेकिन हाल ही में मैंने कहीं पढ़ा है कि वेब बैनर के लिए हमें 72DPI का उपयोग करना चाहिए। मैं सिर्फ यह जानना चाहता हूं कि क्या यह अनिवार्य है और क्या यह किसी भी सूरत में नकारात्मक रूप से प्रभावित होता है?

जवाबों:


84

PPI (Pixels Per Inch) सेटिंग्स का उपयोग वेब इमेज में नहीं किया जाता है। वेब पर मौजूद छवियां, रेटिना प्रदर्शित करती हैं या अन्यथा, उनके पिक्सेल आयामों (चौड़ाई और ऊंचाई) द्वारा प्रदर्शित की जाती हैं, न कि कोई पीपीआई / डीपीआई सेटिंग। वास्तव में, कई वेब छवियां जैसे png, gif, jpg भी अपने आंतरिक डेटा में ppi सेटिंग संग्रहीत नहीं कर सकते हैं और चौड़ाई और ऊँचाई सेटिंग्स पर निर्भर करते हैं।

एक 100 पिक्सेल x 100 पिक्सेल छवि किसी भी PPI / DPI सेटिंग की परवाह किए बिना वेब पर प्रदर्शित होती है।

यही कारण है कि एक बढ़ी हुई ppi सेटिंग के बजाय रेटिना डिस्प्ले के लिए चित्र 2x आकार में सहेजे जाते हैं। हालांकि, रेटिना डिस्प्ले की पिक्सेल घनत्व अधिक होती है, फिर भी वे उस छवि को प्रदर्शित करते हैं जो किसी भी स्क्रीन की चौड़ाई और ऊंचाई किसी भी पीपीआई सेटिंग पर आधारित नहीं है।

वास्तव में, 1980 के दशक के मध्य से 72ppi के पिक्सेल घनत्व का उपयोग करने वाला एक मॉनिटर नहीं देखा गया है। 72ppi लगभग 30 वर्षों के लिए सटीक नहीं है। वास्तव में, यह विंडोज सिस्टम के लिए कभी भी सटीक नहीं था क्योंकि विंडोज पिक्सेल घनत्व के लिए विंडोज 96ppi का डिफ़ॉल्ट उपयोग करता है।

मुझे विश्वास नहीं है? इसे अपने लिए आजमाएं। फ़ोटोशॉप में दोनों छवियों को 100 पिक्सेल से 100 पिक्सेल बनाएं। एक छवि 72ppi और दूसरी 300ppi बनाओ। उन दोनों को वेब के लिए सहेजें .. क्या वे वेब ब्राउज़र में कोई भिन्न हैं? नहीं। वे अभी भी 100px छवियों द्वारा दोनों 100px हैं।

DPI (डॉट्स प्रति इंच) सेटिंग्स केवल एक छवि को प्रिंट करते समय लागू होती हैं। DPI स्क्रीन के लिए किस्मत में छवियों पर कोई असर नहीं है। डीपीआई स्याही डॉट्स / स्पॉट की मात्रा को संदर्भित करता है जो प्रेस एक इंच के भीतर होगा। चूंकि पृथ्वी पर कोई भी प्रदर्शन स्याही का उपयोग नहीं करता है, डीपीआई स्क्रीन प्रदर्शित करने से संबंधित किसी भी चीज के लिए उपयोग करने के लिए एक गलत शब्द है।

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

इससे कोई फ़र्क नहीं पड़ता कि आप वेब छवियों के लिए किस ppi सेटिंग का उपयोग करते हैं। यह (पिक्सेल) चौड़ाई और (पिक्सेल) एक छवि की ऊंचाई है जो महत्वपूर्ण हैं।

कई छवियों के साथ काम करते समय लगातार बने रहना महत्वपूर्ण है। आप चाहते हैं कि आपकी सभी छवियां एक ही ppi पर सेट की जाएं ताकि आप आकार बदलने से बच सकें और पहलुओं को स्केल करने के लिए आपको छवियों के बीच टुकड़ों को स्थानांतरित करना चाहिए। चाहे आप 72, 96, 200 या 145.8 पीपीआई का उपयोग करना चुनते हैं, कोई फर्क नहीं पड़ता, लेकिन सभी छवियों को एक ही सेट किया जाना चाहिए।


NB कि आप वेब साइट को छवियों के उच्च DPI संस्करणों को लोड करने का निर्देश दे सकते हैं, यदि यह उपयोगी है: stackoverflow.com/a/43823483/32453
rogerdpack

2
दरअसल @rogerdpack आपको ब्राउज़र को बड़ी छवि (पिक्सेल चौड़ाई और पिक्सेल ऊंचाई) लोड करने के लिए कह सकता है .. अर्थात 2x या यहां तक ​​कि 3x। यह अभी भी किसी भी पीपीआई सेटिंग्स को नहीं पढ़ रहा है।
स्कॉट

5

मैं विवरण में जाऊंगा कि वास्तव में "डीपीआई" का अर्थ क्या है; उस के साथ, आप केवल स्वयं ही उत्तर देख सकते हैं। :

संक्षेप में, आपकी छवि में रंग के डॉट्स होते हैं, जो एक दूसरे के बगल में होते हैं। लेकिन किसी भी भौतिक अर्थ में आकार नहीं है।

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

यदि हम स्क्रीन पर इस प्राकृतिक तरीके से एक छवि प्रदर्शित करते हैं, तो हम इसका आकार माप सकते हैं।
उदाहरण के लिए, हमारी छवि 500 ​​डॉट्स चौड़ी है, हम इन्हें स्क्रीन पर रंगीन आयतों में डालते हैं, और देखते हैं कि यह 5 इंच चौड़ा है। फिर, हमारे पास प्रति इंच 100 आयताकार हैं, हमारे 100 डॉट्स प्रति इंच दिखाते हैं।
यानी हमारी इमेज स्क्रीन पर 100dpi है।
लेकिन हमने अपनी छवि फ़ाइल में डीपीआई मूल्य को भी नहीं देखा!

अब, अगर हम अपनी फाइल को देखते हैं, तो यह अच्छी तरह से कह सकता है कि छवि 200dpi है! डीपीआई मूल्य इस बारे में है कि स्क्रीन की चौड़ाई या ऊंचाई प्रति इंच कितने रंग डॉट्स दिखाई देते हैं। इसलिए, छवि में डीपीआई मूल्य हमें बता रहा है कि प्रदर्शित होने पर हमारी छवि 2.5 इंच चौड़ी होगी - एक वादे के रूप में, एक तथ्य के रूप में नहीं

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

फ़ाइल आशाजनक थी - 200dpi कहकर - यह "दिखाए जाने पर 2.5 इंच चौड़ी" होगी। फिर, हमने एक स्क्रीन का उपयोग किया जो इसे 5 इंच चौड़ा दिखा रहा था - हम यह जान सकते हैं कि क्योंकि हम जानते हैं कि वास्तविक स्क्रीन क्या है।
आम तौर पर हम यह भी नहीं जानते हैं कि अंतिम उपयोगकर्ता प्रदर्शन के रूप में क्या उपयोग करेगा, इसलिए हम केवल वैसे भी अनुमान लगा सकते हैं,

तो, अब यह समझ में आता है:

  • हम dpi छवियों को नहीं जानते थे, एक स्क्रीन पर दिखाया गया है, होगा, क्योंकि हम स्क्रीन को नहीं जानते थे।
  • लेकिन हमारे पास एक विचार था कि यह कैसा दिखना चाहिए, "मोटे तौर पर यह आकार ... ठीक है, फिर हमें लगभग 200 डीपीआई या ऐसा करने की आवश्यकता है।" और फ़ाइल में "200 डीपीआई" को बचाया
  • बाद में, हमने स्क्रीन को देखा और मापा कि यह वास्तव में, 100 डीपीआई है;

और, केवल एक स्क्रीन नहीं है जिस पर छवि दिखाई जा सकती है - वे आकार में भिन्न हो सकते हैं, इसलिए छवि फ़ाइल बनाते समय एक वास्तविक डीपीआई मूल्य जानना भी संभव नहीं है।

यह भी देखें कि वास्तव में एक "पिक्सेल" क्या है?


सीधे सवाल पर, उपरोक्त के आधार पर:

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

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


कुछ संदर्भ हैं जहां एक छवि में एम्बेडेड डीपीआई एक फर्क पड़ेगा। यदि आप इसे उदाहरण के लिए Microsoft Word में आयात करते हैं, तो यह मुद्रित पृष्ठ पर मापा जाने पर छवि को DPI द्वारा निहित आकार का आकार देगा। आपका उत्तर सही है, हालांकि, DPI को अक्सर अनदेखा किया जाता है।
मार्क रैनसम

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

फ्लैटबेड स्कैनर जैसे कुछ उपकरण वास्तव में एक सार्थक डीपीआई मूल्य प्रदान कर सकते हैं। सिर्फ कैमरे नहीं।
मार्क रैनसम

4

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

हालाँकि, यदि आप प्रत्येक दस्तावेज़ के लिए फ़ोटोशॉप और विभिन्न पिक्सेल घनत्वों का उपयोग करने की योजना बनाते हैं, तो परतों को खींचते हैं और दस्तावेज़ों की परत शैलियों के बीच परत शैलियों को कॉपी करते हैं - 326PPI रेटिना iPhone दस्तावेज़ से 264PPI रेटिना iPad दस्तावेज़ के लिए एक परत को खींचने का अर्थ है कि सभी परत शैलियों को स्केल किया जाएगा। 20% तक (तब निकटतम पूर्णांक तक गोल)। और शायद वह नहीं है जो आप चाहते हैं। साथ ही, OS X का पूर्वावलोकन 72PPI छवियों को सटीक आकार में प्रदर्शित करेगा, भले ही आपने इसे कैसे सेट किया हो।

पिक्सेल प्रति इंच केवल एक टैग है

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


0

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

एक को छोड़कर सभी ब्राउज़रों पर, वे समान दिखते थे - आकार-वार और गुणवत्ता-वार। हालाँकि, Google क्रोम के उपयोग के साथ, 72 पर बना एक ठीक लग रहा था, लेकिन 720 पर बनाया गया एक बहुत छोटा था - जैसे कि यह आकार 1/10 था।

सुखद दुख। 72 पर सभी फ्री-स्टैंडिंग (वेब ​​पेज के भीतर विवश नहीं) छवियों को रखने के लिए एक तर्क की तरह दिखता है। वस्तुतः मेरे सभी (जो कई सैकड़ों में संख्या) 120 डीपीआई पर हैं। भले ही वे अभी भी क्रोम पर काफी बड़े दिखते हैं, हो सकता है कि उस ब्राउज़र को ध्यान में रखते हुए मुझे उन सभी को 72 पर डालने का काम करना चाहिए। शायद क्रोम की प्राथमिकताओं में ठीक प्रिंट में कहीं एक उपाय है।


1
क्या आपने इस परीक्षा को ऑनलाइन कहीं रखा था? या यह सिर्फ उनके आसपास किसी भी HTML के बिना शुद्ध चित्र था?
माइकल शूमाकर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.