ওয়েব ডিজাইনের জন্য চিত্রগুলি 72DPI এ রাখা কি বাধ্যতামূলক?


50

আমি এক বছরেরও বেশি সময় ধরে ওয়েব ব্যানার ডিজাইন করে আসছি তবে কখনই ডিপিআই বিবেচনা করি না।

আমি ডিফল্ট 72DPI ব্যবহার করছিলাম তবে এখন আমি জানতে চাই যে 72DPI তে ওয়েব ডিজাইন তৈরি করা কি প্রয়োজনীয়? আমরা যদি এর চেয়ে বেশি ব্যবহার করি, উদাহরণস্বরূপ 200DPI?

আমি জানি যে আরও ডিপিআই এর অর্থ আরও মানের মানের চিত্র এবং আমি উচ্চ ডিপিআই কেন ব্যবহার করতে চাই তা জানতে পারি তবে সম্প্রতি আমি কোথাও পড়েছি যে ওয়েব ব্যানারগুলির জন্য আমাদের we২ ডিপিআই ব্যবহার করা উচিত। আমি কেবল এটি বাধ্যতামূলক কিনা তা জানতে চাই এবং এটি কোনও দিক থেকে নেতিবাচকভাবে প্রভাবিত করে?

উত্তর:


84

পিপিআই (প্রতি ইঞ্চায় পিক্সেল) সেটিংস ওয়েব চিত্রগুলিতে ব্যবহৃত হয় না। ওয়েবে চিত্রগুলি, রেটিনা প্রদর্শন করে বা অন্যথায়, তাদের পিক্সেল মাত্রা (প্রস্থ এবং উচ্চতা) দ্বারা কোনও পিপিআই / ডিপিআই সেটিংস নয়। আসলে, png, gif, jpg এর মতো অনেক ওয়েব চিত্র এমনকি তাদের অভ্যন্তরীণ ডেটাতে একটি পিপিআই সেটিং সঞ্চয় করতে পারে না এবং প্রস্থ এবং উচ্চতার সেটিংসে নির্ভর করে।

কোনও পিপিআই / ডিপিআই সেটিং নির্বিশেষে ওয়েবে এমন একটি 100 পিক্সেল x 100 পিক্সেল চিত্র প্রদর্শিত হয়।

এ কারণেই রেটিনা প্রদর্শনগুলির জন্য চিত্রগুলি বর্ধিত পিপিআই সেটিংয়ের পরিবর্তে 2x আকারে সংরক্ষণ করা হয়। পিক্সেল ঘনত্ব অক্ষিপট প্রদর্শনের তবে বেশি, তারা এখনও ইমেজ যাই হোক না কেন আপনার স্ক্রীণের রাজ্যের প্রস্থ এবং কোন পিপিআই সেটিং উপর ভিত্তি করে একটি ইমেজ উচ্চতার প্রদর্শন।

বাস্তবে, 72ppi এর পিক্সেল ঘনত্ব ব্যবহার করা একটি মনিটর 1980 এর দশকের গোড়ার দিকে থেকে দেখা যায়নি। 72ppi প্রায় 30 বছর ধরে সঠিক হয়নি। আসলে, উইন্ডোজ সিস্টেমগুলির ক্ষেত্রে এটি কখনই সঠিক ছিল না কারণ উইন্ডোজ পিক্সেল ঘনত্বের জন্য 96ppi এর একটি ডিফল্ট ব্যবহার করে।

বিশ্বাস করবেন না? নিজের জন্য চেষ্টা করুন। ফটোশপে দুটি ছবি তৈরি করুন 100 পিক্সেল দ্বারা 100 পিক্সেল both একটি চিত্র 72ppi এবং অন্য 300ppi করুন। তাদের উভয়ই ওয়েবের জন্য সংরক্ষণ করুন .. ওয়েব ব্রাউজারে এগুলি কি আলাদা? নাঃ। তারা উভয়ই এখন 100px বাই 100px চিত্র।

ডিপিআই (প্রতি ইঞ্চিতে ডটস) সেটিংস কেবল তখনই প্রযোজ্য যখন কোনও চিত্র ছাপানো হবে। স্ক্রিনের জন্য নির্ধারিত চিত্রগুলিতে ডিপিআইয়ের কোনও ফল নেই। ডিপিআই হ'ল কালি বিন্দু / দাগগুলির পরিমাণটিকে ইঞ্চির মধ্যে চাপবে। যেহেতু পৃথিবীতে কোনও প্রদর্শন কালি ব্যবহার করে না, তাই ডিসপ্লে স্ক্রিন সম্পর্কিত কোনও কিছুর জন্য ডিপিআই হ'ল একটি ভুল শব্দ।

সচেতন হন কিছু মোবাইল উত্পাদনকারীরা ডিপিআইএক্স বা এক্সডিপিআই শব্দটি ব্যবহার করতে পছন্দ করে যা কখনও কখনও কেবল ডিপিআইতে সংক্ষেপিত হয়। এটি সংক্ষিপ্ত রূপের traditionalতিহ্যগত ফর্ম নয় এবং নির্মাতারা কেবল জলাশয়কে এক বিরাট চুক্তিতে পরিণত করেছেন। আপনি যদি মোবাইল স্ক্রিন রেজোলিউশনের বিষয়ে ডিপিআই দেখতে পান তবে তারা কার্যকর পিপিআই সম্পর্কে কথা বলছেন এবং প্রতি ইঞ্চিতে ডটসকে সত্যই উল্লেখ করছেন না । আরও উপযুক্ত সংক্ষিপ্ত আকারটি হবে এক্সপিপিআই বা পিপিআইএক্স কারণ মোবাইল স্ক্রিনগুলি, সমস্ত প্রদর্শনগুলির মতো, পিক্সেল ব্যবহার করে না কালি।

আপনি ওয়েব চিত্রগুলির জন্য কী পিপিআই সেটিংস ব্যবহার করেন তাতে কোনও তফাত আসে না। এটি একটি চিত্রের (পিক্সেল) প্রস্থ এবং (পিক্সেল) উচ্চতা যা গুরুত্বপূর্ণ।

একাধিক চিত্রের সাথে কাজ করার সময় এটি ধারাবাহিকভাবে থাকা গুরুত্বপূর্ণ। আপনি চাইবেন যে আপনার সমস্ত চিত্র একই আকারের পিপিআইতে সেট করা উচিত যাতে আপনি চিত্রগুলির মধ্যে টুকরো টুকরো টানতে চান তবে আকারগুলির আকার পরিবর্তন এবং স্কেলিং এড়ান। আপনি 72, 96, 200 বা 145.8 পিপিআই ব্যবহার করা চয়ন করুন না কেন, সমস্ত চিত্র একই সেট করা উচিত।


বিশেষ দ্রষ্টব্য যে আপনার ওয়েব সাইটে ইমেজ উচ্চ DPI সংস্করণ লোড করতে নির্দেশ করতে পারেন ক্ষেত্রে এটি উপযোগী: stackoverflow.com/a/43823483/32453
rogerdpack

2
আসলে @rogerdpack আপনি ব্রাউজারকে বৃহত্তর চিত্র (পিক্সেল প্রস্থ এবং পিক্সেল উচ্চতা) লোড করতে বলতে পারবেন .. অর্থাৎ 2x বা এমনকি 3xও। এটি এখনও কোনও পিপিআই সেটিংস পড়ছে না।
স্কট

5

উদাহরণস্বরূপ, "ডিপিআই" বলতে আসলে কী বোঝায় তা বিশদে যাব; তার সাথে, আপনি কেবল উত্তরটি নিজেরাই দেখতে পাবেন। :

সংক্ষেপে, আপনার ছবিতে রঙের বিন্দু রয়েছে, যা একে অপরের পাশে রয়েছে। তবে কোনও শারীরিক অর্থে এর আকার নেই।

এখন, আপনি যখন কোনও স্ক্রিনে কোনও চিত্র দেখান, আপনি সাধারণত চিত্রটির বিন্দু রঙগুলি রঙিন আয়তক্ষেত্রের রাস্টারগুলিতে রাখবেন যা আপনার স্ক্রিনটি প্রদর্শন করতে পারে। মনে রাখবেন যে উভয়কেই আমি এখানে "ডটস" এবং আয়তক্ষেত্রগুলি বলি, "পিক্সেল" বলা হয় - তবে কাছাকাছিভাবে দেখলে এগুলি কিছু আলাদা something

আমরা যদি কোনও স্ক্রিনে প্রাকৃতিক উপায়ে কোনও চিত্র প্রদর্শন করি তবে আমরা এর আকারটি পরিমাপ করতে পারি।
উদাহরণস্বরূপ, আমাদের চিত্রটি 500 ডট প্রশস্ত, আমরা এগুলি রঙিন আয়তক্ষেত্রগুলিতে স্ক্রিনে রেখেছি এবং দেখুন এটি 5 ইঞ্চি প্রস্থ। তারপরে, আমাদের প্রতি ইঞ্চি 100 আয়তক্ষেত্র রয়েছে, প্রতি ইঞ্চিতে আমাদের 100 টি বিন্দু দেখায়।
অর্থাত, আমাদের চিত্রটির পর্দায় 100dpi রয়েছে।
তবে আমরা আমাদের ইমেজ ফাইলে ডিপিআই মানটিও দেখিনি!

এখন, আমরা যদি আমাদের ফাইলটি লক্ষ্য করি তবে এটি ভালভাবে বলতে পারে যে চিত্রটি 200 ডিপিআই! ডিপিআই মান হ'ল স্ক্রিনের প্রস্থ বা উচ্চতার প্রতি ইঞ্চি কত রঙিন বিন্দু দৃশ্যমান। সুতরাং, চিত্রটির ডিপিআই মান আমাদের বলছে যে প্রদর্শিত হবে যখন আমাদের চিত্রটি 2.5 ইঞ্চি প্রশস্ত হবে - একটি প্রতিশ্রুতি হিসাবে, সত্য হিসাবে নয়

যখন আমরা চিত্রটি বিন্দুগুলি স্ক্রিনে অর্পণ করি, তখন আমরা সে সম্পর্কেও চিন্তা করি না, কারণ আমরা কেবল এটি প্রদর্শন করেছি এবং চিত্রটির পর্দার উপস্থাপনের প্রকৃত, শারীরিক ডিপিআই পরিমাপ করেছি
সুতরাং, যেমন আপনি দেখতে পাচ্ছেন, প্রতিশ্রুতিটি কেবল সাধারণ ভুল ছিলআর কেউ পাত্তা দেয় না! কারণ এটি কেবল প্রাসঙ্গিক নয়।

ফাইলটি প্রতিশ্রুতিবদ্ধ ছিল - 200dpi বলে - এটি "দেখানো অবস্থায় 2.5 ইঞ্চি প্রশস্ত হবে"। তারপরে, আমরা এমন একটি পর্দা ব্যবহার করেছি যা এটি 5 ইঞ্চি প্রশস্ত হিসাবে দেখিয়েছিল - আমরা এটি জানতে পারি কারণ আসল পর্দাটি কী তা আমরা জানি।
সাধারণত আমরা এমনকি শেষ ব্যবহারকারী প্রদর্শন হিসাবে কী ব্যবহার করবে তা জানি না, তাই আমরা কেবল যাইহোক অনুমান করতে পারি,

সুতরাং, এখন এটি উপলব্ধি করে:

  • আমরা স্ক্রিনে প্রদর্শিত ছবিগুলি, ডিপিআই জানতাম না, কারণ আমরা স্ক্রিনটি জানতাম না।
  • তবে এটির মতো দেখতে কেমন হবে তা আমাদের ধারণা ছিল, "মোটামুটি এই আকার ... ঠিক আছে, তাহলে আমাদের প্রায় 200 ডিপিআই বা আরও প্রয়োজন।" এবং ফাইলটিতে "200dpi" সংরক্ষণ করে
  • পরে, আমরা পর্দার দিকে তাকিয়ে দেখেছি যে এটি আসলে, 100 ডিপিআই;

এবং, কেবলমাত্র একটি পর্দাই চিত্রটি প্রদর্শিত হতে পারে - সেগুলি আকারে আলাদা হতে পারে, তাই কোনও চিত্র ফাইল তৈরি করার সময় একটি সত্যিকারের ডিপিআই মান জানাও সম্ভব নয়।

একটি "পিক্সেল" ঠিক কী সম্পর্কে আমার উত্তরটিও দেখুন ?


উপরের উপর ভিত্তি করে সরাসরি প্রশ্নে:

আপনি যখন কোনও চিত্র ফাইলে ডিপিআই নির্দিষ্ট করেন, তা শেষ পর্যন্ত চিত্র প্রদর্শনের মানের সাথে সরাসরি রিটেড হয় না।
তবে এটি চিত্রের মানের সম্পর্কে যোগাযোগ করতে ব্যবহৃত হতে পারে - অভিপ্রায়গুলির শর্তাদিতে: আপনি বলতে পারেন "আমি এই চিত্রটি 200 ডিপিআই স্ক্রিনে প্রদর্শিত হতে চাই"।

যদি আমি এই চিত্রটি দেখাতে চাই তবে আমি যত্ন নিতে পারি এবং 200 ডিপিআই স্ক্রিনটি সন্ধান করতে পারি; বা সম্ভবত আমি কেবল আমার ডেস্কে থাকা একটি পুরানো 75 ডিপিআই স্ক্রিন ব্যবহার করব। চিত্রটি বেশ বড় হবে, আমাকে স্ক্রোল করতে হবে - তবে এটি আমার সমস্যা, এবং: সত্যিকার অর্থে কী ব্যবহৃত হয় তা আপনি খুঁজেও পাবেন না - 200 ডিপিআই মান চিত্রের মান নিয়ন্ত্রণ করে না - এটি ঠিক কীভাবে এটি প্রদর্শিত হবে তা জানিয়েছে "ডানদিকে উপায় "যদি আমি যত্নশীল।


কিছু প্রসঙ্গ আছে যেখানে একটি ইমেজ এমপি থাকা ডিপিআই একটি পার্থক্য তৈরি করবে। উদাহরণস্বরূপ আপনি যদি মাইক্রোসফ্ট ওয়ার্ডে এটি আমদানি করেন তবে এটি মুদ্রিত পৃষ্ঠায় পরিমাপ করার সময় চিত্রটি ডিপিআই দ্বারা বিভক্ত আকার হিসাবে মাপবে। আপনার উত্তরটি সঠিক হলেও, ডিপিআই প্রায়শই উপেক্ষা করা হয়।
মার্ক র্যানসোম

ভাল যুক্তি. সুতরাং চিত্রটি আউটপুট ডিভাইসের ডিপিআইতে অভিযোজিত, যা তাত্ত্বিকভাবে সঠিক কাজ করা। অনুশীলনে, অভিযোজিত ডিপিআই মানগুলি বিভিন্ন আউটপুট ডিভাইসগুলির জন্য বোঝানো হয়েছিল - স্ক্রিন এবং প্রিন্টার - এবং বেমানান। সেন্টিমিটার এবং ইঞ্চিতে দৈর্ঘ্যের মান যুক্ত করার মতো বিভিন্ন ইউনিটে প্রকাশিত মানগুলির মতো।
ভোলকার সিগেল

ফ্ল্যাটবেড স্ক্যানারগুলির মতো কিছু ডিভাইস আসলে একটি অর্থবহ ডিপিআই মান সরবরাহ করতে পারে। শুধু ক্যামেরা নয়।
মার্ক রান্সম

4

যদিও পিপিআই অবশ্যই স্পষ্টভাবে আসে না - এটি পিক্সেল মাত্রা যা ওয়েব এবং অ্যাপ্লিকেশন ডিজাইনের জন্য গুরুত্বপূর্ণ, আপনি ডিজাইন অ্যাপ্লিকেশনগুলি ব্যবহার এবং পিপিআই সেটিংস মিশ্রণ সম্পর্কে খুব সতর্ক হওয়া উচিত। কারণটা এখানে:

তবে, আপনি যদি প্রতিটি নথির জন্য ফটোশপ এবং বিভিন্ন পিক্সেল ঘনত্বগুলি ব্যবহার করার পরিকল্পনা করেন, স্তরগুলি টানুন এবং নথির স্কেল লেয়ার শৈলীর মধ্যে স্তর শৈলীগুলি অনুলিপি করতে - 326PPI রেটিনা আইফোন নথি থেকে একটি 264PPI রেটিনা আইপ্যাড নথিতে একটি স্তর টেনে নিয়ে যাওয়ার অর্থ হ'ল সমস্ত স্তর শৈলীর আকার কমিয়ে দেওয়া হবে 20% দ্বারা (তারপরে নিকটতম পূর্ণসংখ্যার দিকে বৃত্তাকার) এবং এটি সম্ভবত আপনি চান না। এছাড়াও, ওএস এক্স এর পূর্বরূপটি 72PPI চিত্রগুলি সঠিক আকারে প্রদর্শন করবে, আপনার এটি কীভাবে সেট আপ করা হোক না কেন।

প্রতি ইঞ্চি পিক্সেল কেবল একটি ট্যাগ

এই কারণগুলির জন্য আমি আমার সমস্ত ডিজাইনের নথিগুলিতে 72PPI বরাদ্দ করি এবং আমি আপনাকেও একই পরামর্শ দেওয়ার পরামর্শ দিই। চিত্রের ডেটা পরিবর্তন না করেই আপনার ফটোশপ ডকুমেন্টের পিক্সেল ঘনত্ব পরিবর্তন করতে, চিত্রের আকার ডায়ালগটি খুলুন, আকার পরিবর্তন করুন চিত্রটি নির্বাচন করুন এবং পছন্দসই পিক্সেল ঘনত্বটি টাইপ করুন।


0

আমি ফটোশপ দিয়ে তৈরি একটি চিত্রের দুটি অনুলিপি মাত্র সন্ধান করেছি। যাইহোক, আমি একটির 72 ডিপিআই এবং অন্যটি 720 ডিপিআইতে সেট করেছিলাম তা দেখার জন্য যে আমি ব্যবহার করি কোনও ব্রাউজার তাদের পর্দায় বিভিন্ন আকারের রেন্ডার করে কিনা।

একটি ব্যতীত অন্য সমস্ত ব্রাউজারে এগুলি দেখতে একরকম - আকার অনুসারে এবং গুণমানবান। তবে, গুগল ক্রোমের ব্যবহারের সাথে, 72২-এ তৈরি করাটি দেখতে খুব সুন্দর লাগছিল, তবে 720 এ তৈরি করাটি অত্যন্ত ক্ষুদ্র ছিল - এটি আকারের 1/10 ছিল।

শুভ দুঃখ। এটি দেখতে সমস্ত ফ্রি-স্ট্যান্ডিং (ওয়েব পৃষ্ঠায় সীমাবদ্ধ নয়) চিত্রগুলি 72-এ রাখার পক্ষে যুক্তির মতো মনে হচ্ছে V ভার্চুয়ালি আমার সমস্ত (যা বহু শতাধিকের মধ্যে) 120 ডিপিআই-তে রয়েছে। যদিও তারা ক্রোমে এখনও যথেষ্ট পরিমাণে বড় দেখাচ্ছে, সম্ভবত সেই ব্রাউজারটি মনে রেখে আমার সেগুলি 72২ এ রাখার কাজ করা উচিত Chrome ক্রোমের পছন্দগুলিতে সূক্ষ্ম মুদ্রণের কোথাও এর প্রতিকার রয়েছে।


1
আপনি এই পরীক্ষা কোথাও রেখেছিলেন? নাকি এগুলি চারপাশে কোনও HTML ছাড়া খাঁটি চিত্র ছিল?
মাইকেল
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.