এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

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 বৈশিষ্ট্যগুলি সেট করতে হবে৷ আমরা ইমেজ কম্পোনেন্ট দিয়ে এই প্রচেষ্টা কমাতে চেয়েছিলাম। আমরা নেক্সট.জেএস ইমেজ কম্পোনেন্ট ডিজাইন করেছি যাতে প্রতি অ্যাট্রিবিউটের মান একবারে সেট করা যায়। লেআউট মোডের উপর ভিত্তি করে আমরা ইমেজ কম্পোনেন্টের সমস্ত উদাহরণে সেগুলি প্রয়োগ করি। আমরা একটি তিন অংশের সমাধান নিয়ে এসেছি:

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

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

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

বিভিন্ন লেআউটের জন্য রেন্ডার করা ছবি
ল্যাপটপের পর্দা	ফোনের পর্দা
বিন্যাস = অভ্যন্তরীণ: ছোট ভিউপোর্টে কন্টেইনারের প্রস্থের সাথে মানানসই করার জন্য নিচের স্কেলগুলি। একটি বড় ভিউপোর্টে চিত্রের অন্তর্নিহিত আকারের বাইরে স্কেল করে না। ধারক প্রস্থ 100%

লেআউট = স্থির: চিত্র প্রতিক্রিয়াশীল নয়। প্রস্থ এবং উচ্চতা ` এর অনুরূপ স্থির করা হয় ` উপাদান নির্বিশেষে ডিভাইস যেখানে এটি রেন্ডার করা হয়েছে৷

লেআউট = প্রতিক্রিয়াশীল: বিভিন্ন ভিউপোর্টে কন্টেইনারের প্রস্থের উপর নির্ভর করে, আকৃতির অনুপাত বজায় রেখে স্কেল করুন বা স্কেল করুন।

বিন্যাস = ভরাট: মূল পাত্রটি পূরণ করতে প্রস্থ এবং উচ্চতা প্রসারিত। (এই উদাহরণে অভিভাবক `<div>` প্রস্থ 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 অ্যাপ্লিকেশনে পারফরম্যান্সের ফলাফল উন্নত করেছে, যার ফলে ব্যবহারকারীর অভিজ্ঞতা বৃদ্ধি পেয়েছে। আমরা বিশ্বাস করি যে এটি একটি দুর্দান্ত মডেল যা বৃহত্তর ইকোসিস্টেমে ভাল কাজ করবে, এবং আমরা ডেভেলপারদের কাছ থেকে শুনতে পছন্দ করব যারা তাদের প্রকল্পগুলিতে এই মডেলটি গ্রহণ করতে চান।

Leena Sohoni

Kara Erickson

Alex Castle

ইমেজ একটি এক্সটেনশন হিসাবে ইমেজ উপাদান

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

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

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

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

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

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

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

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

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

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

// 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" />
}

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

// 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" />
}

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

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

বিভিন্ন লেআউটের জন্য রেন্ডার করা ছবি
ল্যাপটপের পর্দা	ফোনের পর্দা
বিন্যাস = অভ্যন্তরীণ: ছোট ভিউপোর্টে কন্টেইনারের প্রস্থের সাথে মানানসই করার জন্য নিচের স্কেলগুলি। একটি বড় ভিউপোর্টে চিত্রের অন্তর্নিহিত আকারের বাইরে স্কেল করে না। ধারক প্রস্থ 100%

লেআউট = স্থির: চিত্র প্রতিক্রিয়াশীল নয়। প্রস্থ এবং উচ্চতা ` এর অনুরূপ স্থির করা হয় ` উপাদান নির্বিশেষে ডিভাইস যেখানে এটি রেন্ডার করা হয়েছে৷

লেআউট = প্রতিক্রিয়াশীল: বিভিন্ন ভিউপোর্টে কন্টেইনারের প্রস্থের উপর নির্ভর করে, আকৃতির অনুপাত বজায় রেখে স্কেল করুন বা স্কেল করুন।

বিন্যাস = ভরাট: মূল পাত্রটি পূরণ করতে প্রস্থ এবং উচ্চতা প্রসারিত। (এই উদাহরণে অভিভাবক `<div>` প্রস্থ 300*500 সেট করা হয়েছে)

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

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

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

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

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

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

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

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

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

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

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

প্রভাব

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

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

শেখা পাঠ

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

সুরক্ষা ভালভ ভাল চেয়ে বেশি ক্ষতি করতে পারে

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

অর্থহীন বিরক্তি থেকে দরকারী ঘর্ষণকে আলাদা করুন

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

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

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

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

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

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

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

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

উপসংহার

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

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

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

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

Leena Sohoni

Kara Erickson

Alex Castle

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

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

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

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

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

অপরিশোধিত চিত্রগুলি সিএলএসকে আঘাত করে

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

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

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

বড় চিত্রগুলি এলসিপিতে আঘাত করতে পারে

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

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

দরিদ্র চিত্র সংকোচনের ফলে এলসিপিকে আঘাত করা যেতে পারে

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

অপ্রয়োজনীয় চিত্রগুলি লোড করা এলসিপিতে ব্যাথা করে

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

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

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

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

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

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

গত এক বছরে, আমরা তাদের চিত্রের উপাদানটি ডিজাইন এবং প্রয়োগ করতে নেক্সট.জেএস ফ্রেমওয়ার্কের সাথে কাজ করেছি। এটি নিম্নলিখিত হিসাবে 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" />
}

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

লেআউট শিফট থেকে সুরক্ষা

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

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

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

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

চিত্রগুলি বিভিন্ন লেআউটগুলির জন্য রেন্ডার করা হয়েছে
ল্যাপটপের পর্দা	ফোনের পর্দা
লেআউট = অভ্যন্তরীণ: ছোট ভিউপোর্টগুলিতে ধারকটির প্রস্থে ফিট করার জন্য নীচে স্কেল করে। বৃহত্তর ভিউপোর্টে চিত্রের অভ্যন্তরীণ আকারের বাইরে স্কেল করে না। ধারক প্রস্থ 100% এ

লেআউট = স্থির: চিত্রটি প্রতিক্রিয়াশীল নয়। প্রস্থ এবং উচ্চতা `এর অনুরূপ স্থির `ডিভাইসটি যেখানে এটি রেন্ডার করা হয় তা নির্বিশেষে উপাদান।

লেআউট = প্রতিক্রিয়াশীল: বিভিন্ন ভিউপোর্টগুলিতে ধারকটির প্রস্থের উপর নির্ভর করে স্কেল ডাউন বা স্কেল আপ করুন, দিক অনুপাত বজায় রেখে।

বিন্যাস = পূরণ: পিতামাতার ধারকটি পূরণ করতে প্রস্থ এবং উচ্চতা প্রসারিত। (অভিভাবক `<div>` প্রস্থ এই উদাহরণে 300*500 এ সেট করা আছে)

অন্তর্নির্মিত অলস-লোডিং সরবরাহ করুন

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

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

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

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

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

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

একটি সু-নকশিত চিত্র উপাদানটি ব্যবহৃত কাঠামো নির্বিশেষে চিত্রগুলির লোডিং সিকোয়েন্সটি টুইট করার জন্য একটি উপায় সরবরাহ করা উচিত। নেক্সট.জেএস চিত্রের উপাদানগুলির ক্ষেত্রে, বিকাশকারীরা এমন একটি চিত্র নির্দেশ করতে পারেন যা চিত্রগুলির উপাদানটির priority বৈশিষ্ট্য ব্যবহার করে প্রিলোডের জন্য ভাল প্রার্থী।

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

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

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

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

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

এই কনফিগারেশনের সাহায্যে বিকাশকারীরা চিত্রের উত্সে আপেক্ষিক ইউআরএল ব্যবহার করতে পারে এবং কাঠামোটি নিখুঁত ইউআরএল উত্পন্ন করতে সিডিএন পাথের সাথে আপেক্ষিক ইউআরএলকে সংহত করবে। ইমজিক্স , ক্লাউডিনারি এবং আকামাইয়ের মতো জনপ্রিয় চিত্র সিডিএন সমর্থিত। আর্কিটেকচার অ্যাপ্লিকেশনটির জন্য একটি কাস্টম loader ফাংশন প্রয়োগ করে একটি কাস্টম ক্লাউড সরবরাহকারীর ব্যবহারকে সমর্থন করে।

স্ব-হোস্টেড চিত্রগুলি সমর্থন করুন

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

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

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

প্রভাব

শেখা পাঠ

সুরক্ষা ভালভ ভাল চেয়ে বেশি ক্ষতি করতে পারে

অর্থহীন বিরক্তি থেকে দরকারী ঘর্ষণকে আলাদা করুন

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

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

উপসংহার

Leena Sohoni

Kara Erickson

Alex Castle

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

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

অপরিশোধিত চিত্রগুলি সিএলএসকে আঘাত করে

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

বড় চিত্রগুলি এলসিপিতে আঘাত করতে পারে

দরিদ্র চিত্র সংকোচনের ফলে এলসিপিকে আঘাত করা যেতে পারে

অপ্রয়োজনীয় চিত্রগুলি লোড করা এলসিপিতে ব্যাথা করে

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

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

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

// 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" />
}

লেআউট শিফট থেকে সুরক্ষা

// 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" />
}

প্রতিক্রিয়াশীলতার সুবিধার্থে

deviceSizes property: This property can be used to configure breakpoints one-time based on the devices common to the application user base. The default values for breakpoints are included in the config file.
imageSizes property: This is also a configurable property used to get the image sizes corresponding to device size breakpoints.
layout attribute in each image: This is used to indicate how to use the deviceSizes and imageSizes properties for each image. The supported values for layout mode are fixed , fill , intrinsic and responsive

When an image is requested with layout modes responsive or fill , Next.js identifies the image to be served based on the size of the device requesting the page and sets the srcset and sizes in the image appropriately.

The following comparison shows how the layout mode can be used to control the size of the image on different screens. We have used a demo image shared in the Next.js docs, viewed on a phone and a standard laptop.

Images rendered for different layouts
ল্যাপটপের পর্দা	ফোনের পর্দা
Layout = Intrinsic: Scales down to fit the container's width on smaller viewports. Does not scale up beyond the image's intrinsic size on a larger viewport. Container width is at 100%

Layout = Fixed: Image is not responsive. Width and height are fixed similar to ` ` element irrespective of the device where it is rendered.

Layout = Responsive: Scale down or scale up depending on the width of the container on different viewports, maintaining aspect ratio.

Layout = Fill: Width and height stretched to fill the parent container. (Parent `<div>` width is set to 300*500 in this example)

Provide built-in lazy-loading

The Image component provides a built-in, performant lazy loading solution as a default. When using the <img> element, there are a few options for lazy loading, but they all have drawbacks that make them tricky to use. A developer might adopt one of the following lazy loading approaches:

Specify the loading attribute: This is supported on all modern browsers .
Use the Intersection Observer API : Building a custom lazy-loading solution requires effort and a thoughtful design and implementation. Developers may not always have the time for this.
Import a third-party library to lazy-load images: Additional effort may be required to evaluate and integrate a suitable third-party library for lazy loading.

In the Next.js Image component, loading is set to "lazy" by default. Lazy loading is implemented using Intersection Observer, which is available on most modern browsers . Developers are not required to do anything extra to enable it, but they can disable it when needed.

Preload important images

Quite often, LCP elements are images, and large images can delay LCP. It is a good idea to preload critical images so the browser can discover that image sooner. When using an <img> element, a preload hint may be included in the HTML head as follows.

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

A well-designed image component should offer a way to tweak the loading sequence of images, regardless of the framework used. In the case of the Next.js Image component, developers can indicate an image that is a good candidate for preload using the priority attribute of the images component.

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

Adding a priority attribute simplifies markup and is more convenient to use. Image component developers can also explore options to apply heuristics to automate preloading for above-the-fold images on the page that meet specific criteria.

Encourage high-performance image hosting

Image CDNs are recommended for automating image optimization, and they also support modern image formats like WebP and AVIF. The Next.js Image component uses an image CDN by default using a loader architecture . The following example shows that the loader allows for configuration of the CDN in the Next.js config file.

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

With this configuration, developers can use relative URLs in the image source, and the framework will concatenate the relative URL with the CDN path to generate the absolute URL. Popular image CDNs like Imgix , Cloudinary , and Akamai are supported. The architecture supports the use of a custom cloud provider by implementing a custom loader function for the app.

Support self-hosted images

There may be situations where websites cannot use image CDNs. In such cases, an image component must support self-hosted images. The Next.js Image component uses an image optimizer as a built-in image server that provides a CDN-like API. The optimizer uses Sharp for production image transformations if it is installed on the server. This library is a good choice for anyone looking to build their own image optimization pipeline.

Support progressive loading

Progressive loading is a technique used to hold users' interest by displaying a placeholder image usually of significantly lower quality while the actual image loads. It improves perceived performance and enhances the user experience. It can be used in combination with lazy loading for below-the-fold images or for above-the-fold images.

The Next.js Image component supports progressive loading for the image through the placeholder property. This can be used as an LQIP (Low-quality image placeholder) for displaying a low-quality or blurred image while the actual image loads.

প্রভাব

With all these optimizations incorporated, we have seen success with the Next.js Image component in production and are also working with other tech stacks on similar image components.

When Leboncoin migrated their legacy JavaScript frontend to Next.js , they also upgraded their image pipeline to use the Next.js Image component. On a page that migrated from <img> to next/image, LCP went down from 2.4s to 1.7s. The total image bytes downloaded for the page went from 663kB to 326kB (with ~100kB of lazy-loaded image bytes).

শেখা পাঠ

Anyone creating a Next.js app can benefit from using the Next.js Image component for optimization. However, if you want to build similar performance abstractions for another framework or CMS, the following are a few lessons we learned along the way that could be helpful.

Safety valves can cause more harm than good

In an early release of the Next.js Image component, we provided a unsized attribute that allowed developers to bypass the sizing requirement, and use images with unspecified dimensions. We thought this would be a necessary in instances where it was impossible to know the image's height or width in advance. However, we noticed users recommending the unsized attribute in GitHub issues as a catch-all solution to problems with the sizing requirement, even in cases where they could solve the problem in ways that didn't worsen CLS. We subsequently deprecated and removed the unsized attribute.

Separate useful friction from pointless annoyance

The requirement for sizing an image is an example of "useful friction." It restricts the use of the component, but it provides outsized performance benefits in exchange. Users will readily accept the constraint if they have a clear picture of the potential performance benefits. Therefore, it is worthwhile to explain this tradeoff in the documentation and other published material about the component.

However, you can find workarounds for such friction without sacrificing performance. For example, during the development of the Next.js Image component, we received complaints that it was annoying to look up sizes for locally stored images. We added static image imports , which streamline this process by automatically retrieving dimensions for local images at build time using a Babel plugin.

Strike a balance between convenience features and performance optimizations

If your image component does nothing but impose "useful friction" on its users, developers will tend to not want to use it. We found that although performance features like image sizing and automatic generation of srcset values were the most important. Developer-facing convenience features like automatic lazy loading and built-in blurry placeholders also drove interest in the Next.js Image component.

Set a roadmap for features to drive adoption

Building a solution that works perfectly for all situations is very difficult. It can be tempting to design something that works well for 75% of people and then tell the other 25% that "in these cases, this component isn't for you."

In practice, this strategy turns out to be at odds with your goals as a component designer. You want developers to adopt your component in order to benefit from its performance benefits. This is difficult to do if there is a contingent of users that are unable to migrate and feel left out of the conversation. They are likely to express disappointment, leading to negative perceptions that affect adoption.

It is advisable to have a roadmap for your component that covers all reasonable use cases over the long term. It also helps to be explicit in the documentation about what isn't supported and why in order to set expectations about the problems the component is intended to solve.

উপসংহার

Image usage and optimization is complicated. Developers have to find the balance between performance and quality of images while ensuring a great user experience. This makes image optimization a high-cost, high-impact endeavor.

Instead of having each app reinvent the wheel every time, we came up with a best practices template that developers, frameworks, and other tech-stacks could use as a reference for their own implementations. This experience will indeed prove valuable as we support other frameworks, on their image components.

The Next.js Image component has successfully improved performance outcomes in Next.js applications, thereby enhancing the user experience. We believe that it's a great model that would work well in the broader ecosystem, and we would love to hear from developers who would like to adopt this model in their projects.

অন্য কিছু উল্লেখ না করা থাকলে, এই পৃষ্ঠার কন্টেন্ট Creative Commons Attribution 4.0 License-এর অধীনে এবং কোডের নমুনাগুলি Apache 2.0 License-এর অধীনে লাইসেন্স প্রাপ্ত। আরও জানতে, Google Developers সাইট নীতি দেখুন। Java হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।

2021-10-25 UTC-তে শেষবার আপডেট করা হয়েছে।