1. অপ্টিমাইজ করার আগে ইমেজ শ্রেণিবদ্ধ করুন
টেমপ্লেট অনুযায়ী ইমেজ ইভেন্টরি করুন। প্রতিটি ইমেজের ভূমিকা, সর্ববৃহৎ ও সর্বনিম্ন রেন্ডারেড প্রস্থ, প্রাথমিক ভিউপোর্ট স্ট্যাটাস এবং ছোট স্ক্রিনে অন্য ক্রপের দরকার আছে কী না তা রেকর্ড করুন। এটা ফাইল-সাইজ কাজকে সিদ্ধান্তে পরিণত করে যেগুলো আপনি গুরুত্বপূর্ণ পেজে পরীক্ষা করতে পারবেন।
ফটো সাধারণত রিভিউ করা lossy কম্প্রেশন সহ সহনীয় হয়। লোগো, ইন্টারফেস সিম্বল, লাইনে আর্ট এবং চার্টগুলোর জন্য SVG বা এমন একটি র্যাস্টার ফরম্যাট ভালো হতে পারে যা ধার কর ফলগুলো রক্ষা করে। SVG লাইন আর্ট, ডায়াগ্রাম এবং চার্টের জন্য উপযোগী; বিস্তারিত ফটোতে নয়।
প্রয়োজনীয় ডিটেইল রাখুন এবং ইমেজের উদ্দেশ্য বর্ণনা করবে এমন টেক্সট দিন।
খালি alternative টেক্সট ব্যবহার করুন (alt=""); গুরুত্বপূর্ণ তথ্যের একমাত্র উৎস বানাবেন না।
কেবল পিক্সেল না বলে অ্যাকশন বা গন্তব্য নাম দিন।
2. রেন্ডার্ড স্লট অনুযায়ী আকার দিন, তারপর রেসপনসিভ ক্যান্ডিডেটস অফার করুন
ইনট্রিনসিক ডাইমেনশনগুলো CSS স্লটের সাথে মিলান। একটি ডেস্কটপ-স্কেল ফাইল যদি একটি সংকীর্ণ কার্ডে ব্যবহৃত হয় তাহলে অনাবশ্যক ট্রান্সফার হবে; ছোট র্যাস্টার অতিরিক্ত প্রসারিত হলে নরম বা ব্লারড হবে। ডিভাইস পিক্সেল রেশিও বিবেচনা করুন, কিন্তু ধরে নিয়ে প্রতিটি স্ক্রীনই সবচেয়ে বড় ক্যান্ডিডেট দরকার—এভাবে না করে ভিজ্যুয়ালভাবে যাচাই করুন।
একই কম্পোজিশনের জন্য বিভিন্ন প্রস্থ থাকলে srcset width descriptor ব্যবহার করুন এবং sizes ব্যবহার করে আসল স্লট প্রস্থ জানান। তখন ব্রাউজার একটি উপযুক্ত ক্যান্ডিডেট বেছে নেবে। ভিউপোর্ট-ভিত্তিক আর্ট-ডিরেকশনের জন্য picture ব্যবহার করুন: ছোট-স্ক্রিন ক্রপ যা সাবজেক্ট ধরে রাখে তা কেবল ডেস্কটপ ইমেজ ছোট করা থেকে আলাদা। picture এর ভিতরে img-তে 항상 src এবং alt সহ একটি fallback রাখুন।
একই কম্পোজিশন, বিভিন্ন পিক্সেল ডাইমেনশন।
স্কেল করার সময় ভিন্ন ক্রপ বা কম্পোজিশন যদি বার্তাটি লুকায়।
রেসপনসিভ অ্যাট্রিবিউট ব্যবহার না করা ক্লায়েন্টের জন্য img-এ src রাখুন।
3. ইমেজের বৈশিষ্ট্য অনুযায়ী ফরম্যাট ও কম্প্রেশন বেছে নিন
WebP এবং AVIF যথার্থ ক্ষেত্রে র্যাস্টার ট্রান্সফার কমাতে পারে, কিন্তু ফরম্যাট একাই কোয়ালিটির গ্যারান্টি নয়। প্রতিনিধিত্বকারী মুখ, সূক্ষ্ম টেক্সচার, ব্র্যান্ড গ্র্যাডিয়েন্ট, ইমেজ-ভিত্তিক টেক্সট এবং ট্রান্সপারেন্সি পরীক্ষায় রেখে দেখুন। JPEG এখনও ফটো ফallback হিসেবে প্রচলিত; PNG লসলেস র্যাস্টার ডিটেইল বা ট্রান্সপারেন্সির জন্য উপযোগী হতে পারে। AVIF সাপোর্ট এবং আপনার অডিয়েন্স ও ডেলিভারি স্ট্যাকের অপারেশনাল ফিট পরীক্ষা করুন।
Lossy কম্প্রেশন তথ্য বাদ দেয় байট বাঁচাতে এবং সাধারণত বিস্তারিত ফটোগুলিতে ধার গ্রহণ করে, কিন্তু ধারালো লাইন বা টেক্সটের ক্ষেত্রে বেশি ক্ষতিকর হতে পারে। Lossless কম্প্রেশন এনকোডেড পিক্সেল সংরক্ষণ করে কিন্তু কম সেভ করতে পারে। রেন্ডারড সাইজে পাশে পাশে তুলনা করে গুণমান নির্ধারণ করুন, কেবল সংখ্যাগত সেটিং কপি করে নয়। ওরিয়েন্টেশন, কালার এবং ওয়ার্কফ্লো প্রয়োজন নিশ্চিত না হওয়া পর্যন্ত মেটাডেটা মুছবেন না।
ডিসপ্লে সাইজে lossy AVIF, WebP এবং JPEG fallback তুলনা করুন।
উপযুক্ত SVG পছন্দ করুন অথবা ধারালো র্যাস্টার এজগুলো পরীক্ষায় রক্ষা করুন।
প্রতিটি ডেলিভার্ড ফরম্যাট ও fallback-এ আলফা উপস্থাপনা নিশ্চিত করুন।
4. মার্কআপ দিয়ে স্পিড এবং লেআউট স্থিতিশীলতা রক্ষা করুন
প্রতিটি কনটেন্ট img-এ width এবং height অ্যাট্রিবিউট দিন যা তার ইনট্রিনসিক অ্যাসপেক্ট রেশিও মেলে। ব্রাউজার ফাইল আসার আগেই স্পেস রিজার্ভ করতে পারবে, ফলে লেআউট মুভমেন্ট কমবে। CSS এখনও প্রদর্শিত মাত্রা নির্ধারণ করতে পারবে।
loading=lazy শুধুমাত্র প্রাথমিক ভিউপোর্টের বাইরে ব্যবহার করুন। লোডের সময় দৃশ্যমান থাকার সম্ভাবনা আছে এমন ইমেজ, বিশেষত Largest Contentful Paint (LCP) সম্ভাব্য ক্যান্ডিডেটগুলো lazy-load করবেন না। LCP হলো ভিউপোর্টে দৃশ্যমান সবচেয়ে বড় ইমেজ, টেক্সট ব্লক বা ভিডিওর রেন্ডার সময়। fetchpriority=high কেবল আপেক্ষিক একটি হিন্ট; এটিকে সীমিতভাবে প্রয়োগ করে ফলাফল পরিমাপ করুন। কনটেন্টকে বিকল্প টেক্সট বা ইমেজ ডিসকভারি দরকার হলে HTML ইমেজ মার্কআপ ব্যবহার করুন; Google উল্লেখ করেছে যে তারা CSS ইমেজগুলো ইনডেক্স করে না।
width এবং height সেট করুন, lazy-loaded গ্যালারির ইমেজগুলিতেও অন্তর্ভুক্ত।
সম্ভাব্য LCP ইমেজগুলো eager রাখুন এবং রিকোয়েস্ট প্রায়োরিটি পরিদর্শন করুন।
অফস্ক্রীনের ইমেজগুলো lazy-load করুন এবং কনস্ট্রেইন্ড নেটওয়ার্কে স্ক্রলিং টেস্ট করুন।
5. অর্থ, ডিসকভারি এবং ভিজ্যুয়াল কোয়ালিটি রক্ষা করুন
অলটারনেটিভ টেক্সট পরিস্থিতি ও প্রাসঙ্গিকতার ওপর নির্ভর করে। একটি তথ্যবহুল ইমেজের জন্য প্রয়োজনীয় তথ্য বর্ণনা করুন, ডেকোরেশনের জন্য alt="" ব্যবহার করুন, এবং লিঙ্ক করা বা বাটন ইমেজের কার্যকারিতা বা উদ্দেশ্য নামান। একটি জটিল চার্ট বা ডায়াগ্রামের জন্য কাছাকাছি টেক্সটে সমতুল্য ব্যাখ্যা প্রদান করুন। কীওয়ার্ড তালিকা ব্যবহার করবেন না।
ডিসকভারেবল কনটেন্ট ইমেজগুলির জন্য স্ট্যান্ডার্ড HTML ইমেজ এলিমেন্ট, প্রাসঙ্গিক কাছাকাছি টেক্সট, সম্ভব হলে সংক্ষিপ্ত বর্ণনামূলক ফাইলনেম এবং রেসপনসিভ মার্কআপ সহ একটি fallback সোর্স ব্যবহার করুন। ডিসকভারি উদ্দেশ্যে ডেকোরেটিভ ব্যাকগ্রাউন্ডকে অনাবশ্যক কনটেন্টে পরিণত করবেন না।
সর্ববৃহৎ ও সর্বনিম্ন ইচ্ছিত সাইজে কম্প্রেসড ফাইলগুলো পর্যালোচনা করুন।
সম্ভব হলে নিয়মিত টেক্সট ব্যবহার করুন; না পারলে সমতুল্য শব্দ প্রদান করুন।
তথ্যবহুল ইমেজগুলো প্রাসঙ্গিক পেজ টেক্সটের কাছে রাখুন।
6. শুধু অ্যাসেট নয়, পেজও যাচাই করুন
প্রতিনিধিত্বকারী পেজগুলোকে সংকীর্ণ ও বিস্তৃত ভিউপোর্টে টেস্ট করুন। ব্রাউজার ডেভটুলসে srcset ক্যান্ডিডেট, ট্রান্সফার সাইজ, রেন্ডারড ডাইমেনশন এবং লেআউট মুভমেন্ট পরিদর্শন করুন। নেটওয়ার্ক থ্রটল করে দেরিতে লোড হওয়া হিরো ইমেজ ও স্লো গ্যালারি প্রকাশ করুন। একটি এক্সপোর্ট তুলনা অটোমেটিকভাবে একটি ভুল sizes মান, অপ্রত্যাশিত ক্রপ বা প্রোডাকশন ট্রান্সফর্মেশন সমস্যা প্রকাশ করতে পারে না।
ল্যাব ও ফিল্ড সিগন্যাল যখন উপলব্ধ থাকে ব্যবহার করুন। Lighthouse এবং PageSpeed Insights অনুপযুক্তভাবে সাইজকৃত ইমেজগুলো চিহ্নিত করতে পারে; ফিল্ড LCP প্রকৃত ভিজিটগুলি প্রতিফলিত করে। একই টেমপ্লেট, ডিভাইস ক্লাস, রিলিজ ভার্সন এবং মেজারমেন্ট উইন্ডো তুলনা করুন। সার্ভার টাইম, স্ক্রিপ্ট, ফন্ট বা থার্ড পার্টির পরিবর্তনও ঘটলে ইমেজকে মেট্রিক পরিবর্তনের জন্য ক্রেডিট করবেন না। শেয়ার্ড টেমপ্লেট পরিবর্তন স্টেজ করুন এবং যাচাই না হওয়া পর্যন্ত রোলব্যাক পথ রাখুন।
স্লটটি অপ্রত্যাশিতভাবে ওভারসাইজড ক্যান্ডিডেট নির্বাচন করে না তা নিশ্চিত করুন।
ক্রপ, শার্পনেস, কালার, বিকল্প টেক্সট এবং লেআউট স্থিতিশীলতা পরীক্ষা করুন।
ওনার, প্রত্যাশিত সিগন্যাল এবং রিভার্সাল পাথ নাম দিন।