ওয়েব কর্মক্ষমতা জন্য শীর্ষ টিপস

স্বয়ংক্রিয়ভাবে সঠিক চিত্রের আকার নির্বাচন করতে srcset ব্যবহার করুন।

Sam Dutton

এইচটিটিপি আর্কাইভ অনুসারে, একটি সাধারণ মোবাইল ওয়েব পৃষ্ঠার ওজন 2.6 MB এর বেশি এবং সেই ওজনের দুই তৃতীয়াংশেরও বেশি হল ছবি৷ যে অপ্টিমাইজেশন জন্য একটি মহান সুযোগ!

সারসংক্ষেপ

• ডিসপ্লে সাইজের চেয়ে বড় ছবি সেভ করবেন না।
• প্রতিটি ছবির জন্য একাধিক মাপ সংরক্ষণ করুন এবং ব্রাউজারটিকে সবচেয়ে ছোটটি বেছে নিতে সক্ষম করতে srcset বৈশিষ্ট্য ব্যবহার করুন। w মান ব্রাউজারকে প্রতিটি সংস্করণের প্রস্থ বলে:

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

সঠিক আকার দিয়ে ছবি সংরক্ষণ করুন

আপনি প্রদর্শনের আকারের সাথে মেলে এমন মাত্রা সহ চিত্রগুলি ব্যবহার করে আপনার ওয়েবসাইটকে দ্রুত এবং কম ডেটা ক্ষুধার্ত করতে পারেন৷ অন্য কথায়, ছবি সংরক্ষণ করার সময় সঠিক প্রস্থ এবং উচ্চতা দিন।

নিচের ছবিগুলো দেখে নিন।

এগুলি প্রায় অভিন্ন দেখায়, তবে একটির ফাইলের আকার অন্যটির চেয়ে 10 গুণ বড়৷

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

নির্দিষ্ট প্রস্থের জন্য, প্রদর্শনের আকারের মতো একই মাত্রা সহ সংরক্ষিত ছবিগুলি ব্যবহার করুন।

কিন্তু… যদি ডিসপ্লের আকার পরিবর্তিত হয়?

একটি মাল্টি-ডিভাইস বিশ্বে, চিত্রগুলি সর্বদা একটি নির্দিষ্ট আকারে প্রদর্শিত হয় না৷

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

…এবং রেটিনা ডিসপ্লের মতো পিক্সেল-হাংরি ডিভাইসগুলির কী হবে?

ব্রাউজারটিকে সঠিক চিত্রের আকার চয়ন করতে সহায়তা করুন৷

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

এখানেই srcset কাজে আসে। আপনি বিভিন্ন আকারে ছবি সংরক্ষণ করুন, তারপর ব্রাউজারকে প্রতিটি সংস্করণের প্রস্থ বলুন:

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

w মান প্রতিটি চিত্রের প্রস্থ পিক্সেলে দেখায়। উদাহরণস্বরূপ, small.jpg 500w ব্রাউজারকে বলে যে small.jpg 500 পিক্সেল চওড়া। এটি ব্রাউজারকে স্ক্রীনের ধরন এবং ভিউপোর্টের আকারের উপর নির্ভর করে সম্ভাব্য ক্ষুদ্রতম ছবি বেছে নিতে সক্ষম করে—ছবিগুলিকে তাদের আকার পরীক্ষা করার জন্য ডাউনলোড না করেই৷

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

আমি কিভাবে একাধিক ইমেজ আকার তৈরি করতে পারি?

আপনি srcset সাথে ব্যবহার করতে চান এমন প্রতিটি চিত্রের জন্য আপনাকে একাধিক মাপ উপলব্ধ করতে হবে।

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

আপনার বিল্ড প্রক্রিয়ায় ইমেজ প্রসেসিং অন্তর্ভুক্ত করুন

আপনার বিল্ড প্রক্রিয়ার অংশ হিসাবে, আপনি আপনার চিত্রগুলির বিভিন্ন আকারের সংস্করণ তৈরি করতে পদক্ষেপগুলি যোগ করতে পারেন। আরও জানতে "ছবি সংকুচিত করতে ইমেজমিন ব্যবহার করুন" দেখুন।

একটি ইমেজ পরিষেবা ব্যবহার করুন

ক্লাউডিনারির মতো একটি বাণিজ্যিক পরিষেবা ব্যবহার করে ছবি তৈরি এবং ডেলিভারি স্বয়ংক্রিয় হতে পারে, অথবা আপনি নিজেই ইনস্টল এবং চালানোর মতো Thumbor- এর মতো ওপেন সোর্স সমতুল্য৷

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

চিত্র পরিষেবাগুলিতে আরও উন্নত বৈশিষ্ট্য রয়েছে যেমন বিভিন্ন চিত্রের আকারের জন্য "স্মার্ট ক্রপিং" স্বয়ংক্রিয়ভাবে করার ক্ষমতা এবং ফাইল এক্সটেনশন পরিবর্তন না করে JPEG-এর পরিবর্তে বিন্যাস সমর্থন করে এমন ব্রাউজারগুলিতে স্বয়ংক্রিয়ভাবে WebP চিত্রগুলি সরবরাহ করার ক্ষমতা।

চিত্রটি বিভিন্ন আকারে সঠিক না হলে কী হবে?

সেই ক্ষেত্রে, আপনাকে "আর্ট ডিরেকশন" এর জন্য <picture> উপাদানটি ব্যবহার করতে হবে: বিভিন্ন আকারে একটি ভিন্ন চিত্র বা চিত্র ক্রপ প্রদান। আরও জানতে "আর্ট ডিরেকশন" কোডল্যাব দেখুন।

পিক্সেল ঘনত্ব সম্পর্কে কি?

হাই-এন্ড ডিভাইসে ছোট (আরও ঘন) ফিজিক্যাল পিক্সেল থাকে। উদাহরণস্বরূপ, একটি হাই-এন্ড ফোনে পিক্সেলের প্রতিটি সারিতে একটি সস্তা ডিভাইস হিসাবে দুই বা তিনগুণ পিক্সেল থাকতে পারে।

এটি আপনার ছবি সংরক্ষণ করার জন্য প্রয়োজনীয় আকারকে প্রভাবিত করতে পারে। আমরা এখানে রক্তাক্ত বিবরণে যাব না, তবে আপনি "ঘনত্ব বর্ণনাকারী ব্যবহার করুন" কোডল্যাব থেকে আরও জানতে পারেন।

ছবির প্রদর্শনের আকার সম্পর্কে কি?

আপনি srcset কাজ আরও ভাল করতে sizes ব্যবহার করতে পারেন.

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

নীচের উদাহরণে, sizes="50vw" ব্রাউজারকে বলে যে এই ছবিটি ভিউপোর্ট প্রস্থের 50% এ প্রদর্শিত হবে৷

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

আপনি simpl.info/sizes এবং "একাধিক স্লট প্রস্থ নির্দিষ্ট করা" কোডল্যাবে এটি কার্যকরভাবে দেখতে পারেন।

ব্রাউজার সমর্থন সম্পর্কে কি?

srcset এবং sizes বিশ্বব্যাপী 90% এর বেশি ব্রাউজার দ্বারা সমর্থিত ।

যদি একটি ব্রাউজার srcset বা sizes সমর্থন না করে তবে এটি শুধুমাত্র src বৈশিষ্ট্য ব্যবহার করে ফিরে আসবে।

এটি srcset এবং sizes দুর্দান্ত প্রগতিশীল বর্ধন করে!

আরও জানুন

ইমেজ অপ্টিমাইজেশানে আরও গভীরভাবে ডুব দেওয়ার জন্য web.dev-এর "আপনার ছবিগুলি অপ্টিমাইজ করুন" বিভাগে একবার দেখুন৷ আরও নির্দেশিত অভিজ্ঞতার জন্য, Udacity দ্বারা অফার করা বিনামূল্যের "প্রতিক্রিয়াশীল চিত্র" কোর্সটি চেষ্টা করার কথা বিবেচনা করুন।