Image SEO

সার্চ ইঞ্জিন আপনার মতো করে একটি ছবিতে কী আছে তা দেখতে পারে না। Image SEO হলো আপনার ছবি বোঝার জন্য তাদের যথেষ্ট প্রেক্ষাপট দেওয়া, আর নিশ্চিত করা যে সেই ছবিগুলো পাতাটিকে এত ধীর করে না যে বাকি সবকিছুর ক্ষতি হয়।

alt অ্যাট্রিবিউট একটি ছবিকে শব্দে বর্ণনা করে। এটি স্ক্রিন রিডার জোরে পড়ে, ছবি লোড না হলে দেখানো হয়, আর সার্চ ইঞ্জিন ছবির কন্টেন্ট বুঝতে ব্যবহার করে।

যে দেখতে পায় না তাকে ছবিটি বর্ণনা করলে আপনি যা বলতেন তা লিখুন। নির্দিষ্ট আর তথ্যনির্ভর হন। Keyword ঠাসবেন না — এটি কারসাজির সবচেয়ে স্পষ্ট সংকেত, আর এটি পাতাটিকে স্ক্রিন রিডার ব্যবহারকারীদের প্রতি সক্রিয়ভাবে বৈরী করে তোলে।

ফাইলনেম একটি ছোট কিন্তু বিনামূল্যের সংকেত। DSC_0042.jpg কিছুই বলে না; thin-silver-laptop-on-desk.jpg কন্টেন্ট বর্ণনা করে। ছোট হাতের অক্ষর, শব্দের মধ্যে হাইফেন ব্যবহার করুন, আর আসলে যা ছবিতে আছে তা বর্ণনা করুন।

ছবি সাধারণত আকারে একটি পাতার সবচেয়ে বড় জিনিস, যা সেগুলোকে ধীর লোডিংয়ের সবচেয়ে সাধারণ কারণ করে তোলে — আর পাতার গতি এই কোর্সে পরে একটি ranking বিবেচনা হিসেবে কভার করা হয়েছে।

• আপলোডের আগে কম্প্রেস করুন। একটি ফোনের ক্যামেরা থেকে সরাসরি একটি ছবি কয়েক মেগাবাইট হতে পারে; একই ছবি প্রদর্শনের আকারে সাধারণত কোনো দৃশ্যমান পার্থক্য ছাড়াই এর একটি ছোট ভগ্নাংশ।
• আধুনিক ফরম্যাট ব্যবহার করুন। WebP আর AVIF তুলনীয় গুণমানে JPEG আর PNG-র চেয়ে যথেষ্ট ছোট ফাইল তৈরি করে, আর ব্যাপকভাবে সমর্থিত।
• অতিরিক্ত বড় ছবি পরিবেশন করবেন না। একটি 600px কলামে দেখানোর জন্য একটি 4000px-চওড়া ছবি আপলোড করলে ডাউনলোড হওয়া বেশিরভাগ বাইট নষ্ট হয়।

সবসময় width আর height অ্যাট্রিবিউট সেট করুন। সেগুলো ছাড়া ব্রাউজার জানে না কতটা জায়গা সংরক্ষণ করতে হবে, তাই প্রতিটি ছবি লোড হলে পাতাটি reflow করে — কেউ পড়ার চেষ্টা করার সময় কন্টেন্ট লাফায়। সেই আচরণ সরাসরি একটি page experience সংকেত হিসেবে মাপা হয়।

loading="lazy" ব্রাউজারকে বলে একটি ছবি দৃশ্যে আসার আগ পর্যন্ত ডাউনলোড করা থামিয়ে রাখতে। নিচে অনেক ছবিযুক্ত একটি পাতায়, এটি দৃশ্যমান অংশ কত দ্রুত দেখা যায় তাতে যথেষ্ট পার্থক্য করে।

একটি সতর্কতা: পাতা খোলা মাত্র যে ছবিগুলো দৃশ্যমান সেগুলো lazy-load করবেন না। পাতার উপরের প্রধান ছবিটি পিছিয়ে দিলে আপনি যা সবচেয়ে দ্রুত দেখাতে চান ঠিক সেটিই দেরি হয়।