এই অভিজ্ঞতা আমাদের সবারই আছে: পেজে ছবি যোগ করার আগে সেটির আকার ছোট করতে ভুলে গেছেন। ছবিটি দেখতে ঠিকই লাগে, কিন্তু এটি ব্যবহারকারীদের ডেটা নষ্ট করে এবং পেজের পারফরম্যান্স কমিয়ে দেয়।
ভুল আকারের ছবি শনাক্ত করুন
লাইটহাউস ভুল আকারের ছবি শনাক্ত করা সহজ করে তোলে। পারফরম্যান্স অডিট ( লাইটহাউস > অপশন > পারফরম্যান্স ) চালান এবং 'সঠিকভাবে ছবির আকার নির্ধারণ' অডিটের ফলাফল দেখুন। এই অডিটে আকার পরিবর্তন করা প্রয়োজন এমন ছবিগুলোর একটি তালিকা থাকে।
সঠিক ছবির আকার নির্ধারণ করুন
ছবির আকার নির্ধারণ করা আপাতদৃষ্টিতে জটিল মনে হতে পারে। এই কারণে, আমরা দুটি পদ্ধতি দিয়েছি: একটি ‘ভালো’ এবং অন্যটি ‘আরও ভালো’। দুটি পদ্ধতিই পারফরম্যান্স উন্নত করবে, কিন্তু ‘আরও ভালো’ পদ্ধতিটি বুঝতে ও প্রয়োগ করতে কিছুটা বেশি সময় লাগতে পারে। তবে, এটি আপনাকে পারফরম্যান্সে আরও বড় উন্নতি এনে দেবে। আপনার জন্য সেরা উপায় হলো সেটিই, যা প্রয়োগ করতে আপনি স্বাচ্ছন্দ্যবোধ করেন।
CSS ইউনিট সম্পর্কে একটি সংক্ষিপ্ত নোট
ছবি সহ HTML এলিমেন্টের আকার নির্দিষ্ট করার জন্য দুই ধরনের CSS ইউনিট রয়েছে:
- অ্যাবসোলিউট ইউনিট: অ্যাবসোলিউট ইউনিট ব্যবহার করে স্টাইল করা এলিমেন্টগুলো ডিভাইস নির্বিশেষে সর্বদা একই আকারে প্রদর্শিত হবে। বৈধ অ্যাবসোলিউট CSS ইউনিটের উদাহরণ: px, cm, mm, in।
- আপেক্ষিক একক: আপেক্ষিক একক ব্যবহার করে স্টাইল করা এলিমেন্টগুলো, নির্দিষ্ট আপেক্ষিক দৈর্ঘ্যের উপর নির্ভর করে, বিভিন্ন আকারে প্রদর্শিত হবে। বৈধ আপেক্ষিক CSS এককের উদাহরণ: %, vw (1vw = ভিউপোর্টের প্রস্থের ১%), em (1.5 em = ফন্ট সাইজের ১.৫ গুণ)।
"ভালো" পদ্ধতি
যেসব ছবির আকার নির্ভর করে…
- আপেক্ষিক একক : ছবিটিকে এমন একটি আকারে পরিবর্তন করুন যা সব ডিভাইসে কাজ করবে।
আপনার ব্যবহারকারীরা সাধারণত কোন ডিসপ্লে সাইজ ব্যবহার করেন তা দেখতে আপনার অ্যানালিটিক্স ডেটা (যেমন গুগল অ্যানালিটিক্স) পরীক্ষা করা সহায়ক হতে পারে। বিকল্পভাবে, screensiz.es অনেক সাধারণ ডিভাইসের ডিসপ্লে সম্পর্কে তথ্য প্রদান করে। - অ্যাবসোলিউট ইউনিট : ছবিটি যে আকারে প্রদর্শিত হবে, সেই আকারের সাথে মেলানোর জন্য এর আকার পরিবর্তন করুন।
কোনো ছবি কী আকারে প্রদর্শিত হবে, তা নির্ধারণ করতে DevTools Elements প্যানেল ব্যবহার করা যেতে পারে।
'উত্তম' পদ্ধতি
অ্যাবসোলিউট এবং রিলেটিভ উভয় সাইজিংযুক্ত ছবির ক্ষেত্রে, বিভিন্ন ডিসপ্লে ডেনসিটিতে ভিন্ন ভিন্ন ছবি পরিবেশন করার জন্য srcset এবং sizes অ্যাট্রিবিউট ব্যবহার করুন। রেসপন্সিভ ইমেজ সম্পর্কিত নির্দেশিকাটি পড়ুন।
"ডিসপ্লে ডেনসিটি" বলতে বোঝায় যে বিভিন্ন ডিসপ্লেতে পিক্সেলের ঘনত্ব ভিন্ন ভিন্ন হয়। অন্যান্য সব কিছু সমান থাকলে, উচ্চ পিক্সেল ঘনত্বের ডিসপ্লে কম পিক্সেল ঘনত্বের ডিসপ্লের চেয়ে বেশি স্পষ্ট দেখাবে।
ফলস্বরূপ, ব্যবহারকারীরা তাদের ডিভাইসের পিক্সেল ঘনত্ব নির্বিশেষে সম্ভাব্য সবচেয়ে স্পষ্ট ছবি উপভোগ করতে চাইলে ছবির একাধিক সংস্করণ প্রয়োজন।
রেসপন্সিভ ইমেজ টেকনিক এই বিষয়টি সম্ভব করে তোলে, কারণ এর মাধ্যমে আপনি ছবির একাধিক সংস্করণ তালিকাভুক্ত করতে পারেন এবং ডিভাইসটি নিজের জন্য সবচেয়ে উপযুক্ত ছবিটি বেছে নিতে পারে।
যে ছবিটি সব ডিভাইসে কাজ করে, তা ছোট ডিভাইসের জন্য অপ্রয়োজনীয়ভাবে বড় হয়ে যাবে। রেসপন্সিভ ইমেজ টেকনিক, বিশেষ করে srcset এবং sizes , আপনাকে ছবির একাধিক সংস্করণ নির্দিষ্ট করার সুযোগ দেয় এবং ডিভাইসটিকে তার জন্য সবচেয়ে উপযুক্ত আকারটি বেছে নিতে সাহায্য করে।
ছবিগুলির আকার পরিবর্তন করুন
আপনি যে পদ্ধতিই বেছে নিন না কেন, আপনার ছবির আকার পরিবর্তন করার জন্য ImageMagick ব্যবহার করা সহায়ক হতে পারে। ছবি তৈরি এবং সম্পাদনা করার জন্য ImageMagick হলো সবচেয়ে জনপ্রিয় কমান্ড লাইন টুল। বেশিরভাগ মানুষ একটি GUI-ভিত্তিক ইমেজ এডিটরের চেয়ে CLI ব্যবহার করে অনেক দ্রুত ছবির আকার পরিবর্তন করতে পারেন।
ছবিটিকে মূল আকারের ২৫% এ রিসাইজ করুন:
convert flower.jpg -resize 25% flower_small.jpg
ছবিটিকে "২০০ পিক্সেল চওড়া ও ১০০ পিক্সেল লম্বা" মাপের মধ্যে ফিট করার জন্য স্কেল করুন:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
আপনি যদি অনেকগুলো ছবির আকার পরিবর্তন করতে চান, তবে প্রক্রিয়াটি স্বয়ংক্রিয় করতে কোনো স্ক্রিপ্ট বা সার্ভিস ব্যবহার করা আপনার জন্য আরও সুবিধাজনক হতে পারে। রেসপন্সিভ ইমেজ গাইডে আপনি এ সম্পর্কে আরও জানতে পারবেন।
মাত্রা নির্দিষ্ট করে লেআউটের স্থান পরিবর্তন এড়িয়ে চলুন।
যদিও এই নির্দেশিকাটি অপ্রয়োজনীয় বাইট ডাউনলোডের পরিমাণ কমানোর প্রেক্ষাপটে ছবির ডাইমেনশন নিয়ে আলোচনা করে, তবে এটি মনে রাখা গুরুত্বপূর্ণ যে, একটি পেজের কিউমুলেটিভ লেআউট শিফট মেট্রিক কমানোর জন্য লেআউটে ছবির জন্য সঠিক জায়গা সংরক্ষণ করাও একটি অত্যন্ত জরুরি উপাদান। HTML-এ ছবি পরিবেশন করার সময়, সঠিক width এবং height অ্যাট্রিবিউট ব্যবহার করতে ভুলবেন না, যাতে ব্রাউজার বুঝতে পারে যে লেআউটে ছবিটির জন্য কতটা জায়গা বরাদ্দ করতে হবে।
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
এই অ্যাট্রিবিউটগুলো বা এর সমতুল্য CSS সাইজিং ছাড়া, ছবিটি লোড না হওয়া পর্যন্ত ব্রাউজার বুঝতে পারে না যে এটি কতটা জায়গা নেবে। এর ফলে ডকুমেন্টের লেআউটে পরিবর্তন আসে, যা ব্যবহারকারীদের জন্য হতাশাজনক হতে পারে, কারণ তারা পড়া শুরু করার পর কন্টেন্টটি তার জায়গা থেকে সরে যায়। এর ফলে ব্যবহারকারীরা পড়ার সময় তাদের পড়ার জায়গা হারিয়ে ফেলতে পারেন, অথবা পেজ লোড হওয়ার সময় তাদের কাঙ্ক্ষিত জায়গায় ক্লিক করতে ব্যর্থ হয়ে অন্য কিছুতে ক্লিক করে ফেলতে পারেন, যা তারা করতে চাননি।
স্পষ্টভাবে প্রস্থ এবং উচ্চতা উল্লেখ করার একটি বিকল্প হলো, ইমেজের উপর CSS aspect-ratio প্রপার্টি ব্যবহার করা। এটি কোনো এলিমেন্টের আকারের উপর width এবং height অ্যাট্রিবিউটের মতোই প্রভাব ফেলে, কারণ এক্ষেত্রে কন্টেইনারটি একটি সামঞ্জস্যপূর্ণ অ্যাস্পেক্ট রেশিও বজায় রাখে। তবে, পার্থক্য হলো, এর ফলে ইমেজের প্রদত্ত অ্যাস্পেক্ট রেশিও থেকে ভিন্ন কোনো অ্যাস্পেক্ট রেশিও ব্যবহৃত হতে পারে। তাই, এই সুস্পষ্ট ১৬/৯ ভিউতে ইমেজটি যাতে বিকৃত না হয়, তা নিশ্চিত করতে আপনি সম্ভবত একটি object-fit সেটিং ব্যবহার করতে চাইবেন।
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
যাচাই করুন
আপনার সব ছবির আকার পরিবর্তন করার পর, কোনো কিছু বাদ পড়েছে কিনা তা যাচাই করতে লাইটহাউস পুনরায় চালান।