যদি একটি রেন্ডার করা চিত্রের একটি আকৃতির অনুপাত থাকে যা তার উত্স ফাইলের আকৃতির অনুপাতের ( প্রাকৃতিক দিক অনুপাত) থেকে উল্লেখযোগ্যভাবে আলাদা, রেন্ডার করা চিত্রটি বিকৃত দেখাতে পারে, সম্ভবত একটি অপ্রীতিকর ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে পারে।
কীভাবে লাইটহাউস ইমেজ অ্যাসপেক্ট রেশিও অডিট ব্যর্থ হয়
লাইটহাউস যেকোন চিত্রকে ফ্ল্যাগ করে রেন্ডার করা মাত্রার সাথে কিছু পিক্সেলের বেশি পার্থক্য প্রত্যাশিত মাত্রার সাথে যখন তার প্রাকৃতিক অনুপাতে রেন্ডার করা হয়:
একটি ভুল চিত্রের অনুপাতের জন্য দুটি সাধারণ কারণ রয়েছে:
- একটি চিত্র সুস্পষ্ট প্রস্থ এবং উচ্চতার মানগুলির সাথে সেট করা হয় যা উত্স চিত্রের মাত্রা থেকে আলাদা৷
- একটি পরিবর্তনশীল আকারের পাত্রের শতাংশ হিসাবে একটি চিত্র একটি প্রস্থ এবং উচ্চতায় সেট করা হয়৷
সঠিক আকৃতির অনুপাত সহ চিত্রগুলি প্রদর্শন নিশ্চিত করুন৷
একটি ইমেজ CDN ব্যবহার করুন
একটি ইমেজ CDN আপনার ছবিগুলির বিভিন্ন আকারের সংস্করণ তৈরি করার প্রক্রিয়াটিকে স্বয়ংক্রিয়ভাবে সহজ করে তুলতে পারে। একটি ওভারভিউ এর জন্য ইমেজ অপ্টিমাইজ করতে ইমেজ CDN ব্যবহার করুন এবং হ্যান্ডস-অন কোডল্যাবের জন্য Thumbor ইমেজ CDN কিভাবে ইনস্টল করবেন দেখুন।
সিএসএস পরীক্ষা করুন যা ছবির আকৃতির অনুপাতকে প্রভাবিত করে
আপনার যদি CSS খুঁজে পেতে সমস্যা হয় যা ভুল আকৃতির অনুপাত ঘটাচ্ছে, তাহলে Chrome DevTools আপনাকে CSS ঘোষণাগুলি দেখাতে পারে যা একটি প্রদত্ত চিত্রকে প্রভাবিত করে। আরও তথ্যের জন্য Google-এর শুধুমাত্র CSS দেখুন যা আসলে একটি উপাদান পৃষ্ঠায় প্রয়োগ করা হয়েছে ।
HTML-এ ছবির width এবং height বৈশিষ্ট্যগুলি পরীক্ষা করুন
যখন সম্ভব, আপনার HTML-এ প্রতিটি ছবির width এবং height বৈশিষ্ট্যগুলি নির্দিষ্ট করা ভাল অভ্যাস যাতে ব্রাউজার ছবিটির জন্য স্থান বরাদ্দ করতে পারে। এই পদ্ধতিটি নিশ্চিত করতে সাহায্য করে যে চিত্রটি একবার লোড হয়ে গেলে ছবির নীচের বিষয়বস্তু স্থানান্তরিত না হয়৷
যাইহোক, যদি আপনি প্রতিক্রিয়াশীল চিত্রগুলির সাথে কাজ করেন তবে HTML-এ চিত্রের মাত্রা নির্দিষ্ট করা কঠিন হতে পারে কারণ আপনি ভিউপোর্টের মাত্রাগুলি না জানা পর্যন্ত প্রস্থ এবং উচ্চতা জানার কোনও উপায় নেই৷ প্রতিক্রিয়াশীল চিত্রগুলির জন্য আকৃতির অনুপাত সংরক্ষণে সহায়তা করতে CSS আকৃতির অনুপাত লাইব্রেরি বা আকৃতির অনুপাত বাক্সগুলি ব্যবহার করার কথা বিবেচনা করুন৷
পরিশেষে, প্রতিটি ব্যবহারকারীর ডিভাইসের জন্য সঠিক আকারের চিত্রগুলি কীভাবে পরিবেশন করা যায় তা শিখতে সঠিক মাত্রা সহ পরিবেশন করা ছবিগুলি দেখুন৷