উচ্চ-ঘনত্ব প্রদর্শনের জন্য দরকারী চিত্র মাত্রা চয়ন করুন

800 CSS পিক্সেল চওড়ায় প্রদর্শিত একটি কার্ড 2x উদাহরণ হিসাবে 1600 ইমেজ পিক্সেল চওড়া একটি চিত্র প্রার্থী ব্যবহার করতে পারে। ওয়েবসাইটটি যখন প্রতিক্রিয়াশীল চিত্র মার্কআপ প্রদান করে তখন ব্রাউজার লেআউট, ডিভাইসের ঘনত্ব এবং অন্যান্য শর্তের উপর ভিত্তি করে একটি উপযুক্ত উৎস বেছে নিতে পারে। 1600-পিক্সেল ফাইলের অর্থ এই নয় যে কার্ডটি পৃষ্ঠায় 1600 CSS পিক্সেল দখল করবে।

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

এই পৃষ্ঠাটি একটি দিয়ে শুরু হয় WebP এর ফিট বক্স 1600×1600 পিক্সেল। এটি একটি দৃষ্টান্তমূলক আবদ্ধ, তাই আপনার পরিমাপ করা প্রদর্শনের আকারের উপর ভিত্তি করে মান দিয়ে এটি প্রতিস্থাপন করুন। ফিট অনুপাত রাখে এবং একটি ছোট উৎস বড় করে না। উদাহরণস্বরূপ, একটি বিস্তৃত মূল পৌঁছাতে পারে 1600 একটি প্রতিকৃতি পরিবর্তে উচ্চতা ফিট করার সময় পিক্সেল জুড়ে। প্রকৃত আউটপুট মাত্রা পরীক্ষা করুন.

যদি একটি উৎস শুধুমাত্র হয় 700 পিক্সেল চওড়া, লেখা a 1600-পিক্সেল রপ্তানি একটি বড় মূলের বিশদ তৈরি করে না। একটি ভাল উত্স ব্যবহার করুন বা একটি ছোট প্রার্থী গ্রহণ করুন. আকার পরিবর্তন করার পরে অফের সাথে হালকা শার্পনিং তুলনা করুন এবং উদ্দিষ্ট ডিসপ্লে আকারে সূক্ষ্ম টেক্সচারগুলি পরিদর্শন করুন। স্বচ্ছ গ্রাফিক্স ব্যবহারের জন্য PNG পরিবর্তে, বর্তমান থেকে WebP এখানে রপ্তানি অস্বচ্ছ। আসল ডিজাইন বা ছবি রাখুন যাতে আপনি পরে বিভিন্ন প্রার্থী তৈরি করতে পারেন।

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

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

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