একটি মাত্র অঅপ্টিমাইজড হিরো ইমেজ পুরো ওয়েব পেজের HTML, CSS এবং JavaScript মিলিয়ে তার চেয়ে ভারী হতে পারে। ছবি গড় ওয়েব পেজের মোট বাইটের প্রায় ৫০% গঠন করে, যা পারফরম্যান্স উন্নতির জন্য সবচেয়ে বড় লিভার। তবুও ছবি অপ্টিমাইজেশন ওয়েব ডেভেলপমেন্ট ও কন্টেন্ট ক্রিয়েশনের সবচেয়ে ভুল বোঝা দিকগুলোর একটি।
প্রভাব লোডিং স্পিডের বাইরে অনেক দূর যায়। ছবির আকার আপনার সার্চ র্যাঙ্কিং, হোস্টিং বিল, ব্যবহারকারীদের ডেটা প্ল্যান এবং এমনকি কনভার্সন রেট প্রভাবিত করে।
পারফরম্যান্স সংযোগ: Core Web Vitals এবং LCP
Google-এর Core Web Vitals হলো মেট্রিক্সের সেট যা সরাসরি সার্চ র্যাঙ্কিং প্রভাবিত করে। এর মধ্যে, Largest Contentful Paint (LCP) পরিমাপ করে সবচেয়ে বড় দৃশ্যমান উপাদান স্ক্রিনে রেন্ডার হতে কত সময় লাগে। বেশিরভাগ ক্ষেত্রে সেটি একটি ছবি।
Google ২.৫ সেকেন্ডের কম LCP কে "ভালো" বলে। ২.৫ থেকে ৪ সেকেন্ড "উন্নতি প্রয়োজন"। ৪ সেকেন্ডের বেশি "দুর্বল"।
পরিণতি সুনির্দিষ্ট:
- SEO র্যাঙ্কিং পতন — Core Web Vitals র্যাঙ্কিং সিগন্যাল; ধীর পেজ পজিশন হারায়
- উচ্চতর বাউন্স রেট — ৫৩% মোবাইল ভিজিটর ৩ সেকেন্ডের বেশি লাগলে চলে যায়
- কম কনভার্সন — প্রতিটি অতিরিক্ত সেকেন্ড কনভার্সন প্রায় ৭% কমায়
১০০ KB-এর সাধারণ নিয়ম ওয়েব পেজে কন্টেন্ট ছবির জন্য, প্রতি ছবি ১০০ KB-এর কম লক্ষ্য রাখুন। ফুল-উইডথ হিরো ছবির জন্য, ২০০ KB-এর নিচে থাকুন। আধুনিক ফরম্যাট ও যথাযথ কম্প্রেশনে কোনো দৃশ্যমান গুণমান হ্রাস ছাড়াই এই লক্ষ্য অর্জনযোগ্য।
লসি বনাম লসলেস: বিনিময় বোঝা
লসলেস কম্প্রেশন একই ডেটা এনকোড করার দক্ষতর উপায় খুঁজে ফাইল সাইজ কমায়। প্রতিটি পিক্সেল হুবহু সংরক্ষিত। হ্রাস পরিমিত — সাধারণত ১০-৩০%। PNG এটি ব্যবহার করে।
লসি কম্প্রেশন মানুষের চোখ লক্ষ্য করার সম্ভাবনা নেই এমন তথ্য বাদ দেয়। হ্রাস নাটকীয় — সাধারণত ৭০-৯০%। JPEG ও WebP (লসি মোডে) এই পদ্ধতি ব্যবহার করে।
গুরুত্বপূর্ণ বিষয় হলো ৮০-৮৫% গুণমানে লসি কম্প্রেশন ফটোগ্রাফের জন্য মূলের থেকে দৃশ্যত আলাদা করা যায় না।
| পদ্ধতি | সাইজ হ্রাস | গুণমান হ্রাস | সবচেয়ে ভালো |
|---|---|---|---|
| লসলেস (PNG) | ১০-৩০% | কিছুই না | লোগো, স্ক্রিনশট, টেক্সট-ভারী গ্রাফিক্স |
| লসি ৮৫% (JPEG/WebP) | ৭০-৮৫% | অগোচর | ফটো, ইলাস্ট্রেশন, ব্যাকগ্রাউন্ড |
| লসি ৬০% (JPEG/WebP) | ৮৫-৯৫% | কাছ থেকে দেখলে লক্ষণীয় | থাম্বনেইল, সাজসজ্জার ছবি |
ফরম্যাট গুরুত্বপূর্ণ: একই ছবি, সম্পূর্ণ ভিন্ন সাইজ
ছবির ফরম্যাট বাছাই কম্প্রেশন লেভেলের মতোই প্রভাবশালী। PNG হিসেবে সেভ করা ফটোগ্রাফ JPEG কোয়ালিটি ৮৫%-এর চেয়ে ৫ থেকে ১০ গুণ বড় হতে পারে।
JPEG ফটোগ্রাফের সর্বজনীন মান। WebP একই ভিজ্যুয়াল কোয়ালিটিতে JPEG-এর চেয়ে ২৫-৩৫% ছোট। AVIF WebP-এর চেয়েও ভালো কম্প্রেশন দেয়। PNG শুধু সুনির্দিষ্ট পিক্সেল পুনরুৎপাদন প্রয়োজন এমন ছবির জন্য সঠিক।
ব্যান্ডউইথ ও স্টোরেজ: লুকানো খরচ
২ MB ছবির পেজ মাসে ১০,০০০ বার দেখলে মাসে ২০ GB ছবি ডেটা ট্রান্সফার। ৪০০ KB-তে অপ্টিমাইজ করলে ৪ GB — ৮০% হ্রাস।
রেসপন্সিভ ইমেজ ও ডিভাইস সমস্যা
৩৭৫ পিক্সেল চওড়া ফোন স্ক্রিনে ১৯২০ পিক্সেল চওড়া ছবি ৯৬%-এর বেশি পিক্সেল অপচয় করে। সমাধান রেসপন্সিভ ইমেজ — বিভিন্ন ডিভাইসে বিভিন্ন সাইজের ছবি পরিবেশন।
লেজি লোডিং: যা দেখা যাচ্ছে না তা ডাউনলোড করবেন না
ফোল্ডের নিচের ছবি তৎক্ষণাৎ লোড হওয়ার দরকার নেই। লেজি লোডিং ব্যবহারকারী কাছে স্ক্রোল না করা পর্যন্ত ডাউনলোড স্থগিত করে। আধুনিক ব্রাউজার একটি HTML অ্যাট্রিবিউট দিয়ে নেটিভ লেজি লোডিং সমর্থন করে।
CDN: এজ থেকে ছবি পরিবেশন
কন্টেন্ট ডেলিভারি নেটওয়ার্ক বিশ্বজুড়ে বিতরিত সার্ভারে আপনার ছবির কপি সংরক্ষণ করে। অনেক আধুনিক CDN অন-দ্য-ফ্লাই ইমেজ ট্রান্সফর্মেশনও দেয়।
আরও জানুন
ছবি অপ্টিমাইজেশন এমন বিষয় যেখানে ছোট উন্নতি উল্লেখযোগ্য ফলাফলে যোগ হয়। কম্প্রেশন লেভেল নিয়ে পরীক্ষা করতে, toolk.io-তে একটি ইমেজ কম্প্রেসর আছে যা সবকিছু আপনার ব্রাউজারে প্রক্রিয়া করে। ছবি কম্প্রেস করা এবং ফরম্যাটের মধ্যে রূপান্তর টিউটোরিয়ালও সাইটে পাওয়া যায়।