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

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

Sam Dutton

HTTP আর্কাইভ অনুসারে, একটি সাধারণ মোবাইল ওয়েব পৃষ্ঠার ওজন ২.৬ মেগাবাইটেরও বেশি হয় এবং এর দুই-তৃতীয়াংশেরও বেশি ওজনের ছবি। এটি অপ্টিমাইজেশনের জন্য একটি দুর্দান্ত সুযোগ!

সারাংশ

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

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

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

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

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

এগুলি প্রায় একই রকম দেখায়, কিন্তু একটির ফাইলের আকার অন্যটির তুলনায় ১০ গুণেরও বেশি।

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

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

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

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

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

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

ব্রাউজারকে সঠিক ছবির আকার বেছে নিতে সাহায্য করুন

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

এখানেই 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 দিয়ে ব্যবহার করতে চান এমন প্রতিটি ছবির জন্য আপনাকে একাধিক আকার উপলব্ধ করতে হবে।

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

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

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

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

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

আপনি আপনার উচ্চ রেজোলিউশনের ছবি আপলোড করেন, এবং ইমেজ সার্ভিসটি স্বয়ংক্রিয়ভাবে 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 সমর্থিত।

যদি কোন ব্রাউজার srcset বা sizes সমর্থন না করে তবে এটি কেবল src অ্যাট্রিবিউট ব্যবহার করতে বাধ্য হবে।

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

আরও জানুন

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