একটি কার্যকর ইমেজ উপাদান নির্মাণ

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

Leena Sohoni

Kara Erickson

Alex Castle

চিত্রগুলি ওয়েব অ্যাপ্লিকেশনগুলির জন্য পারফরম্যান্সের বাধাগুলির একটি সাধারণ উত্স এবং অপ্টিমাইজেশনের জন্য একটি মূল ফোকাস এলাকা৷ অঅপ্টিমাইজ করা ছবি পৃষ্ঠা ব্লোট করতে অবদান রাখে এবং বর্তমানে 90 ^তম পার্সেন্টাইলে বাইটে মোট পৃষ্ঠার ওজনের 70% এর বেশি। ইমেজ অপ্টিমাইজ করার একাধিক উপায়ে ডিফল্ট হিসাবে বেক করা কর্মক্ষমতা সমাধান সহ একটি বুদ্ধিমান "ইমেজ উপাদান" প্রয়োজন।

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

ছবি অপ্টিমাইজেশান সমস্যা এবং সুযোগ

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

আকারবিহীন ছবি সিএলএসকে আঘাত করে

তাদের আকার নির্দিষ্ট না করে পরিবেশন করা ছবিগুলি লেআউটের অস্থিরতা সৃষ্টি করতে পারে এবং একটি উচ্চ ক্রমবর্ধমান লেআউট শিফটে ( সিএলএস ) অবদান রাখতে পারে। img উপাদানগুলিতে width এবং height বৈশিষ্ট্যগুলি সেট করা লেআউট পরিবর্তন প্রতিরোধ করতে সাহায্য করতে পারে। উদাহরণ স্বরূপ:

<img src="flower.jpg" width="360" height="240">

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

বড় ছবি LCP ক্ষতি করতে পারে

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

অনেক ক্ষেত্রে, ডেভেলপাররা ভালো কম্প্রেশন এবং প্রতিক্রিয়াশীল ছবি ব্যবহারের মাধ্যমে ছবির আকার কমাতে পারে। <img> উপাদানের srcset এবং sizes বৈশিষ্ট্যগুলি বিভিন্ন আকারের ইমেজ ফাইল প্রদান করতে সাহায্য করে। ব্রাউজার তখন পর্দার আকার এবং রেজোলিউশনের উপর নির্ভর করে সঠিকটি বেছে নিতে পারে।

খারাপ ইমেজ কম্প্রেশন LCP ক্ষতি করতে পারে

AVIF বা WebP-এর মতো আধুনিক ইমেজ ফরম্যাট সাধারণত ব্যবহৃত JPEG এবং PNG ফরম্যাটের চেয়ে ভালো কম্প্রেশন প্রদান করতে পারে। ভালো কম্প্রেশন ফাইলের আকার 25% থেকে 50% পর্যন্ত কমিয়ে দেয় কিছু ক্ষেত্রে ছবির একই মানের জন্য। এই হ্রাস কম ডেটা খরচ সহ দ্রুত ডাউনলোডের দিকে পরিচালিত করে। এই ফর্ম্যাটগুলিকে সমর্থন করে এমন ব্রাউজারগুলিতে অ্যাপটির আধুনিক চিত্র বিন্যাসগুলি পরিবেশন করা উচিত।

অপ্রয়োজনীয় ছবি লোড করা LCP এর ক্ষতি করে

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

অপ্টিমাইজেশান চ্যালেঞ্জ

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

• অগ্রাধিকার : ওয়েব ডেভেলপাররা সাধারণত কোড, জাভাস্ক্রিপ্ট এবং ডেটা অপ্টিমাইজেশানে ফোকাস করে। যেমন, তারা ইমেজ সংক্রান্ত সমস্যা বা কীভাবে সেগুলিকে অপ্টিমাইজ করতে হয় সে সম্পর্কে সচেতন নাও হতে পারে। ডিজাইনারদের দ্বারা তৈরি বা ব্যবহারকারীদের দ্বারা আপলোড করা ছবিগুলি অগ্রাধিকারের তালিকায় বেশি নাও হতে পারে৷
• আউট-অফ-দ্য-বক্স সমাধান : এমনকি ডেভেলপাররা ইমেজ অপ্টিমাইজেশানের সূক্ষ্মতা সম্পর্কে সচেতন থাকলেও, তাদের ফ্রেমওয়ার্ক বা টেক-স্ট্যাকের জন্য একটি অল-ইন-ওয়ান আউট-অফ-দ্য-বক্স সমাধানের অনুপস্থিতি একটি প্রতিবন্ধক হতে পারে।
• ডায়নামিক ইমেজ : অ্যাপ্লিকেশানের অংশ স্থির ছবি ছাড়াও, ডাইনামিক ছবিগুলি ব্যবহারকারীদের দ্বারা আপলোড করা হয় বা বহিরাগত ডাটাবেস বা CMS থেকে নেওয়া হয়। এই ধরনের ছবির আকার নির্ধারণ করা চ্যালেঞ্জিং হতে পারে যেখানে ছবির উৎস গতিশীল।
• মার্কআপ ওভারলোড : চিত্রের আকার বা বিভিন্ন আকারের জন্য srcset অন্তর্ভুক্ত করার সমাধানগুলির জন্য প্রতিটি ছবির জন্য অতিরিক্ত মার্কআপ প্রয়োজন, যা ক্লান্তিকর হতে পারে। srcset অ্যাট্রিবিউটটি 2014 সালে চালু করা হয়েছিল কিন্তু আজ মাত্র 26.5% ওয়েবসাইট ব্যবহার করে । srcset ব্যবহার করার সময়, বিকাশকারীদের বিভিন্ন আকারের ছবি তৈরি করতে হবে। শুধু-gimme-an-img-এর মতো টুল সাহায্য করতে পারে কিন্তু প্রতিটি ছবির জন্য ম্যানুয়ালি ব্যবহার করতে হবে।
• ব্রাউজার সমর্থন : AVIF এবং WebP-এর মতো আধুনিক ইমেজ ফরম্যাটগুলি ছোট ইমেজ ফাইল তৈরি করে কিন্তু সেগুলিকে সমর্থন করে না এমন ব্রাউজারগুলিতে বিশেষ হ্যান্ডলিং প্রয়োজন৷ ডেভেলপারদের বিষয়বস্তু আলোচনা বা <picture > উপাদানের মতো কৌশল ব্যবহার করতে হবে যাতে সমস্ত ব্রাউজারে ছবিগুলি পরিবেশন করা হয়।
• অলস লোডিং জটিলতা : ভাঁজের নীচের চিত্রগুলির জন্য অলস-লোডিং বাস্তবায়নের জন্য একাধিক কৌশল এবং লাইব্রেরি উপলব্ধ রয়েছে। সেরা একটি বাছাই একটি চ্যালেঞ্জ হতে পারে. বিকাশকারীরা বিলম্বিত ছবি লোড করার জন্য "ভাঁজ" থেকে সর্বোত্তম দূরত্ব জানেন না। ডিভাইসে বিভিন্ন ভিউপোর্ট মাপ এটিকে আরও জটিল করে তুলতে পারে।
• ল্যান্ডস্কেপ পরিবর্তন করা : ব্রাউজারগুলি কার্যক্ষমতা বাড়াতে নতুন HTML বা CSS বৈশিষ্ট্যগুলিকে সমর্থন করা শুরু করলে, বিকাশকারীদের জন্য তাদের প্রতিটির মূল্যায়ন করা কঠিন হতে পারে। উদাহরণস্বরূপ, ক্রোম একটি অরিজিন ট্রায়াল হিসাবে ফেচ অগ্রাধিকার বৈশিষ্ট্য প্রবর্তন করছে৷ এটি পৃষ্ঠায় নির্দিষ্ট চিত্রগুলির অগ্রাধিকার বাড়াতে ব্যবহার করা যেতে পারে। সামগ্রিকভাবে, বিকাশকারীরা এটি সহজতর করবে যদি এই ধরনের উন্নতিগুলি উপাদান স্তরে মূল্যায়ন করা হয় এবং প্রয়োগ করা হয়।

একটি সমাধান হিসাবে চিত্র উপাদান

চিত্রগুলিকে অপ্টিমাইজ করার সুযোগ এবং প্রতিটি অ্যাপ্লিকেশনের জন্য পৃথকভাবে তাদের বাস্তবায়নের চ্যালেঞ্জগুলি আমাদেরকে একটি চিত্র উপাদানের ধারণার দিকে নিয়ে যায়। একটি চিত্র উপাদান সর্বোত্তম অনুশীলনগুলিকে এনক্যাপসুলেট এবং প্রয়োগ করতে পারে। <img> উপাদানটিকে একটি ইমেজ কম্পোনেন্ট দিয়ে প্রতিস্থাপন করে, ডেভেলপাররা তাদের ইমেজ পারফরম্যান্সের সমস্যাগুলি আরও ভালভাবে সমাধান করতে পারে।

গত বছর ধরে, আমরা Next.js ফ্রেমওয়ার্কের সাথে তাদের ইমেজ কম্পোনেন্ট ডিজাইন এবং বাস্তবায়নের জন্য কাজ করেছি। এটিকে Next.js অ্যাপে বিদ্যমান <img> উপাদানগুলির জন্য ড্রপ-ইন প্রতিস্থাপন হিসাবে ব্যবহার করা যেতে পারে।

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

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

লেআউট স্থানান্তর থেকে সুরক্ষা

পূর্বে আলোচনা করা হয়েছে, আকারবিহীন চিত্রগুলি লেআউট পরিবর্তনের কারণ এবং CLS-এ অবদান রাখে। Next.js ইমেজ কম্পোনেন্ট ব্যবহার করার সময়, ডেভেলপারদের অবশ্যই width এবং height বৈশিষ্ট্যগুলি ব্যবহার করে একটি চিত্রের আকার প্রদান করতে হবে যাতে কোনো লেআউট পরিবর্তন না হয়। যদি আকারটি অজানা হয়, তবে ডেভেলপারদের অবশ্যই একটি আকারবিহীন চিত্র পরিবেশন করতে layout=fill নির্দিষ্ট করতে হবে যা একটি আকারের পাত্রের ভিতরে বসে। বিকল্পভাবে আপনি নির্মাণের সময় হার্ড ড্রাইভে প্রকৃত চিত্রের আকার পুনরুদ্ধার করতে স্ট্যাটিক ইমেজ ইম্পোর্ট ব্যবহার করতে পারেন এবং এটিকে ছবিতে অন্তর্ভুক্ত করতে পারেন।

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

যেহেতু ডেভেলপাররা ইমেজ কম্পোনেন্ট আনসাইজড ব্যবহার করতে পারে না, তাই ডিজাইন নিশ্চিত করে যে তারা ইমেজ সাইজিং বিবেচনা করতে এবং লেআউট পরিবর্তন প্রতিরোধ করতে সময় নেবে।

প্রতিক্রিয়াশীলতা সহজতর

সমস্ত ডিভাইস জুড়ে ছবিগুলিকে প্রতিক্রিয়াশীল করতে, বিকাশকারীদের অবশ্যই <img> উপাদানে srcset এবং sizes বৈশিষ্ট্যগুলি সেট করতে হবে৷ আমরা ইমেজ কম্পোনেন্ট দিয়ে এই প্রচেষ্টা কমাতে চেয়েছিলাম। আমরা নেক্সট.জেএস ইমেজ কম্পোনেন্ট ডিজাইন করেছি যাতে প্রতি অ্যাট্রিবিউটের মান একবারে সেট করা যায়। লেআউট মোডের উপর ভিত্তি করে আমরা ইমেজ কম্পোনেন্টের সমস্ত উদাহরণে সেগুলি প্রয়োগ করি। আমরা একটি তিন অংশের সমাধান নিয়ে এসেছি:

1. deviceSizes প্রপার্টি: এই প্রপার্টিটি অ্যাপ্লিকেশান ব্যবহারকারী বেসের সাধারণ ডিভাইসগুলির উপর ভিত্তি করে ব্রেকপয়েন্ট এক-বার কনফিগার করতে ব্যবহার করা যেতে পারে। ব্রেকপয়েন্টের জন্য ডিফল্ট মান কনফিগার ফাইলে অন্তর্ভুক্ত করা হয়।
2. imageSizes সম্পত্তি: এটি একটি কনফিগারযোগ্য সম্পত্তি যা ডিভাইসের আকারের ব্রেকপয়েন্টের সাথে সম্পর্কিত চিত্রের আকার পেতে ব্যবহৃত হয়।
3. প্রতিটি ছবিতে layout অ্যাট্রিবিউট: প্রতিটি ছবির জন্য deviceSizes এবং imageSizes বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন তা নির্দেশ করতে এটি ব্যবহার করা হয়। লেআউট মোডের জন্য সমর্থিত মানগুলি fixed , fill , intrinsic এবং responsive

যখন লেআউট মোড প্রতিক্রিয়াশীল বা পূরণের সাথে একটি চিত্রের অনুরোধ করা হয়, তখন Next.js পৃষ্ঠার অনুরোধকারী ডিভাইসের আকারের উপর ভিত্তি করে পরিবেশন করা চিত্রটিকে সনাক্ত করে এবং ছবিতে srcset এবং sizes যথাযথভাবে সেট করে৷

নিম্নলিখিত তুলনা দেখায় কিভাবে লেআউট মোড বিভিন্ন স্ক্রিনে চিত্রের আকার নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে। আমরা Next.js ডক্সে শেয়ার করা একটি ডেমো ইমেজ ব্যবহার করেছি, একটি ফোন এবং একটি স্ট্যান্ডার্ড ল্যাপটপে দেখা হয়েছে৷

বিভিন্ন লেআউটের জন্য রেন্ডার করা ছবি

ল্যাপটপের পর্দা	ফোনের পর্দা
বিন্যাস = অভ্যন্তরীণ: ছোট ভিউপোর্টে কন্টেইনারের প্রস্থের সাথে মানানসই করার জন্য নিচের স্কেলগুলি। একটি বড় ভিউপোর্টে চিত্রের অন্তর্নিহিত আকারের বাইরে স্কেল করে না। ধারক প্রস্থ 100%
লেআউট = স্থির: চিত্র প্রতিক্রিয়াশীল নয়। প্রস্থ এবং উচ্চতা ` এর অনুরূপ স্থির করা হয় ` উপাদান নির্বিশেষে ডিভাইস যেখানে এটি রেন্ডার করা হয়েছে৷
লেআউট = প্রতিক্রিয়াশীল: বিভিন্ন ভিউপোর্টে কন্টেইনারের প্রস্থের উপর নির্ভর করে, আকৃতির অনুপাত বজায় রেখে স্কেল করুন বা স্কেল করুন।
বিন্যাস = ভরাট: মূল পাত্রটি পূরণ করতে প্রস্থ এবং উচ্চতা প্রসারিত। (পিতামাতা ` ` এই উদাহরণে প্রস্থ 300*500 সেট করা হয়েছে)

অন্তর্নির্মিত অলস-লোডিং প্রদান

ইমেজ কম্পোনেন্ট একটি ডিফল্ট হিসাবে একটি অন্তর্নির্মিত, পারফরম্যান্ট অলস লোডিং সমাধান প্রদান করে। <img> উপাদানটি ব্যবহার করার সময়, অলস লোডিংয়ের জন্য কয়েকটি নেটিভ বিকল্প রয়েছে, তবে সেগুলির সমস্ত ত্রুটি রয়েছে যা তাদের ব্যবহার করা কঠিন করে তোলে। একজন বিকাশকারী নিম্নলিখিত অলস লোডিং পদ্ধতির একটি গ্রহণ করতে পারে:

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

Next.js ইমেজ কম্পোনেন্টে, লোডিং ডিফল্টরূপে "lazy" এ সেট করা আছে। অলস লোডিং ইন্টারসেকশন অবজারভার ব্যবহার করে প্রয়োগ করা হয়, যা বেশিরভাগ আধুনিক ব্রাউজারে উপলব্ধ । বিকাশকারীদের এটি সক্ষম করার জন্য অতিরিক্ত কিছু করার প্রয়োজন নেই, তবে তারা যখন প্রয়োজন তখন এটি অক্ষম করতে পারে।

গুরুত্বপূর্ণ ছবি প্রিলোড করুন

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

<link rel="preload" as="image" href="important.png">

একটি ভাল-পরিকল্পিত ইমেজ উপাদান ব্যবহার করা ফ্রেমওয়ার্ক নির্বিশেষে, ছবির লোডিং ক্রম পরিবর্তন করার একটি উপায় প্রদান করা উচিত। Next.js ইমেজ কম্পোনেন্টের ক্ষেত্রে, ডেভেলপাররা ইমেজ কম্পোনেন্টের priority অ্যাট্রিবিউট ব্যবহার করে প্রিলোডের জন্য একটি ভালো প্রার্থীর ইমেজ নির্দেশ করতে পারে।

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

একটি priority বৈশিষ্ট্য যোগ করা মার্কআপকে সহজ করে এবং ব্যবহার করা আরও সুবিধাজনক। ইমেজ কম্পোনেন্ট ডেভেলপাররা নির্দিষ্ট মানদণ্ড পূরণ করে এমন পৃষ্ঠার উপরের-ভাঁজ চিত্রগুলির জন্য স্বয়ংক্রিয়ভাবে প্রিলোডিং করার জন্য হিউরিস্টিক প্রয়োগ করার বিকল্পগুলিও অন্বেষণ করতে পারে।

উচ্চ-কর্মক্ষমতা ইমেজ হোস্টিং উত্সাহিত করুন

ইমেজ অপ্টিমাইজেশান স্বয়ংক্রিয় করার জন্য ইমেজ CDN গুলি সুপারিশ করা হয় এবং তারা WebP এবং AVIF এর মত আধুনিক ইমেজ ফরম্যাটগুলিকেও সমর্থন করে৷ Next.js ইমেজ কম্পোনেন্ট একটি লোডার আর্কিটেকচার ব্যবহার করে ডিফল্টভাবে একটি ইমেজ CDN ব্যবহার করে। নিম্নলিখিত উদাহরণ দেখায় যে লোডার Next.js কনফিগারেশন ফাইলে CDN কনফিগারেশনের অনুমতি দেয়।

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

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

স্ব-হোস্ট করা ছবি সমর্থন করুন

এমন পরিস্থিতি হতে পারে যেখানে ওয়েবসাইটগুলি ইমেজ সিডিএন ব্যবহার করতে পারে না। এই ধরনের ক্ষেত্রে, একটি ইমেজ উপাদান অবশ্যই স্ব-হোস্ট করা ছবি সমর্থন করবে। Next.js ইমেজ কম্পোনেন্ট একটি বিল্ট-ইন ইমেজ সার্ভার হিসেবে একটি ইমেজ অপ্টিমাইজার ব্যবহার করে যা একটি CDN-এর মতো API প্রদান করে। অপ্টিমাইজারটি সার্ভারে ইনস্টল করা থাকলে উত্পাদন চিত্র রূপান্তরের জন্য শার্প ব্যবহার করে। এই লাইব্রেরি যে কেউ তাদের নিজস্ব ইমেজ অপ্টিমাইজেশান পাইপলাইন তৈরি করতে চায় তাদের জন্য একটি ভাল পছন্দ৷

প্রগতিশীল লোডিং সমর্থন

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

Next.js ইমেজ কম্পোনেন্ট প্লেসহোল্ডার প্রপার্টির মাধ্যমে ইমেজের জন্য প্রগতিশীল লোডিং সমর্থন করে। এটি একটি LQIP (নিম্ন-মানের চিত্র স্থানধারক) হিসাবে ব্যবহার করা যেতে পারে যখন প্রকৃত চিত্র লোড হওয়ার সময় একটি নিম্ন-মানের বা অস্পষ্ট চিত্র প্রদর্শনের জন্য।

প্রভাব

উপরের সমস্ত অপ্টিমাইজেশান একত্রিত করার সাথে, আমরা নেক্সট.js ইমেজ কম্পোনেন্টের সাথে উৎপাদনে সাফল্য দেখেছি এবং একই ধরনের ইমেজ উপাদানগুলিতে অন্যান্য প্রযুক্তিগত স্ট্যাকের সাথেও কাজ করছি।

যখন Leboncoin তাদের লিগ্যাসি জাভাস্ক্রিপ্ট ফ্রন্টএন্ড Next.js এ স্থানান্তরিত করে , তারা Next.js ইমেজ কম্পোনেন্ট ব্যবহার করার জন্য তাদের ইমেজ পাইপলাইনও আপগ্রেড করে। <img> থেকে পরবর্তী/ছবিতে স্থানান্তরিত একটি পৃষ্ঠায়, LCP 2.4s থেকে 1.7s-এ নেমে এসেছে। পৃষ্ঠার জন্য ডাউনলোড করা মোট ইমেজ বাইট 663kB থেকে 326kB হয়েছে (~100kB অলস-লোডেড ইমেজ বাইট সহ)।

পাঠ শিখেছি

যে কেউ একটি Next.js অ্যাপ তৈরি করে অপ্টিমাইজেশনের জন্য Next.js ইমেজ কম্পোনেন্ট ব্যবহার করে উপকৃত হতে পারে। যাইহোক, আপনি যদি অন্য ফ্রেমওয়ার্ক বা CMS-এর জন্য অনুরূপ পারফরম্যান্স বিমূর্ততা তৈরি করতে চান, তাহলে নিচের কয়েকটি পাঠ আমরা শিখেছি যা সহায়ক হতে পারে।

নিরাপত্তা ভালভ ভালোর চেয়ে বেশি ক্ষতির কারণ হতে পারে

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

অর্থহীন বিরক্তি থেকে দরকারী ঘর্ষণ পৃথক

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

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

সুবিধার বৈশিষ্ট্য এবং কর্মক্ষমতা অপ্টিমাইজেশানের মধ্যে ভারসাম্য বজায় রাখুন

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

দত্তক নেওয়ার জন্য বৈশিষ্ট্যগুলির জন্য একটি রোডম্যাপ সেট করুন৷

সব পরিস্থিতিতে পুরোপুরি কাজ করে এমন একটি সমাধান তৈরি করা খুবই কঠিন। এটি এমন কিছু ডিজাইন করতে প্রলুব্ধ হতে পারে যা 75% লোকের জন্য ভাল কাজ করে এবং তারপরে অন্য 25%কে বলুন যে "এই ক্ষেত্রে, এই উপাদানটি আপনার জন্য নয়।"

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

আপনার উপাদানের জন্য একটি রোডম্যাপ থাকা বাঞ্ছনীয় যা দীর্ঘ মেয়াদে সমস্ত যুক্তিসঙ্গত ব্যবহারের ক্ষেত্রে কভার করে। এটি কোনটি সমর্থিত নয় সে সম্পর্কে ডকুমেন্টেশনে সুস্পষ্ট হতে সাহায্য করে এবং কেন উপাদানটি সমাধান করার উদ্দেশ্যে সমস্যাগুলি সম্পর্কে প্রত্যাশা সেট করতে।

উপসংহার

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

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

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