সঠিক চিত্র বিন্যাস চয়ন করুন

Ilya Grigorik

Jeremy Wagner

প্রথম প্রশ্নটি আপনার নিজেকে জিজ্ঞাসা করা উচিত তা হল একটি চিত্র আসলে, আপনি যে প্রভাবের পরে আছেন তা অর্জনের জন্য প্রয়োজনীয় কিনা। আপনি যদি একটি ইমেজ রিসোর্স মুছে ফেলতে পারেন, যার জন্য প্রায়ই পৃষ্ঠার HTML, CSS, JavaScript এবং অন্যান্য সম্পদের তুলনায় প্রচুর সংখ্যক বাইট প্রয়োজন, তাহলে এটি সর্বদা সর্বোত্তম অপ্টিমাইজেশন কৌশল। এটি বলেছিল, একটি ভালভাবে স্থাপন করা ছবি হাজার শব্দের চেয়েও বেশি তথ্য যোগাযোগ করতে পারে, তাই সেই ভারসাম্য খুঁজে পাওয়া আপনার উপর নির্ভর করে।

এর পরে, আপনার বিবেচনা করা উচিত যদি একটি বিকল্প প্রযুক্তি আছে যা আরও ভাল ফলাফল প্রদান করতে পারে, তবে আরও কার্যকর পদ্ধতিতে:

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

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

সঠিক চিত্র বিন্যাস চয়ন করুন

আপনি যদি নিশ্চিত হন যে একটি ছবি সঠিক বিকল্প, তাহলে আপনাকে সাবধানে কাজের জন্য সঠিক ধরনের ছবি নির্বাচন করা উচিত।

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

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

যাইহোক, ভেক্টর ফরম্যাটগুলি ছোট হয়ে যায় যখন দৃশ্যটি জটিল হয় (উদাহরণস্বরূপ, একটি ফটো): সমস্ত আকার বর্ণনা করার জন্য SVG মার্কআপের পরিমাণ নিষেধমূলকভাবে বেশি হতে পারে এবং আউটপুট এখনও "ফটোরিয়ালিস্টিক" নাও দেখাতে পারে। যখন এটি হয়, তখনই আপনার একটি রাস্টার চিত্র বিন্যাস যেমন PNG, JPEG, WebP, বা AVIF ব্যবহার করা উচিত।

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

উচ্চ-রেজোলিউশন পর্দার প্রভাব

দুটি ভিন্ন ধরণের পিক্সেল রয়েছে: CSS পিক্সেল এবং ডিভাইস পিক্সেল। একটি একক সিএসএস পিক্সেল সরাসরি একটি একক ডিভাইস পিক্সেলের সাথে মিলিত হতে পারে বা একাধিক ডিভাইস পিক্সেল দ্বারা ব্যাক হতে পারে। ব্যাপারটা কি? ঠিক আছে, যত বেশি ডিভাইস পিক্সেল আছে, স্ক্রিনে প্রদর্শিত বিষয়বস্তুর বিশদ বিবরণ তত বেশি।

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

অন্যদিকে, রাস্টার চিত্রগুলি অনেক বড় চ্যালেঞ্জ তৈরি করে কারণ তারা প্রতি-পিক্সেল ভিত্তিতে চিত্র ডেটা এনকোড করে। সুতরাং, পিক্সেলের সংখ্যা যত বেশি হবে, রাস্টার চিত্রের ফাইলের আকার তত বড় হবে। 100x100 (CSS) পিক্সেলে প্রদর্শিত একটি ফটো সম্পদের মধ্যে পার্থক্য বিবেচনা করুন:

যখন আমরা ফিজিক্যাল স্ক্রিনের রেজোলিউশন দ্বিগুণ করি, তখন পিক্সেলের মোট সংখ্যা চারটি ফ্যাক্টর দ্বারা বৃদ্ধি পায়: অনুভূমিক পিক্সেলের সংখ্যা দ্বিগুণ, উল্লম্ব পিক্সেলের সংখ্যার দ্বিগুণ। সুতরাং, একটি "2x" স্ক্রিন কেবল দ্বিগুণ নয়, প্রয়োজনীয় পিক্সেলের সংখ্যাকে চারগুণ করে!

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

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

বিভিন্ন রাস্টার ইমেজ ফরম্যাটের বৈশিষ্ট্য

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

দুটি সার্বজনীনভাবে সমর্থিত রাস্টার ইমেজ ফরম্যাট রয়েছে: PNG এবং JPEG। এই ফর্ম্যাটগুলি ছাড়াও, আধুনিক ব্রাউজারগুলি নতুন WebP এবং AVIF ইমেজ ফর্ম্যাটগুলিকে সমর্থন করে৷ উভয় নতুন ফর্ম্যাটই আরও ভাল সামগ্রিক কম্প্রেশন এবং আরও বৈশিষ্ট্য সরবরাহ করে। সুতরাং, আপনি কোন বিন্যাস ব্যবহার করা উচিত?

WebP এবং AVIF সাধারণত পুরানো ফরম্যাটের চেয়ে ভালো কম্প্রেশন প্রদান করবে এবং যেখানে সম্ভব ব্যবহার করা উচিত। আপনি ফলব্যাক হিসাবে একটি JPEG বা PNG চিত্রের সাথে WebP বা AVIF চিত্রগুলি ব্যবহার করতে পারেন৷ আরও বিস্তারিত জানার জন্য WebP ছবি ব্যবহার করুন দেখুন।

পুরানো চিত্র বিন্যাস পরিপ্রেক্ষিতে, নিম্নলিখিত বিবেচনা করুন:

1. আপনি অ্যানিমেশন প্রয়োজন? <video> উপাদান ব্যবহার করুন।
   • GIF সম্পর্কে কি? GIF রঙ প্যালেটটিকে সর্বাধিক 256 রঙে সীমাবদ্ধ করে এবং <video> উপাদানগুলির তুলনায় উল্লেখযোগ্যভাবে বড় ফাইল আকার তৈরি করে। APNG GIF-এর থেকে বেশি রঙের অফার করে, কিন্তু যুক্তিসঙ্গতভাবে সমতুল্য ভিজ্যুয়াল মানের ভিডিও ফরম্যাটের থেকেও উল্লেখযোগ্যভাবে বড়। ভিডিও দিয়ে অ্যানিমেটেড GIF প্রতিস্থাপন দেখুন।
2. আপনার কি সর্বোচ্চ রেজোলিউশনের সাথে সূক্ষ্ম বিবরণ সংরক্ষণ করা দরকার? PNG বা ক্ষতিহীন WebP ব্যবহার করুন।
   • PNG রঙ প্যালেটের আকারের পছন্দের বাইরে কোনো ক্ষতিকর কম্প্রেশন অ্যালগরিদম প্রয়োগ করে না। ফলস্বরূপ, এটি সর্বোচ্চ মানের চিত্র তৈরি করবে, তবে অন্যান্য বিন্যাসের তুলনায় উল্লেখযোগ্যভাবে উচ্চ ফাইল আকারের খরচে। বিচক্ষণতার সাথে ব্যবহার করুন।
   • WebP-এর একটি লসলেস এনকোডিং মোড আছে যা PNG এর থেকে বেশি কার্যকরী হতে পারে।
   • যদি ইমেজ অ্যাসেটে জ্যামিতিক আকারের ছবি থাকে, তাহলে এটিকে ভেক্টর (SVG) ফর্ম্যাটে রূপান্তর করার কথা বিবেচনা করুন!
   • ছবির সম্পদে পাঠ্য থাকলে, থামুন এবং পুনর্বিবেচনা করুন। চিত্রগুলিতে পাঠ্য নির্বাচনযোগ্য, অনুসন্ধানযোগ্য বা "জুমযোগ্য" নয়। আপনি যদি একটি কাস্টম চেহারা প্রকাশ করতে চান (ব্র্যান্ডিং বা অন্যান্য কারণে), পরিবর্তে একটি ওয়েব ফন্ট ব্যবহার করুন.
3. আপনি একটি ফটো, স্ক্রিনশট, বা একটি অনুরূপ ইমেজ সম্পদ অপ্টিমাইজ করছেন? JPEG, ক্ষতিকর WebP, বা AVIF ব্যবহার করুন।
   • JPEG ইমেজ সম্পদের ফাইলের আকার কমাতে ক্ষতিকর এবং ক্ষতিহীন অপ্টিমাইজেশনের সমন্বয় ব্যবহার করে। আপনার সম্পদের জন্য সেরা মানের বনাম ফাইল আকার ট্রেডঅফ খুঁজে পেতে বেশ কয়েকটি JPEG মানের স্তর চেষ্টা করুন।
   • ক্ষতিকারক ওয়েবপি বা ক্ষতিকর AVIF হল ওয়েব-গুণমানের চিত্রগুলির জন্য দুর্দান্ত JPEG বিকল্প, তবে সচেতন থাকুন যে ক্ষতিকর মোড ছোট ছবিগুলি অর্জনের জন্য কিছু তথ্য বাতিল করে। এর মানে হল যে নির্বাচন করা রং সমতুল্য JPEG এর মত নাও হতে পারে।

অবশেষে, মনে রাখবেন যে আপনি যদি আপনার প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশনে বিষয়বস্তু রেন্ডার করার জন্য একটি WebView ব্যবহার করেন, তাহলে আপনার ক্লায়েন্টের সম্পূর্ণ নিয়ন্ত্রণ থাকবে এবং আপনি একচেটিয়াভাবে WebP ব্যবহার করতে পারবেন! Facebook এবং অন্য অনেকেই তাদের অ্যাপ্লিকেশনের মধ্যে তাদের সমস্ত ছবি সরবরাহ করতে WebP ব্যবহার করে- সঞ্চয় অবশ্যই মূল্যবান।

সবচেয়ে বড় কন্টেন্টফুল পেইন্টের উপর প্রভাব (LCP)

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

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