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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

জুম-ইন ভেক্টর ইমেজ (L) রাস্টার ইমেজ (R)

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

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

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

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

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

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

CSS পিক্সেল এবং ডিভাইস পিক্সেলের মধ্যে পার্থক্য।

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

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

পর্দা রেজল্যুশন	মোট পিক্সেল	আনকম্প্রেসড ফাইল সাইজ (পিক্সেল প্রতি 4 বাইট)
1x	100 x 100 = 10,000	40,000 বাইট
2x	100 x 100 x 4 = 40,000	160,000 বাইট
3x	100 x 100 x 9 = 90,000	360,000 বাইট

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

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

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

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

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

বিন্যাস	স্বচ্ছতা	অ্যানিমেশন	ব্রাউজার
পিএনজি	হ্যাঁ	না	সব
জেপিইজি	না	না	সব
ওয়েবপি	হ্যাঁ	হ্যাঁ	সব আধুনিক ব্রাউজার। দেখুন আমি কি ব্যবহার করতে পারি?
এভিআইএফ	হ্যাঁ	হ্যাঁ	না. দেখুন আমি কি ব্যবহার করতে পারি?

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

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

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

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

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

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

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

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