মোবাইল ডিভাইসে ডেস্কটপ-আকারের ছবি পরিবেশন করা প্রয়োজনের তুলনায় 2-4x বেশি ডেটা ব্যবহার করতে পারে। বিভিন্ন ডিভাইসে বিভিন্ন আকারের চিত্র পরিবেশন করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এই পৃষ্ঠার নির্দেশিকা অনুসরণ করুন।
প্রতিক্রিয়াশীল ছবি এবং মূল ওয়েব ভাইটাল
যখন আপনি প্রতিক্রিয়াশীল ছবি পরিবেশন করেন, আপনার পৃষ্ঠাটি ব্যবহারকারীর ডিভাইসের প্রদর্শন ক্ষমতা মূল্যায়ন করে এবং সেই মানদণ্ডের উপর ভিত্তি করে প্রদর্শনের জন্য সর্বোত্তম ইমেজ প্রার্থীদের একটি সেট বেছে নেয়। এটি আপনার ব্যবহারকারীদের জন্য ডেটা সংরক্ষণ করে, প্রধানত ছোট স্ক্রীনযুক্ত ডিভাইসগুলিতে ছোট ছবি পরিবেশন করে।
দ্রুত ইমেজ লোডিং এর প্রভাব আপনার পৃষ্ঠার সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP) পর্যন্ত প্রসারিত হতে পারে। উদাহরণস্বরূপ, যদি আপনার পৃষ্ঠার LCP উপাদানটি একটি চিত্র হয়, তাহলে এটিকে প্রতিক্রিয়াশীলভাবে পরিবেশন করলে এটির রিসোর্স লোডের সময়কাল কমাতে পারে।
কম রিসোর্স লোড সময়কাল একটি LCP ইমেজের জন্য লোডের সময় কম করে, আপনার পৃষ্ঠার LCP স্কোর উন্নত করে। কম LCP মানে ব্যবহারকারীরা আপনার সাইটটি দ্রুত লোড হচ্ছে এবং বিশেষ করে এর সবচেয়ে গুরুত্বপূর্ণ বিষয়বস্তু (LCP উপাদান) দ্রুত লোড হচ্ছে দেখতে পাবেন। প্রতিক্রিয়াশীল ছবি পরিবেশন করা পৃষ্ঠার অন্যান্য সংস্থানগুলির জন্য ব্যান্ডউইথের বিরোধও কমাতে পারে, যা আপনার পৃষ্ঠাটি সাধারণভাবে কত দ্রুত লোড হয় তা উন্নত করতে পারে।
চিত্রের আকার পরিবর্তন করুন
দুটি জনপ্রিয় ইমেজ রিসাইজিং টুল হল শার্প এনপিএম প্যাকেজ এবং ইমেজ ম্যাজিক সিএলআই টুল ।
তীক্ষ্ণ প্যাকেজটি স্বয়ংক্রিয়ভাবে চিত্রের আকার পরিবর্তন করার জন্য একটি ভাল পছন্দ (উদাহরণস্বরূপ, আপনার ওয়েবসাইটের সমস্ত ভিডিওর জন্য একাধিক আকারের থাম্বনেল তৈরি করা)। এটি দ্রুত এবং বিল্ড স্ক্রিপ্ট এবং সরঞ্জামগুলির সাথে ভালভাবে সংহত করে৷ ইমেজ ম্যাজিক এক-কালীন চিত্রের আকার পরিবর্তনের জন্য আরও সুবিধাজনক কারণ এটি সম্পূর্ণভাবে কমান্ড লাইন থেকে চলে।
তীক্ষ্ণ
একটি নোড স্ক্রিপ্ট হিসাবে তীক্ষ্ণ ব্যবহার করতে, এই কোডটি আপনার প্রকল্পে একটি পৃথক স্ক্রিপ্ট হিসাবে সংরক্ষণ করুন, তারপর আপনার চিত্রগুলি রূপান্তর করতে এটি চালান:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ইমেজ ম্যাজিক
একটি চিত্রকে তার আসল আকারের 33% এ পুনরায় আকার দিতে, আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:
convert -resize 33% flower.jpg flower-small.jpg
একটি 300px চওড়া দ্বারা 200px উচ্চ স্থানের মধ্যে ফিট করার জন্য একটি চিত্রের আকার পরিবর্তন করতে, নিম্নলিখিত কমান্ডটি চালান:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
আপনার কতগুলি চিত্র সংস্করণ তৈরি করা উচিত?
এই প্রশ্নের কোন একক "সঠিক" উত্তর নেই। যাইহোক, একটি চিত্রের 3-5টি ভিন্ন মাপের পরিবেশন করা সাধারণ। আরও বেশি ইমেজ মাপ পরিবেশন করা পারফরম্যান্সের জন্য ভাল, কিন্তু আপনার সার্ভারে আরও জায়গা নেয় এবং আপনাকে একটু বেশি HTML লিখতে হবে।
অন্যান্য বিকল্প
Thumbor (ওপেন সোর্স) এবং ক্লাউডিনারির মতো ইমেজ পরিষেবাগুলিও পরীক্ষা করার মতো। উভয়ই প্রতিক্রিয়াশীল ছবি তৈরি করার সহজ উপায় যা চাহিদা অনুযায়ী ইমেজ ম্যানিপুলেশন প্রদান করে। Thumbor সেট আপ করতে, এটি আপনার সার্ভারে ইনস্টল করুন। Cloudinary আপনার জন্য বিশদ বিবরণের যত্ন নেয় এবং কোন সার্ভার সেটআপের প্রয়োজন হয় না।
একাধিক ইমেজ সংস্করণ পরিবেশন করুন
আপনি যখন একাধিক চিত্র সংস্করণ নির্দিষ্ট করেন, ব্রাউজারটি ব্যবহার করার জন্য সেরাটি বেছে নেয়:
| আগে | পরে |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw"> |
<img> ট্যাগের src , srcset , এবং sizes বৈশিষ্ট্যগুলি এই শেষ ফলাফলটি অর্জন করতে ইন্টারঅ্যাক্ট করে।
"src" বৈশিষ্ট্য
src অ্যাট্রিবিউট এই কোডটিকে এমন ব্রাউজারগুলির জন্য কাজ করে যা srcset এবং sizes অ্যাট্রিবিউট সমর্থন করে না। এই ব্রাউজারগুলি src অ্যাট্রিবিউটে নির্দিষ্ট রিসোর্স লোড করতে ফিরে আসে।
"srcset" বৈশিষ্ট্য
srcset বৈশিষ্ট্য হল ছবি ফাইলের নাম এবং তাদের প্রস্থ বা ঘনত্ব বর্ণনাকারীর একটি কমা দ্বারা পৃথক করা তালিকা।
এই উদাহরণটি প্রস্থ বর্ণনাকারী ব্যবহার করে, যা ব্রাউজারকে বলে যে একটি চিত্র কতটা প্রশস্ত তাই এটি খুঁজে বের করার জন্য ছবিটি ডাউনলোড করতে হবে না। 480w একটি প্রস্থ বর্ণনাকারী ব্রাউজারকে বলে যে flower-small.jpg 480px চওড়া। 1080w একটি প্রস্থ বর্ণনাকারী ব্রাউজারকে বলে যে flower-large.jpg .jpg 1080px চওড়া।
অতিরিক্ত ক্রেডিট : বিভিন্ন আকারের চিত্র পরিবেশন করার জন্য আপনাকে ঘনত্বের বর্ণনাকারী সম্পর্কে জানতে হবে না। যাইহোক, আপনি যদি ঘনত্বের বর্ণনাকারীরা কীভাবে কাজ করে সে সম্পর্কে আগ্রহী হন, তাহলে রেজোলিউশন স্যুইচিং কোড ল্যাবটি দেখুন। ডিভাইসের পিক্সেল ঘনত্বের উপর ভিত্তি করে বিভিন্ন চিত্র পরিবেশন করতে ঘনত্ব বর্ণনাকারী ব্যবহার করা হয়।
"আকার" বৈশিষ্ট্য
সাইজ অ্যাট্রিবিউট ব্রাউজারকে বলে যে ইমেজটি প্রদর্শিত হলে কতটা চওড়া হবে, যদিও এটি ছবির ডিসপ্লে সাইজকে প্রভাবিত করে না, তাই এর জন্য আপনার এখনও CSS প্রয়োজন।
কোন ছবি লোড করতে হবে তা নির্ধারণ করতে ব্রাউজার ব্যবহারকারীর ডিভাইস (এর মাত্রা এবং পিক্সেল ঘনত্ব সহ) সম্পর্কে যা জানে তার সাথে এই তথ্যটি ব্যবহার করে।
যদি একটি ব্রাউজার " sizes " বৈশিষ্ট্যটি চিনতে না পারে তবে এটি " src " বৈশিষ্ট্য দ্বারা নির্দিষ্ট চিত্রটি লোড করতে ফিরে আসে৷ ( sizes এবং srcset একই সময়ে চালু করা হয়েছিল, তাই প্রতিটি ব্রাউজার উভয় বৈশিষ্ট্যই সমর্থন করে বা কোনটিই নয়।)
অতিরিক্ত ক্রেডিট : আপনি যদি অভিনব হতে চান, আপনি একাধিক স্লট আকার নির্দিষ্ট করতে আকার বৈশিষ্ট্য ব্যবহার করতে পারেন। এটি বিভিন্ন ভিউপোর্ট আকারের জন্য বিভিন্ন লেআউট ব্যবহার করে এমন ওয়েবসাইটগুলিকে মিটমাট করে৷ এটি কিভাবে করতে হয় তা জানতে এই একাধিক স্লট কোড নমুনা দেখুন।
(এমনকি আরও) অতিরিক্ত ক্রেডিট
ইতিমধ্যে তালিকাভুক্ত সমস্ত অতিরিক্ত ক্রেডিট ছাড়াও (ছবিগুলি জটিল!), আপনি শিল্প নির্দেশনার জন্যও এই একই ধারণাগুলি ব্যবহার করতে পারেন। শিল্প নির্দেশনা হল সম্পূর্ণ ভিন্ন চেহারার ছবি (একই ছবির বিভিন্ন সংস্করণের পরিবর্তে) বিভিন্ন ভিউপোর্টে পরিবেশন করার অনুশীলন। আপনি আর্ট ডিরেকশন কোড ল্যাবে আরও শিখতে পারেন।
যাচাই করুন
আপনি প্রতিক্রিয়াশীল চিত্রগুলি প্রয়োগ করার পরে, আপনি কোনও ছবি মিস করেননি তা নিশ্চিত করতে আপনি লাইটহাউস ব্যবহার করতে পারেন৷ লাইটহাউস পারফরমেন্স অডিট চালান ( লাইটহাউস > বিকল্প > পারফরম্যান্স ) এবং সঠিক আকারের ছবি অডিটের ফলাফল দেখুন। এই ফলাফলগুলি আপনাকে এখনও আকার পরিবর্তন করতে হবে এমন চিত্রগুলির তালিকা করে৷