সঠিক মাত্রা সহ ছবি পরিবেশন করুন

Katie Hempenius

এই কোডল্যাবটি অনুসরণ করতে, একটি দ্বিতীয় ট্যাবে এই সমস্যাটি খুলুন।

বাতিঘর চালান

এই ত্রুটিটি যথেষ্ট ছোট যে এর ছবিগুলি হাত দ্বারা পরিদর্শন করা যেতে পারে। তবে বেশিরভাগ ওয়েবসাইটের জন্য, এটিকে স্বয়ংক্রিয় করতে লাইটহাউসের মতো একটি টুল ব্যবহার করা অপরিহার্য।

1. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
2. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
3. লাইটহাউস ট্যাবে ক্লিক করুন।
4. নিশ্চিত করুন যে পারফরম্যান্স চেকবক্সটি বিভাগ তালিকায় নির্বাচিত হয়েছে।
5. জেনারেট রিপোর্ট বোতামে ক্লিক করুন।
6. সঠিকভাবে সাইজ ইমেজ অডিটের ফলাফল দেখুন।

লাইটহাউস অডিট দেখায় যে এই পৃষ্ঠার ছবি দুটির আকার পরিবর্তন করা দরকার৷

flower_logo.png ঠিক করুন

পৃষ্ঠার শীর্ষে শুরু করুন এবং লোগো চিত্রটি ঠিক করুন।

• DevTools এলিমেন্ট প্যানেলে flower_logo.png পরিদর্শন করুন।

এটি flower_logo.png এর জন্য CSS:

.logo {
  width: 50px;
  height: 50px;
}

এই চিত্রটির CSS প্রস্থ 50 পিক্সেল, তাই flower_logo.png আকার পরিবর্তন করা উচিত। ফিট করার জন্য ইমেজ রিসাইজ করতে আপনি ImageMagick ব্যবহার করতে পারেন। ইমেজ ম্যাজিক হল ইমেজ এডিটিং এর জন্য একটি CLI টুল যা কোডল্যাব পরিবেশে প্রাক-ইনস্টল করা হয়।

1. প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
2. টার্মিনাল ক্লিক করুন (দ্রষ্টব্য: যদি টার্মিনাল বোতামটি না দেখায় তাহলে আপনাকে ফুলস্ক্রিন বিকল্প ব্যবহার করতে হতে পারে)।
3. কনসোলে, টাইপ করুন:

convert flower_logo.png -resize 50x50 flower_logo.png

Flower_photo.jpg ঠিক করুন

এর পরে, বেগুনি ফুলের ফটো ঠিক করুন।

• DevTools উপাদান প্যানেলে flower_photo.jpg পরিদর্শন করুন।

এটি হল flower_photo.jpg এর CSS:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw flower_photo.jpg এর CSS প্রস্থকে "ব্রাউজারের অর্ধেক প্রস্থ" এ সেট করে। ( 1vw ব্রাউজারের প্রস্থের 1% সমান)।

এই চিত্রটির জন্য আদর্শ আকারটি এটি যে ডিভাইসে দেখা হচ্ছে তার উপর নির্ভর করবে, তাই আপনার এটির আকার পরিবর্তন করা উচিত যা আপনার বেশিরভাগ ব্যবহারকারীর জন্য ভাল কাজ করে। আপনার ব্যবহারকারীদের মধ্যে কোন স্ক্রীন রেজোলিউশনগুলি সাধারণ তা জানতে আপনি আপনার বিশ্লেষণ ডেটা পরীক্ষা করতে পারেন:

এই তথ্যটি নির্দেশ করে যে এই সাইটের 95%+ দর্শক স্ক্রীন রেজোলিউশন 1920 পিক্সেল চওড়া বা তার কম ব্যবহার করে।

এই তথ্য ব্যবহার করে আমরা গণনা করতে পারি যে ছবিটি কতটা চওড়া হওয়া উচিত: (1920 পিক্সেল চওড়া) * (ব্রাউজারের প্রস্থের 50%) = 960 পিক্সেল

1920 পিক্সেল চওড়ার বেশি রেজোলিউশনে, ছবিটি এলাকাটি কভার করার জন্য প্রসারিত করা হবে। রিসাইজ করা ছবিটি এখনও মোটামুটি বড়, তাই এর প্রভাবগুলি খুব বেশি লক্ষণীয় হওয়া উচিত নয়।

• 960 পিক্সেল চওড়া ইমেজ রিসাইজ করতে ImageMagick ব্যবহার করুন। টার্মিনাল প্রকারে:

# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

দ্রষ্টব্য: 960x একটি টাইপো নয়; এটি একটি প্রস্থ নির্দিষ্ট করে, কিন্তু উচ্চতা নয়। ছবির উচ্চতা প্রস্থের অনুপাতে স্কেল করা হবে। এটি একটি সহজ কৌশল যখন আপনি শুধুমাত্র একটি দিকের একটি চিত্রের মাত্রা সম্পর্কে যত্নশীল হন৷

আবার চালান বাতিঘর

• আপনি সফলভাবে চিত্রগুলিকে পুনরায় আকার দিয়েছেন তা যাচাই করতে লাইটহাউস পারফরম্যান্স অডিট পুনরায় চালান৷

… এবং এটা ব্যর্থ! কেন এমন হল?

Lighthouse একটি Nexus 5x-এ তার পরীক্ষা চালায়। Nexus 5x এর একটি 1080 x 1920 স্ক্রীন রয়েছে। Nexus 5x এর জন্য, flower_photo.jpg এর সর্বোত্তম আকার হবে 540 পিক্সেল চওড়া (1080 পিক্সেল * . 5)। এটি আমাদের রিসাইজ করা ছবির চেয়ে অনেক ছোট।

আপনার কি ইমেজটিকে আরও ছোট করার জন্য রিসাইজ করা উচিত? সম্ভবত। যাইহোক, এর উত্তর সবসময় পরিষ্কার-কাট নয়।

উচ্চ-রেজোলিউশন ডিভাইসে ছবির গুণমান এবং পারফরম্যান্সের মধ্যে এখানে ট্রেড-অফ। ব্যবহারকারীরা কতটা ঘনিষ্ঠভাবে ছবিগুলি পরিদর্শন করবেন তা অতিমূল্যায়ন করা সহজ—তাই আপনার সম্ভবত সেগুলিকে ছোট করা উচিত—কিন্তু অবশ্যই এমন কিছু ক্ষেত্রে ব্যবহার করা যেতে পারে যেখানে ছবির গুণমান বেশি গুরুত্বপূর্ণ৷

ভাল খবর হল যে আপনি একাধিক ছবির আকার পরিবেশন করার জন্য প্রতিক্রিয়াশীল ছবি ব্যবহার করে এই ট্রেডঅফটিকে সম্পূর্ণভাবে বাইপাস করতে পারেন। আপনি প্রতিক্রিয়াশীল চিত্র নির্দেশিকা থেকে এই সম্পর্কে আরও জানতে পারেন।