আমরা সবাই সেখানে রয়েছি: আপনি পৃষ্ঠায় একটি চিত্র যোগ করার আগে এটিকে ছোট করতে ভুলে গেছেন। ছবিটি দেখতে ঠিক আছে, কিন্তু এটি ব্যবহারকারীদের ডেটা নষ্ট করছে এবং পৃষ্ঠার কার্যক্ষমতাকে ক্ষতিগ্রস্ত করছে।
ভুল আকারের ছবি সনাক্ত করুন
বাতিঘর ভুল আকারের ছবি সনাক্ত করা সহজ করে তোলে। পারফরম্যান্স অডিট চালান ( লাইটহাউস > বিকল্প > পারফরম্যান্স ) এবং সঠিক আকারের চিত্রের অডিটের ফলাফল দেখুন। অডিট যে কোনও চিত্রের তালিকা করে যা পুনরায় আকার দিতে হবে।
সঠিক চিত্রের আকার নির্ধারণ করুন
চিত্রের আকার প্রতারণামূলকভাবে জটিল হতে পারে। এই কারণে, আমরা দুটি পন্থা প্রদান করেছি: "ভাল" এবং "ভাল"। উভয়ই কর্মক্ষমতা উন্নত করবে, কিন্তু "ভাল" পদ্ধতি বুঝতে এবং প্রয়োগ করতে একটু বেশি সময় লাগতে পারে। যাইহোক, এটি আপনাকে আরও বড় কর্মক্ষমতা উন্নতির সাথে পুরস্কৃত করবে। আপনার জন্য সর্বোত্তম পছন্দ হল যেটি আপনি বাস্তবায়নে স্বাচ্ছন্দ্য বোধ করেন।
CSS ইউনিটের উপর একটি দ্রুত নোট
ছবি সহ HTML উপাদানের আকার নির্দিষ্ট করার জন্য দুই ধরনের CSS ইউনিট রয়েছে:
- পরম ইউনিট: পরম ইউনিট ব্যবহার করে স্টাইল করা উপাদানগুলি ডিভাইস নির্বিশেষে সর্বদা একই আকারে প্রদর্শিত হবে। বৈধ, পরম CSS ইউনিটের উদাহরণ: px, cm, mm, in.
- আপেক্ষিক ইউনিট: আপেক্ষিক ইউনিট ব্যবহার করে স্টাইল করা উপাদানগুলি নির্দিষ্ট আপেক্ষিক দৈর্ঘ্যের উপর নির্ভর করে বিভিন্ন আকারে প্রদর্শিত হবে। বৈধ, আপেক্ষিক CSS ইউনিটের উদাহরণ: %, vw (1vw = 1% ভিউপোর্টের প্রস্থ), em (1.5 em = 1.5 গুণ ফন্ট সাইজ)।
"ভাল" পদ্ধতি
এর উপর ভিত্তি করে সাইজিং সহ ছবির জন্য...
- আপেক্ষিক ইউনিট : চিত্রটিকে একটি আকারে পরিবর্তন করুন যা সমস্ত ডিভাইস জুড়ে কাজ করবে।
আপনার ব্যবহারকারীদের দ্বারা সাধারণত কোন ডিসপ্লে মাপ ব্যবহার করা হয় তা দেখতে আপনার অ্যানালিটিক্স ডেটা (যেমন গুগল অ্যানালিটিক্স) পরীক্ষা করা আপনার সহায়ক মনে হতে পারে। বিকল্পভাবে, screensiz.es অনেক সাধারণ ডিভাইসের প্রদর্শন সম্পর্কে তথ্য প্রদান করে। - পরম একক : চিত্রটি যে আকারে প্রদর্শিত হয় তার সাথে মেলে তার আকার পরিবর্তন করুন।
DevTools এলিমেন্টস প্যানেলটি একটি চিত্র কোন আকারে প্রদর্শিত হবে তা নির্ধারণ করতে ব্যবহার করা যেতে পারে।
"উত্তম" পদ্ধতি
পরম এবং আপেক্ষিক উভয় আকারের চিত্রগুলির জন্য, বিভিন্ন প্রদর্শন ঘনত্বে বিভিন্ন চিত্র পরিবেশন করতে srcset এবং sizes বৈশিষ্ট্যগুলি ব্যবহার করুন। প্রতিক্রিয়াশীল ইমেজ গাইড পড়ুন.
"ডিসপ্লে ঘনত্ব" বলতে বোঝায় যে বিভিন্ন ডিসপ্লেতে পিক্সেলের বিভিন্ন ঘনত্ব থাকে। অন্যান্য সমস্ত জিনিস সমান হওয়াতে, একটি উচ্চ পিক্সেল ঘনত্বের ডিসপ্লে কম পিক্সেল ঘনত্বের ডিসপ্লের চেয়ে তীক্ষ্ণ দেখাবে।
ফলস্বরূপ, আপনি যদি ব্যবহারকারীরা তাদের ডিভাইসের পিক্সেল ঘনত্ব নির্বিশেষে সবচেয়ে ক্রিস্পেস্ট সম্ভাব্য চিত্রগুলি উপভোগ করতে চান তবে একাধিক চিত্র সংস্করণ প্রয়োজন।
প্রতিক্রিয়াশীল চিত্র কৌশলগুলি আপনাকে একাধিক চিত্র সংস্করণ তালিকাভুক্ত করার অনুমতি দিয়ে এবং ডিভাইসটির জন্য সবচেয়ে ভাল কাজ করে এমন চিত্র চয়ন করার অনুমতি দিয়ে এটি সম্ভব করে।
সমস্ত ডিভাইস জুড়ে কাজ করে এমন একটি চিত্র ছোট ডিভাইসের জন্য অপ্রয়োজনীয়ভাবে বড় হবে। প্রতিক্রিয়াশীল চিত্র কৌশল, বিশেষত srcset এবং আকারগুলি , আপনাকে একাধিক চিত্র সংস্করণ নির্দিষ্ট করতে এবং ডিভাইসের জন্য সবচেয়ে ভাল কাজ করে এমন আকার চয়ন করতে দেয়৷
চিত্রের আকার পরিবর্তন করুন
আপনি যে পদ্ধতিটি বেছে নিন তা নির্বিশেষে, আপনার চিত্রগুলিকে পুনরায় আকার দিতে ImageMagick ব্যবহার করা আপনার সহায়ক বলে মনে হতে পারে। ইমেজ ম্যাজিক ছবি তৈরি এবং সম্পাদনা করার জন্য সবচেয়ে জনপ্রিয় কমান্ড লাইন টুল। বেশিরভাগ লোকেরা একটি GUI-ভিত্তিক চিত্র সম্পাদকের চেয়ে CLI ব্যবহার করার সময় আরও দ্রুত চিত্রের আকার পরিবর্তন করতে পারে।
মূলের আকারের 25% চিত্রের আকার পরিবর্তন করুন:
convert flower.jpg -resize 25% flower_small.jpg
"200px চওড়া দ্বারা 100px লম্বা" এর মধ্যে ফিট করার জন্য স্কেল চিত্র:
# 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 সেটিং ব্যবহার করতে চাইবেন যাতে এই স্পষ্ট 16/9 ভিউতে ছবিটি বিকৃত না হয়। :
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
যাচাই করুন
একবার আপনি আপনার সমস্ত চিত্রের আকার পরিবর্তন করার পরে, আপনি কিছু মিস করেননি তা যাচাই করতে Lighthouse পুনরায় চালান৷