পরিবর্তনশীল পিক্সেল ঘনত্বের জন্য উচ্চ DPI ছবি

Boris Smus

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

• বিভিন্ন ফর্ম ফ্যাক্টর সহ ডিভাইসের বড় বৈচিত্র্য।
• সীমাবদ্ধ নেটওয়ার্ক ব্যান্ডউইথ এবং ব্যাটারি লাইফ।

ছবির ক্ষেত্রে, ওয়েব অ্যাপ ডেভেলপারদের লক্ষ্য হল যতটা সম্ভব দক্ষতার সাথে সেরা মানের ছবি পরিবেশন করা । এই নিবন্ধটি আজ এবং অদূর ভবিষ্যতে এটি করার জন্য কিছু দরকারী কৌশল কভার করবে।

সম্ভব হলে ছবি এড়িয়ে চলুন

কীটের এই ক্যানটি খোলার আগে, মনে রাখবেন যে ওয়েবে অনেক শক্তিশালী প্রযুক্তি রয়েছে যা মূলত রেজোলিউশন- এবং ডিপিআই-স্বাধীন। বিশেষত, ওয়েবের স্বয়ংক্রিয় পিক্সেল স্কেলিং বৈশিষ্ট্যের কারণে পাঠ্য, SVG এবং CSS-এর বেশিরভাগই "শুধু কাজ করবে" ( devicePixelRatio এর মাধ্যমে)।

এটি বলেছিল, আপনি সর্বদা রাস্টার চিত্রগুলি এড়াতে পারবেন না। উদাহরণস্বরূপ, আপনাকে এমন সম্পদ দেওয়া হতে পারে যা বিশুদ্ধ SVG/CSS-এ প্রতিলিপি করা বেশ কঠিন হবে, অথবা আপনি একটি ফটোগ্রাফ নিয়ে কাজ করছেন। আপনি স্বয়ংক্রিয়ভাবে চিত্রটিকে SVG-তে রূপান্তর করতে পারলেও, ফটোগ্রাফের ভেক্টরাইজ করা সামান্য অর্থপূর্ণ কারণ স্কেল-আপ সংস্করণগুলি সাধারণত ভাল দেখায় না।

পটভূমি

প্রদর্শন ঘনত্ব একটি খুব সংক্ষিপ্ত ইতিহাস

প্রারম্ভিক দিনগুলিতে, কম্পিউটার ডিসপ্লেগুলির একটি পিক্সেল ঘনত্ব ছিল 72 বা 96dpi ( প্রতি ইঞ্চিতে বিন্দু )।

ডিসপ্লেগুলি পিক্সেলের ঘনত্বে ধীরে ধীরে উন্নত হয়, যা মূলত মোবাইল ব্যবহারের ক্ষেত্রে দ্বারা চালিত হয়, যেখানে ব্যবহারকারীরা সাধারণত তাদের ফোনগুলি তাদের মুখের কাছাকাছি ধরে রাখে, পিক্সেলগুলিকে আরও দৃশ্যমান করে তোলে। 2008 সাল নাগাদ, 150dpi ফোন ছিল নতুন আদর্শ। বর্ধিত ডিসপ্লে ঘনত্বের প্রবণতা অব্যাহত ছিল, এবং আজকের নতুন ফোন 300dpi ডিসপ্লে স্পোর্ট করে (অ্যাপলের "রেটিনা" ব্র্যান্ডেড)।

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

বাস্তবে, কম ঘনত্বের ছবিগুলি নতুন স্ক্রিনে পুরানোগুলির মতো একই রকম দেখা উচিত, তবে খাস্তা চিত্রগুলির তুলনায় উচ্চ ঘনত্বের ব্যবহারকারীরা দেখতে অভ্যস্ত, কম ঘনত্বের ছবিগুলি ঝাঁকুনিযুক্ত এবং পিক্সেলেড দেখায়৷ একটি 2x ডিসপ্লেতে 1x ছবি কেমন দেখাবে তার একটি মোটামুটি সিমুলেশন নিচে দেওয়া হল। বিপরীতে, 2x চিত্রটি বেশ ভাল দেখাচ্ছে।

ওয়েবে পিক্সেল

যখন ওয়েব ডিজাইন করা হয়েছিল, তখন 99% ডিসপ্লে ছিল 96dpi (অথবা হওয়ার ভান করা হয়েছিল ), এবং এই ফ্রন্টে ভিন্নতার জন্য কিছু বিধান করা হয়েছিল। স্ক্রিনের আকার এবং ঘনত্বের একটি বড় বৈচিত্র্যের কারণে, বিভিন্ন ধরনের পর্দার ঘনত্ব এবং মাত্রা জুড়ে ছবিগুলিকে সুন্দর দেখানোর জন্য আমাদের একটি আদর্শ উপায়ের প্রয়োজন ছিল৷

HTML স্পেসিফিকেশন সম্প্রতি একটি রেফারেন্স পিক্সেল সংজ্ঞায়িত করে এই সমস্যাটি মোকাবেলা করেছে যা নির্মাতারা একটি CSS পিক্সেলের আকার নির্ধারণ করতে ব্যবহার করে।

রেফারেন্স পিক্সেল ব্যবহার করে, একজন প্রস্তুতকারক মান বা আদর্শ পিক্সেলের সাপেক্ষে ডিভাইসের ফিজিক্যাল পিক্সেলের আকার নির্ধারণ করতে পারে। এই অনুপাতটিকে ডিভাইস পিক্সেল অনুপাত বলা হয়।

ডিভাইসের পিক্সেল অনুপাত গণনা করা হচ্ছে

ধরুন একটি স্মার্ট ফোনের একটি স্ক্রীন রয়েছে যার ফিজিক্যাল পিক্সেল সাইজ প্রতি ইঞ্চিতে 180 পিক্সেল (ppi)। ডিভাইস পিক্সেল অনুপাত গণনা তিনটি পদক্ষেপ নেয়:

1. রেফারেন্স পিক্সেলের জন্য ডিভাইসটি যে দূরত্বে ধরে রাখা হয়েছে তার প্রকৃত দূরত্বের তুলনা করুন।

   বৈশিষ্ট অনুসারে, আমরা জানি যে 28 ইঞ্চিতে, আদর্শটি প্রতি ইঞ্চিতে 96 পিক্সেল। যাইহোক, যেহেতু এটি একটি স্মার্ট ফোন, তাই লোকেরা ল্যাপটপের চেয়ে ডিভাইসটিকে তাদের মুখের কাছে ধরে রাখে। আসুন অনুমান করি যে দূরত্বটি 18 ইঞ্চি হবে।

2. প্রদত্ত দূরত্বের জন্য আদর্শ পিক্সেল ঘনত্ব পেতে আদর্শ ঘনত্বের (96ppi) সাথে দূরত্বের অনুপাতকে গুণ করুন।

   আদর্শ পিক্সেল ঘনত্ব = (28/18) * 96 = 150 পিক্সেল প্রতি ইঞ্চি (প্রায়)

3. ডিভাইস পিক্সেল অনুপাত পেতে প্রকৃত পিক্সেল ঘনত্বের আদর্শ পিক্সেল ঘনত্বের অনুপাত নিন।

   devicePixelRatio = 180/150 = 1.2

সুতরাং এখন যখন একটি ব্রাউজারকে আদর্শ বা স্ট্যান্ডার্ড রেজোলিউশন অনুযায়ী স্ক্রীনের সাথে ফিট করার জন্য একটি চিত্রের আকার পরিবর্তন করতে হয় তা জানতে হবে, ব্রাউজারটি 1.2 এর ডিভাইস পিক্সেল অনুপাতকে নির্দেশ করে - যা বলে, প্রতিটি আদর্শ পিক্সেলের জন্য, এই ডিভাইসটিতে 1.2 ফিজিক্যাল পিক্সেল রয়েছে . আদর্শ (ওয়েব স্পেক দ্বারা সংজ্ঞায়িত) এবং শারীরিক (ডিভাইস স্ক্রিনে বিন্দু) পিক্সেলের মধ্যে যাওয়ার সূত্রটি নিম্নরূপ:

physicalPixels = window.devicePixelRatio * idealPixels

ঐতিহাসিকভাবে, ডিভাইস বিক্রেতারা devicePixelRatios (ডিপিআর) এর দিকে ঝুঁকছে। অ্যাপলের আইফোন এবং আইপ্যাড রিপোর্ট ডিপিআর 1, এবং তাদের রেটিনা সমতুল্য রিপোর্ট 2। CSS স্পেসিফিকেশন সুপারিশ করে যে

পিক্সেল ইউনিট ডিভাইস পিক্সেলের সম্পূর্ণ সংখ্যাকে নির্দেশ করে যা রেফারেন্স পিক্সেলের সর্বোত্তম আনুমানিক।

বৃত্তাকার অনুপাত আরও ভাল হওয়ার একটি কারণ হল তারা কম সাব-পিক্সেল শিল্পকর্মের দিকে নিয়ে যেতে পারে।

যাইহোক, ডিভাইসের ল্যান্ডস্কেপের বাস্তবতা অনেক বেশি বৈচিত্র্যময় এবং অ্যান্ড্রয়েড ফোনে প্রায়ই 1.5 এর ডিপিআর থাকে। Nexus 7 ট্যাবলেটটির একটি DPR ~1.33 আছে, যা উপরেরটির মতই একটি গণনার মাধ্যমে পাওয়া গেছে। ভবিষ্যতে পরিবর্তনশীল ডিপিআর সহ আরও ডিভাইস দেখার প্রত্যাশা করুন৷ এই কারণে, আপনার কখনই অনুমান করা উচিত নয় যে আপনার ক্লায়েন্টদের পূর্ণসংখ্যা ডিপিআর থাকবে।

হাইডিপিআই ইমেজ কৌশলগুলির ওভারভিউ

যত দ্রুত সম্ভব সেরা মানের ছবি দেখানোর সমস্যা সমাধানের জন্য অনেক কৌশল রয়েছে, বিস্তৃতভাবে দুটি বিভাগে পড়ে:

1. একক ছবি অপ্টিমাইজ করা, এবং
2. একাধিক ছবির মধ্যে নির্বাচন অপ্টিমাইজ করা।

একক ইমেজ পন্থা: একটি ইমেজ ব্যবহার করুন, কিন্তু এটির সাথে চতুর কিছু করুন। এই পন্থাগুলির ত্রুটি রয়েছে যে আপনি অনিবার্যভাবে কর্মক্ষমতা ত্যাগ করবেন, যেহেতু আপনি নিম্ন ডিপিআই সহ পুরানো ডিভাইসগুলিতে হাইডিপিআই চিত্রগুলি ডাউনলোড করবেন। এখানে একক চিত্রের ক্ষেত্রে কিছু পন্থা রয়েছে:

• হাইডিপিআই ইমেজ খুব বেশি সংকুচিত
• সম্পূর্ণ সন্ত্রস্ত ইমেজ বিন্যাস
• প্রগতিশীল চিত্র বিন্যাস

একাধিক ইমেজ পন্থা: একাধিক ছবি ব্যবহার করুন, কিন্তু কোনটি লোড করতে হবে তা বেছে নিতে চতুর কিছু করুন। একই সম্পদের একাধিক সংস্করণ তৈরি করতে এবং তারপরে একটি সিদ্ধান্তের কৌশল বের করতে বিকাশকারীর জন্য এই পদ্ধতিগুলির অন্তর্নিহিত ওভারহেড রয়েছে। এখানে বিকল্প আছে:

• জাভাস্ক্রিপ্ট
• সার্ভার সাইড ডেলিভারি
• CSS মিডিয়া প্রশ্ন
• অন্তর্নির্মিত ব্রাউজার বৈশিষ্ট্য ( image-set() , <img srcset> )

হাইডিপিআই ইমেজ খুব বেশি সংকুচিত

একটি গড় ওয়েবসাইট ডাউনলোড করার জন্য ব্যান্ডউইথের 60% ইমেজ ইতিমধ্যেই রয়েছে । সমস্ত ক্লায়েন্টকে HiDPI ইমেজ পরিবেশন করে, আমরা এই সংখ্যা বাড়াব। আর কত বড় হবে?

আমি কিছু পরীক্ষা চালিয়েছি যা 90, 50 এবং 20 এ JPEG গুণমান সহ 1x এবং 2x চিত্রের টুকরো তৈরি করেছে। এখানে শেল স্ক্রিপ্টটি আমি ব্যবহার করেছি ( ImageMagick-কে নিয়োগ করা) সেগুলি তৈরি করতে:

এই ছোট, অবৈজ্ঞানিক নমুনা থেকে, মনে হয় যে বড় ছবিগুলিকে সংকুচিত করা একটি ভাল মানের থেকে আকারের ট্রেডঅফ প্রদান করে। আমার চোখের জন্য, ভারীভাবে সংকুচিত 2x চিত্রগুলি আসলে অসঙ্কুচিত 1x ছবির চেয়ে ভাল দেখায়।

অবশ্যই, নিম্ন মানের, অত্যন্ত সংকুচিত 2x চিত্র 2x ডিভাইসে পরিবেশন করা উচ্চ মানের পরিবেশন করার চেয়ে খারাপ, এবং উপরের পদ্ধতিটি ছবির গুণমানের জরিমানা বহন করে। আপনি যদি গুণমানের সাথে তুলনা করেন: 90টি চিত্রের সাথে গুণমান: 20টি চিত্র, আপনি দেখতে পাবেন খাস্তাতা এবং বর্ধিত দানাদারতা হ্রাস। এই নিদর্শনগুলি এমন ক্ষেত্রে গ্রহণযোগ্য নাও হতে পারে যেখানে উচ্চ মানের চিত্রগুলি গুরুত্বপূর্ণ (উদাহরণস্বরূপ, একটি ফটো ভিউয়ার অ্যাপ্লিকেশন), বা অ্যাপ ডেভেলপারদের জন্য যারা আপস করতে ইচ্ছুক নয়৷

উপরের তুলনা সম্পূর্ণরূপে সংকুচিত JPEG-এর সাথে করা হয়েছিল। এটা লক্ষণীয় যে ব্যাপকভাবে বাস্তবায়িত ইমেজ ফরম্যাটের (JPEG, PNG, GIF) মধ্যে অনেক ট্রেডঅফ রয়েছে, যা আমাদের নিয়ে আসে...

সম্পূর্ণ সন্ত্রস্ত ইমেজ বিন্যাস

WebP হল একটি চমত্কার আকর্ষক ইমেজ ফরম্যাট যা উচ্চ ইমেজের বিশ্বস্ততা বজায় রেখে খুব ভালভাবে সংকুচিত করে। অবশ্যই, এটি এখনও সর্বত্র প্রয়োগ করা হয়নি !

একটি উপায় হল WebP সমর্থন পরীক্ষা করা জাভাস্ক্রিপ্টের মাধ্যমে। আপনি ডেটা-ইউরির মাধ্যমে একটি 1px ছবি লোড করেন, লোড হওয়া বা ত্রুটি ইভেন্ট ফায়ার হওয়ার জন্য অপেক্ষা করুন, এবং তারপর যাচাই করুন যে আকারটি সঠিক। Modernizr এমন একটি বৈশিষ্ট্য সনাক্তকরণ স্ক্রিপ্ট সহ প্রেরণ করে, যা Modernizr.webp এর মাধ্যমে উপলব্ধ।

এটি করার একটি ভাল উপায়, তবে, সরাসরি CSS-এ image() ফাংশন ব্যবহার করে। সুতরাং আপনার যদি একটি WebP চিত্র এবং JPEG ফলব্যাক থাকে, আপনি নিম্নলিখিতগুলি লিখতে পারেন:

#pic {
  background: image("foo.webp", "foo.jpg");
}

এই পদ্ধতির সাথে কয়েকটি সমস্যা রয়েছে। প্রথমত, image() মোটেও ব্যাপকভাবে প্রয়োগ করা হয় না। দ্বিতীয়ত, WebP কম্প্রেশন JPEG কে জল থেকে উড়িয়ে দিলে, এটি এখনও তুলনামূলকভাবে ক্রমবর্ধমান উন্নতি – এই WebP গ্যালারির উপর ভিত্তি করে প্রায় 30% ছোট। সুতরাং, উচ্চ ডিপিআই সমস্যা সমাধানের জন্য একা WebP যথেষ্ট নয়।

প্রগতিশীল ইমেজ বিন্যাস

JPEG 2000, Progressive JPEG, Progressive PNG এবং GIF-এর মতো প্রগতিশীল ইমেজ ফরম্যাটের (কিছুটা বিতর্কিত) সুবিধা আছে যে ছবিটি সম্পূর্ণরূপে লোড হওয়ার আগে দেখা যায়। তারা কিছু আকারের ওভারহেড বহন করতে পারে, যদিও এই সম্পর্কে পরস্পরবিরোধী প্রমাণ রয়েছে। জেফ অ্যাটউড দাবি করেছেন যে প্রগতিশীল মোড "পিএনজি চিত্রগুলির আকারে প্রায় 20% এবং JPEG এবং GIF চিত্রগুলির আকারে প্রায় 10% যোগ করে"। যাইহোক, Stoyan Stefanov দাবি করেছেন যে বড় ফাইলগুলির জন্য, প্রগতিশীল মোড আরও দক্ষ (বেশিরভাগ ক্ষেত্রে)।

প্রথম নজরে, যত দ্রুত সম্ভব সেরা মানের ছবি পরিবেশন করার প্রেক্ষাপটে প্রগতিশীল ছবিগুলি খুব আশাপ্রদ দেখায়। ধারণাটি হল যে ব্রাউজার একটি ছবি ডাউনলোড করা এবং ডিকোড করা বন্ধ করে দিতে পারে যখন এটি জানে যে অতিরিক্ত ডেটা চিত্রের গুণমান বাড়াবে না (যেমন। সমস্ত বিশ্বস্ততার উন্নতি সাব-পিক্সেল)।

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

এটির একটি সমাধান হল HTTP রেঞ্জ অনুরোধ ব্যবহার করা, যা ব্রাউজারগুলিকে আনার জন্য বাইটের একটি পরিসীমা নির্দিষ্ট করতে দেয়। একটি স্মার্ট ব্রাউজার হেডারে যাওয়ার জন্য একটি HEAD অনুরোধ করতে পারে, এটি প্রক্রিয়া করতে পারে, ঠিক কতটা ইমেজ আসলে প্রয়োজন, এবং তারপর আনয়ন করতে পারে৷ দুর্ভাগ্যবশত এইচটিটিপি রেঞ্জ ওয়েব সার্ভারে খারাপভাবে সমর্থিত, এই পদ্ধতিটিকে অব্যবহারিক করে তোলে।

অবশেষে, এই পদ্ধতির একটি সুস্পষ্ট সীমাবদ্ধতা হল যে আপনি কোন চিত্রটি লোড করবেন তা চয়ন করতে পারবেন না, শুধুমাত্র একই চিত্রের বিভিন্ন বিশ্বস্ততা। ফলস্বরূপ, এটি " শিল্প নির্দেশনা " ব্যবহারের ক্ষেত্রে সম্বোধন করে না।

কোন ছবি লোড করতে হবে তা ঠিক করতে JavaScript ব্যবহার করুন

কোন ছবি লোড করতে হবে তা নির্ধারণ করার প্রথম, এবং সবচেয়ে সুস্পষ্ট পদ্ধতি হল ক্লায়েন্টে জাভাস্ক্রিপ্ট ব্যবহার করা। এই পদ্ধতিটি আপনাকে আপনার ব্যবহারকারী এজেন্ট সম্পর্কে সবকিছু খুঁজে বের করতে এবং সঠিক কাজ করতে দেয়। আপনি window.devicePixelRatio এর মাধ্যমে ডিভাইসের পিক্সেল অনুপাত নির্ধারণ করতে পারেন, স্ক্রীনের প্রস্থ এবং উচ্চতা পেতে পারেন, এবং এমনকি সম্ভাব্যভাবে navigator.connection-এর মাধ্যমে কিছু নেটওয়ার্ক সংযোগ স্নিফিং করতে পারেন বা একটি জাল অনুরোধ জারি করতে পারেন, যেমন foresight.js লাইব্রেরি করে। একবার আপনি এই সমস্ত তথ্য সংগ্রহ করার পরে, আপনি কোন চিত্রটি লোড করবেন তা নির্ধারণ করতে পারেন৷

আনুমানিক এক মিলিয়ন জাভাস্ক্রিপ্ট লাইব্রেরি আছে যা উপরের মত কিছু করে, এবং দুর্ভাগ্যবশত তাদের কোনটিই বিশেষভাবে অসামান্য নয়।

এই পদ্ধতির একটি বড় অপূর্ণতা হল জাভাস্ক্রিপ্ট ব্যবহার করার মানে হল যে আপনি লুক-হেড পার্সার শেষ না হওয়া পর্যন্ত ইমেজ লোড হতে বিলম্ব করবেন। এর অর্থ হল pageload ইভেন্ট ফায়ার না হওয়া পর্যন্ত ছবিগুলি ডাউনলোড করা শুরু হবে না। জেসন গ্রিগসবির নিবন্ধে এই বিষয়ে আরও।

সার্ভারে কোন ছবি লোড করতে হবে তা ঠিক করুন

আপনি পরিবেশন করা প্রতিটি ছবির জন্য কাস্টম অনুরোধ হ্যান্ডলার লিখে সার্ভার-সাইডে সিদ্ধান্তটি পিছিয়ে দিতে পারেন। এই ধরনের একটি হ্যান্ডলার ব্যবহারকারী-এজেন্ট (সার্ভারে রিলে করা তথ্যের একমাত্র অংশ) উপর ভিত্তি করে রেটিনা সমর্থনের জন্য পরীক্ষা করবে। তারপর, সার্ভার-সাইড লজিক HiDPI সম্পদ পরিবেশন করতে চায় কিনা তার উপর ভিত্তি করে, আপনি উপযুক্ত সম্পদ লোড করেন (কিছু পরিচিত নিয়ম অনুসারে নামকরণ করা হয়েছে)।

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

CSS মিডিয়া প্রশ্ন ব্যবহার করুন

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

#my-image { background: (low.png); }

@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

এটি মিশ্রিত সমস্ত বিক্রেতা উপসর্গের সাথে একটু বেশি জটিল হয়ে যায়, বিশেষ করে "মিনিট" এবং "সর্বোচ্চ" উপসর্গ বসানোর ক্ষেত্রে উন্মাদ পার্থক্যের কারণে:

@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {

  #my-image {
    background:url(high.png);
  }
}

এই পদ্ধতির সাহায্যে, আপনি লুক-হেড পার্সিংয়ের সুবিধাগুলি ফিরে পাবেন, যা JS সমাধানের সাথে হারিয়ে গেছে। আপনি আপনার প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলি বেছে নেওয়ার নমনীয়তাও অর্জন করেন (উদাহরণস্বরূপ, আপনার নিম্ন, মধ্য এবং উচ্চ ডিপিআই চিত্র থাকতে পারে), যা সার্ভার-সাইড পদ্ধতির সাথে হারিয়ে গেছে।

দুর্ভাগ্যবশত এটি এখনও একটু অপ্রস্তুত, এবং অদ্ভুত চেহারার সিএসএসের দিকে নিয়ে যায় (বা প্রিপ্রসেসিং প্রয়োজন)। এছাড়াও, এই পদ্ধতিটি CSS বৈশিষ্ট্যের মধ্যে সীমাবদ্ধ, তাই <img src> সেট করার কোন উপায় নেই, এবং আপনার চিত্রগুলি অবশ্যই একটি পটভূমি সহ উপাদান হতে হবে। অবশেষে, ডিভাইস পিক্সেল অনুপাতের উপর কঠোরভাবে নির্ভর করে, আপনি এমন পরিস্থিতিতে শেষ করতে পারেন যেখানে আপনার হাই-ডিপিআই স্মার্ট ফোনটি একটি EDGE সংযোগে থাকাকালীন একটি বিশাল 2x ইমেজ সম্পদ ডাউনলোড করে। এটি সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা নয়।

নতুন ব্রাউজার বৈশিষ্ট্য ব্যবহার করুন

উচ্চ ডিপিআই ইমেজ সমস্যার জন্য ওয়েব প্ল্যাটফর্ম সমর্থন ঘিরে সাম্প্রতিক অনেক আলোচনা হয়েছে। Apple সম্প্রতি ওয়েবকিটে image-set() CSS ফাংশন এনে মহাকাশে প্রবেশ করেছে। ফলস্বরূপ, সাফারি এবং ক্রোম উভয়ই এটি সমর্থন করে। যেহেতু এটি একটি CSS ফাংশন, তাই image-set() <img> ট্যাগের সমস্যার সমাধান করে না। @srcset লিখুন, যা এই সমস্যাটির সমাধান করে কিন্তু (এই লেখার সময়) কোন রেফারেন্স বাস্তবায়ন নেই (এখনও!) পরবর্তী বিভাগটি image-set এবং srcset এর গভীরে যায়।

উচ্চ DPI সমর্থনের জন্য ব্রাউজার বৈশিষ্ট্য

শেষ পর্যন্ত, আপনি কোন পদ্ধতিটি গ্রহণ করবেন তা আপনার নির্দিষ্ট প্রয়োজনীয়তার উপর নির্ভর করে। এটি বলেছে, মনে রাখবেন যে উপরে উল্লিখিত সমস্ত পদ্ধতির ত্রুটি রয়েছে। আশা করছি, তবে, একবার image-set এবং srcset ব্যাপকভাবে সমর্থিত হলে, তারা এই সমস্যার উপযুক্ত সমাধান হবে। আপাতত, আসুন কিছু সেরা অনুশীলন সম্পর্কে কথা বলি যা আমাদেরকে সেই আদর্শ ভবিষ্যতের যতটা সম্ভব কাছাকাছি নিয়ে যেতে পারে।

প্রথমত, কিভাবে এই দুটি ভিন্ন? ভাল, image-set() হল একটি CSS ফাংশন, যা ব্যাকগ্রাউন্ড CSS প্রপার্টির মান হিসাবে ব্যবহারের জন্য উপযুক্ত। srcset হল অনুরূপ সিনট্যাক্স সহ <img> উপাদানগুলির জন্য নির্দিষ্ট একটি বৈশিষ্ট্য। এই দুটি ট্যাগই আপনাকে ইমেজ ডিক্লারেশন নির্দিষ্ট করতে দেয়, কিন্তু srcset অ্যাট্রিবিউট আপনাকে ভিউপোর্ট সাইজের উপর ভিত্তি করে কোন ইমেজ লোড করতে হবে তা কনফিগার করতে দেয়।

ইমেজ সেটের জন্য সেরা অনুশীলন

image-set() CSS ফাংশনটি -webkit-image-set() হিসাবে উপসর্গযুক্ত উপলব্ধ। সিনট্যাক্সটি বেশ সহজ, একটি বা একাধিক কমা বিভক্ত ইমেজ ঘোষণা গ্রহণ করে, যেটিতে একটি URL স্ট্রিং বা url() ফাংশন যুক্ত রেজোলিউশন অনুসরণ করে। উদাহরণ স্বরূপ:

background-image:  -webkit-image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

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

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

1x, 1.5x বা Nx নির্দিষ্ট করার পরিবর্তে, আপনি dpi-এ একটি নির্দিষ্ট ডিভাইস পিক্সেল ঘনত্বও নির্দিষ্ট করতে পারেন।

এটি ভাল কাজ করে, এমন ব্রাউজার ব্যতীত যেগুলি image-set সম্পত্তি সমর্থন করে না, যা কোনও চিত্রই দেখাবে না! এটি স্পষ্টতই খারাপ, তাই সেই সমস্যাটির সমাধান করতে আপনাকে অবশ্যই একটি ফলব্যাক (বা ফলব্যাকের সিরিজ) ব্যবহার করতে হবে:

background-image: url(icon1x.jpg);
background-image: -webkit-image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);
/* This will be useful if image-set gets into the platform, unprefixed.
    Also include other prefixed versions of this */
background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

উপরের ব্রাউজারগুলিতে উপযুক্ত সম্পদ লোড হবে যা চিত্র-সেট সমর্থন করে এবং অন্যথায় 1x সম্পদে ফিরে যাবে। স্পষ্ট সতর্কতা হল যে যখন image-set() ব্রাউজার সমর্থন কম, বেশিরভাগ ব্যবহারকারী এজেন্ট 1x সম্পদ পাবেন।

এই ডেমো সঠিক ইমেজ লোড করতে image-set() ব্যবহার করে, যদি এই CSS ফাংশনটি সমর্থিত না হয় তাহলে 1x অ্যাসেটে ফিরে যায়।

এই মুহুর্তে, আপনি ভাবছেন কেন শুধু পলিফিল করবেন না (অর্থাৎ, image-set() এর জন্য একটি জাভাস্ক্রিপ্ট শিম তৈরি করুন এবং এটিকে একটি দিন বলুন? এটি দেখা যাচ্ছে, CSS ফাংশনের জন্য দক্ষ পলিফিলগুলি বাস্তবায়ন করা বেশ কঠিন। (কেন বিস্তারিত ব্যাখ্যার জন্য, এই www-স্টাইল আলোচনা দেখুন)।

ছবি srcset

এখানে srcset এর একটি উদাহরণ রয়েছে:

<img alt="my awesome image"
  src="banner.jpeg"
  srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

আপনি দেখতে পাচ্ছেন, image-set প্রদান করে x ঘোষণার পাশাপাশি, srcset উপাদানটি w এবং h মানও নেয় যা ভিউপোর্টের আকারের সাথে মিলে যায়, সবচেয়ে প্রাসঙ্গিক সংস্করণটি পরিবেশন করার চেষ্টা করে। উপরেরটি ব্যানার-phone.jpeg 640px-এর নিচে ভিউপোর্ট প্রস্থের ডিভাইসে, ব্যানার-phone-HD.jpeg থেকে ছোট স্ক্রীনের উচ্চ DPI ডিভাইসে, ব্যানার-HD.jpeg 640px-এর বেশি স্ক্রীন সহ উচ্চ DPI ডিভাইসে এবং banner.jpeg-এ পরিবেশন করবে। অন্য সব কিছুতে।

ইমেজ উপাদানের জন্য ইমেজ-সেট ব্যবহার করা

যেহেতু বেশিরভাগ ব্রাউজারে img উপাদানের srcset বৈশিষ্ট্য প্রয়োগ করা হয় না, তাই এটি আপনার img উপাদানগুলিকে <div> s দিয়ে ব্যাকগ্রাউন্ডে প্রতিস্থাপন করতে এবং চিত্র-সেট পদ্ধতি ব্যবহার করতে প্রলুব্ধ হতে পারে। এটি সতর্কতার সাথে কাজ করবে। এখানে অসুবিধা হল যে <img> ট্যাগের দীর্ঘ সময়ের শব্দার্থিক মান রয়েছে। অনুশীলনে, এটি বেশিরভাগ ওয়েব ক্রলার এবং অ্যাক্সেসযোগ্যতার কারণে গুরুত্বপূর্ণ।

আপনি যদি -webkit-image-set ব্যবহার করে শেষ করেন, তাহলে আপনি ব্যাকগ্রাউন্ড CSS প্রপার্টি ব্যবহার করতে প্রলুব্ধ হতে পারেন। এই পদ্ধতির অসুবিধা হল যে আপনাকে চিত্রের আকার নির্দিষ্ট করতে হবে, যদি আপনি একটি নন-1x ছবি ব্যবহার করেন তবে এটি অজানা। এটি করার পরিবর্তে, আপনি নিম্নলিখিত হিসাবে সামগ্রী CSS সম্পত্তি ব্যবহার করতে পারেন:

<div id="my-content-image"
  style="content: -webkit-image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x);">
</div>

এটি ডিভাইসপিক্সেল রেশিওর উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে চিত্রটিকে স্কেল করবে। image-set সমর্থন করে না এমন ব্রাউজারগুলির জন্য url() এ অতিরিক্ত ফলব্যাক সহ কর্মে উপরের কৌশলটির এই উদাহরণটি দেখুন।

পলিফিলিং srcset

srcset এর একটি সহজ বৈশিষ্ট্য হল এটি একটি প্রাকৃতিক ফলব্যাক সহ আসে। যে ক্ষেত্রে srcset অ্যাট্রিবিউট প্রয়োগ করা হয় না, সমস্ত ব্রাউজার src অ্যাট্রিবিউট প্রক্রিয়া করতে জানে। এছাড়াও, যেহেতু এটি শুধুমাত্র একটি HTML অ্যাট্রিবিউট, তাই JavaScript দিয়ে পলিফিল তৈরি করা সম্ভব।

এই পলিফিলটি যতটা সম্ভব স্পেসিফিকেশনের কাছাকাছি তা নিশ্চিত করতে ইউনিট পরীক্ষার সাথে আসে। উপরন্তু, srcset নেটিভভাবে প্রয়োগ করা হলে পলিফিলকে কোনো কোড কার্যকর করতে বাধা দেয় এমন কিছু চেক রয়েছে।

এখানে পলিফিলের একটি ডেমো রয়েছে

উপসংহার

উচ্চ ডিপিআই চিত্রের সমস্যা সমাধানের জন্য কোন ম্যাজিক বুলেট নেই।

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

JS, CSS এবং সার্ভার-সাইড ব্যবহার করার পদ্ধতিরই তাদের শক্তি এবং দুর্বলতা রয়েছে। সবচেয়ে প্রতিশ্রুতিশীল পদ্ধতি, তবে, নতুন ব্রাউজার বৈশিষ্ট্যগুলি ব্যবহার করা। যদিও image-set এবং srcset এর জন্য ব্রাউজার সমর্থন এখনও অসম্পূর্ণ, আজ ব্যবহার করার জন্য যুক্তিসঙ্গত ফলব্যাক রয়েছে।

সংক্ষেপে, আমার সুপারিশগুলি নিম্নরূপ:

• ব্যাকগ্রাউন্ড ইমেজগুলির জন্য, এটি সমর্থন করে না এমন ব্রাউজারগুলির জন্য উপযুক্ত ফলব্যাক সহ ইমেজ-সেট ব্যবহার করুন।
• বিষয়বস্তু চিত্রগুলির জন্য, একটি srcset পলিফিল ব্যবহার করুন, বা চিত্র-সেট ব্যবহার করতে ফলব্যাক করুন (উপরে দেখুন)।
• এমন পরিস্থিতিতে যেখানে আপনি ছবির গুণমান ত্যাগ করতে ইচ্ছুক, ভারীভাবে সংকুচিত 2x ছবি ব্যবহার করার কথা বিবেচনা করুন।