ওয়েবসাইটের জন্য ছবি অপ্টিমাইজ করবেন কীভাবে
ছবিগুলি সাধারণত একটি পৃষ্ঠার বেশিরভাগ ওজন। পাঁচটি সিদ্ধান্ত এর বেশিরভাগই ঠিক করে।
আপডেট করা হয়েছে ১ সেপ্টেম্বর, ২০২৬
বেশিরভাগ সাইটে পৃষ্ঠা ওজনের সবচেয়ে বড় অবদানকারী হল ছবি, এবং বেশিরভাগ পৃষ্ঠায় Largest Contentful Paint উপাদান হল একটি ছবি। এগুলিকে অপ্টিমাইজ করা হল উপলব্ধ সর্বোচ্চ-লিভারেজ পারফরম্যান্স কাজ, এবং এর বেশিরভাগই টুলিংয়ের চেয়ে সিদ্ধান্ত।
এটি সেই ক্রম যা গুরুত্বপূর্ণ, সবচেয়ে বড় প্রভাব থেকে ছোট পর্যন্ত।
ধাপগুলি
- 1
1. সঠিক মাত্রা পরিবেশন করুন
ছবিটি যে বৃহত্তম CSS প্রস্থ দখল করে তা পরিমাপ করুন এবং উচ্চ-ঘনত্বের ডিসপ্লেগুলির জন্য প্রায় দ্বিগুণ আকারে এক্সপোর্ট করুন। 1200 CSS পিক্সেলের একটি হিরো ছবির জন্য 2400px উৎস প্রয়োজন, 6000px ক্যামেরার আসল ছবি নয়। এই একক ধাপটি সাধারণত অন্য সবকিছুর সম্মিলিত প্রভাবকে ছাড়িয়ে যায়।
- 2
2. WebP ব্যবহার করুন, যেখানে সম্ভব AVIF সহ
WebP একই গুণমানে JPEG এর চেয়ে 25-35% ছোট এবং সর্বত্র সমর্থিত। AVIF আরও এগিয়ে যায় তবে আরও ধীরে এনকোড করে। যদি আপনাকে খুব পুরানো ক্লায়েন্টদের সমর্থন করতে হয় তবে একটি JPEG ফলব্যাক রাখুন।
- 3
3. অভ্যাসের পরিবর্তে বিষয়বস্তু দ্বারা গুণমান সেট করুন
ছবিগুলির জন্য 75-85। তীক্ষ্ণ প্রান্তযুক্ত গ্রাফিক্সের জন্য উচ্চতর, যেখানে কম্প্রেশন আর্টিফ্যাক্টগুলি আরও দৃশ্যমান। আসল ডিসপ্লে আকারে ফলাফল পরীক্ষা করুন।
- 4
4. সর্বদা প্রস্থ এবং উচ্চতা সেট করুন
স্পষ্ট মাত্রা ব্রাউজারকে ছবি লোড হওয়ার আগে স্থান সংরক্ষণ করতে দেয়, যা লেআউট শিফট প্রতিরোধ করে। এটি একটি Cumulative Layout Shift ফিক্স যার কোনো খরচ নেই।
- 5
5. ভাঁজের নিচে লেজি-লোড করুন, কখনও এর উপরে নয়
পৃষ্ঠার নিচের দিকে থাকা ছবিগুলিতে loading="lazy" যোগ করুন। আপনার LCP ছবিতে লেজি-লোড করবেন না — এটি পরিমাপ করা জিনিসটিকে বিলম্বিত করে।
এক্সপোর্টের সময় মেটাডেটা বাদ দিন
EXIF এবং এমবেডেড কালার প্রোফাইলগুলি ওয়েবে কোনো রেন্ডারিং সুবিধা ছাড়াই ওজন বাড়ায়।
লোগো এবং আইকনগুলির জন্য SVG ব্যবহার করুন
একটি ভেক্টর লোগো সাধারণত কয়েক কিলোবাইট হয় এবং প্রতিটি আকার ও ঘনত্বে তীক্ষ্ণ থাকে।