AI-জেনারেটেড কন্টেন্টের জন্য ইমেজ অপ্টিমাইজেশন
AI ইমেজগুলো পারফরম্যান্সের ক্ষেত্রে একটি অনন্য সমস্যা তৈরি করে। জেনারেশন শেষ না হওয়া পর্যন্ত আপনি ইমেজের সাইজ, ফরম্যাট বা কন্টেন্ট সম্পর্কে জানতে পারেন না। তবুও আপনাকে স্লো লোডিং এবং লেআউট শিফট (layout shifts) প্রতিরোধ করতে হবে।
একটি ফ্রি AI ইমেজ জেনারেটর তৈরির সময় আমি এই ধাপগুলো ব্যবহার করেছি।
সাধারণ অপ্টিমাইজেশনে ধরে নেওয়া হয় যে আপনি ইমেজটি আগে থেকেই জানেন। আপনি এর ডাইমেনশন গণনা করতে পারেন এবং বিল্ড টাইমে অপ্টিমাইজ করতে পারেন। কিন্তু জেনারেটেড ইমেজগুলো এই নিয়মটি ভেঙে দেয়। ইউজার রিকোয়েস্ট না করা পর্যন্ত ইমেজটি অস্তিত্বহীন থাকে।
ডেলিভারি কীভাবে হ্যান্ডেল করবেন:
- Raw AI আউটপুট সাধারণত PNG হয়। PNG ফাইলগুলো অনেক বড় হয়, প্রায়শই 800KB থেকে 1.2MB এর মধ্যে থাকে।
- ইমেজগুলোকে WebP-তে কনভার্ট করুন। একই কোয়ালিটিতে WebP ফাইলগুলো PNG-এর তুলনায় ২৫% থেকে ৩৫% ছোট হয়।
- WebP-এর জন্য 85 কোয়ালিটি ব্যবহার করুন। AI ইমেজে প্রাকৃতিক টেক্সচার নয়েজ (texture noise) থাকে। উচ্চতর সেটিংস ভিজ্যুয়াল কোয়ালিটি না বাড়িয়ে ফাইলের সাইজ বাড়িয়ে দেয়।
লেআউট শিফট কীভাবে প্রতিরোধ করবেন:
ইউজাররা জেনারেট বাটনে ক্লিক করার আগেই একটি অ্যাসপেক্ট রেশিও (aspect ratio) বেছে নেন। এটিকে আপনার সুবিধার্থে ব্যবহার করুন।
- নির্বাচিত রেশিও (1:1, 16:9, ইত্যাদি) অনুযায়ী কন্টেইনারের সাইজ আগে থেকেই নির্ধারণ করে রাখুন।
- এটি ইমেজ আসার আগেই কন্টেইনারটিকে সঠিক সাইজে রাখে।
- এটি cumulative layout shift (CLS) দূর করে।
লোডিং স্পিড কীভাবে উন্নত করবেন:
জেনারেটেড ইমেজটি সাধারণত Largest Contentful Paint (LCP) এলিমেন্ট হয়।
- আপনার কোডে ইমেজটিকে একটি প্রায়োরিটি (priority) হিসেবে মার্ক করুন।
- আপনার CDN-এর জন্য একটি preconnect লিঙ্ক ব্যবহার করুন। এটি DNS এবং TLS হ্যান্ডশেক দ্রুত সম্পন্ন করতে সাহায্য করে।
- একটি স্কেলিটন লোডার (skeleton loader) ব্যবহার করুন যা চূড়ান্ত ইমেজটি যে জায়গা দখল করবে ঠিক সেই জায়গাটিই দখল করে রাখবে।
ক্যাশিং স্ট্র্যাটেজি:
- ইনফারেন্স লেয়ারে (inference layer) ক্যাশ করবেন না। প্রতিটি রিকোয়েস্ট যেন একদম নতুন বা ফ্রেশ মনে হয়।
- ডেলিভারি স্পিড বাড়াতে CDN লেয়ারে ক্যাশ করুন।
- প্রতিটি ইমেজের একটি ইউনিক URL থাকে, তাই অ্যাগ্রেসিভ ক্যাশিং (aggressive caching) করা নিরাপদ।
এই পরিবর্তনগুলোর ফলাফল:
- গড় সাইজ: 900KB থেকে 200KB।
- LCP: 4.1s থেকে 1.9s।
- CLS: দূর করা হয়েছে।
কাজের সারসংক্ষেপ:
- 85 কোয়ালিটিতে WebP-তে কনভার্ট করুন।
- নির্বাচিত অ্যাসপেক্ট রেশিও ব্যবহার করে কন্টেইনারের সাইজ আগে থেকেই ঠিক করে রাখুন।
- প্রাইমারি ইমেজটিকে প্রায়োরিটি লোডিং (priority loading) হিসেবে সেট করুন।
- CDN লেভেলে প্রচুর পরিমাণে ক্যাশ করুন।
- শুধুমাত্র 'below the fold'-এ থাকা সেকেন্ডারি কন্টেন্টের জন্য লেজি লোডিং (lazy loading) ব্যবহার করুন।
ঐচ্ছিক লার্নিং কমিউনিটি: https://t.me/GyaanSetuAi