কীভাবে ওয়েবসাইটে ছবি দ্রুত লোড করাবেন
যেকোনো ওয়েবসাইটে ছবির ওজন কমানোর পাঁচটি পরিবর্তন, প্রভাবের ক্রম অনুযায়ী।
বেশিরভাগ ওয়েবসাইটে একজন ভিজিটর যা ডাউনলোড করেন তার বড় অংশই ছবি। ফোন থেকে আসা অপটিমাইজ না করা একটি ফটো বাকি পুরো পেজের চেয়েও ভারী হতে পারে। ছবি ঠিক করাই সাধারণত গতি বাড়ানোর সবচেয়ে বড় ও সবচেয়ে সস্তা উপায়, আর দ্রুত পেজ সার্চে ওপরে আসে, ভিজিটরদের বেশিক্ষণ ধরে রাখে এবং বেশি বিক্রি আনে।
1. ছবি যে মাপে দেখানো হয় সেই মাপে আপলোড করুন
সরাসরি ফোন থেকে আসা একটি ফটো 4000 পিক্সেল বা তার বেশি চওড়া। ওয়েবসাইটের কনটেন্ট কলাম কদাচিৎ 1200 পিক্সেলের বেশি চওড়া হয়, আর কার্ড বা থাম্বনেইল আরও অনেক ছোট। প্রতিটি বাড়তি পিক্সেল ডাউনলোড হয় এবং তারপর ব্রাউজার সেটি ফেলে দেয়। আপলোডের আগে আকার বদলান: পূর্ণ প্রস্থের ব্যানারের জন্য প্রায় 2000 পিক্সেল চওড়া (যাতে উচ্চ ঘনত্বের স্ক্রিনেও ধারালো থাকে), কনটেন্টের ছবির জন্য 1200 থেকে 1600, আর কার্ডের জন্য 600 থেকে 800। আকার বদলানোর টুল একবারে পুরো একটি ফোল্ডার সামলায়।
2. কম্প্রেস করুন
সঠিক মাপ হয়ে গেলে বাকিটা কম্প্রেশন করে দেয়। 80 কোয়ালিটিতে সেভ করা একটি ফটো ওয়েব পেজে 100 কোয়ালিটির ফটোর মতোই দেখায়, আর প্রায়ই আকারে তার এক-তৃতীয়াংশ। ছবি কম্প্রেসর একসঙ্গে অনেক ফাইল সামলায় এবং প্রতিটি ফাইলে কতটা বাঁচল তা দেখায়।
3. WebP ব্যবহার করুন
WebP প্রতিটি বর্তমান ব্রাউজারে সমর্থিত এবং একই দৃশ্যমান মানে সাধারণত JPG-এর চেয়ে 25 থেকে 35% ছোট, সঙ্গে স্বচ্ছতার সমর্থন, যা একে অনেক PNG-এরও বিকল্প করে তোলে। JPG থেকে WebP বা PNG থেকে WebP দিয়ে রূপান্তর করুন। AVIF আরও ছোট, কিন্তু এনকোডিং ধীর এবং আপলোড সিস্টেমে সমর্থন কম সর্বজনীন, তাই ব্যবহারিক ডিফল্ট হিসেবে WebP-ই ভালো।
4. বিষয়বস্তু অনুযায়ী সঠিক ফরম্যাট বেছে নিন
| বিষয়বস্তু | সবচেয়ে ভালো ফরম্যাট |
|---|---|
| ফটো | WebP, অথবা যেখানে WebP গ্রহণ করে না সেখানে JPG |
| লোগো ও আইকন | থাকলে SVG, না হলে PNG বা WebP |
| লেখাসহ স্ক্রিনশট | PNG বা লসলেস WebP |
| সাধারণ অ্যানিমেশন | GIF-এর বদলে একটি ছোট ভিডিও |
5. ব্রাউজারকে বুদ্ধিমানের মতো লোড করতে সাহায্য করুন
- লেজি লোডিং। প্রথম স্ক্রিনের নিচের ছবিগুলো লোড হওয়া উচিত তখনই, যখন ভিজিটর স্ক্রল করে সেগুলোর কাছে আসেন। বেশিরভাগ প্ল্যাটফর্ম এটি নিজে থেকেই করে; সাধারণ HTML-এ শুরুতে দেখা যায় না এমন img ট্যাগে loading="lazy" যোগ করুন।
- মাপ। প্রতিটি ছবিকে একটি প্রস্থ ও উচ্চতা দিন, যাতে ছবি আসার সময় পেজ লাফালাফি না করে। লেআউট সরে যাওয়া Google-এর Core Web Vitals-এর একটি।
- প্রধান ছবি আগে। পেজের ওপরের বড় ছবিটি, সাধারণত যেটি Largest Contentful Paint হিসেবে গণ্য হয়, কখনো লেজি লোড করা উচিত নয়। এটি যত আগে সম্ভব লোড হওয়া উচিত।
এতে কতটা পার্থক্য হয়
সরাসরি ফোন থেকে আসা দশটি ফটোসহ একটি সাধারণ পেজের ওজন হতে পারে 30 MB। যুক্তিসংগত প্রস্থে আকার বদলে কম্প্রেস করলে একই পেজ সাধারণত প্রায় 2 MB হয়। WebP-তে রূপান্তর করলে 1.4 MB-এর কাছাকাছি। মোবাইল সংযোগে এটাই হলো এক সেকেন্ডে দেখা দেওয়া পেজ আর অনেক ভিজিটর ছেড়ে চলে যান এমন পেজের পার্থক্য।
ফলাফল যাচাই করা
Google-এর PageSpeed Insights এবং Chrome-এর ডেভেলপার টুলসের Lighthouse প্যানেল দুটোই অতিরিক্ত বড় ছবি, যেসব ছবি WebP হওয়া উচিত, এবং Largest Contentful Paint উপাদানটির তালিকা দেয়। আগে ও পরে দুবার চালান, আর প্রথমে সবচেয়ে বেশি ভিজিটর আসে এমন পেজগুলোর দিকে মনোযোগ দিন।