অনেক দর্শক সীমিত ডেটা প্যাকেজ বা দুর্বল সিগন্যালে মোবাইল ডেটায় সাইট খোলেন, বাসে, লঞ্চে বা ভিড়ের মার্কেটে। কয়েকটি বড় ছবির পেজ তাদের কাছে ভাঙা মনে হয়, আর লোড শেষ হওয়ার আগেই তারা চলে যান। ডেটা খরচও তাদের কাছে সত্যিকারের টাকার ব্যাপার।
ভালো খবর হলো, ছবির সমস্যা গতির সমস্যাগুলোর মধ্যে সবচেয়ে সহজে ঠিক করা যায়, আর চ্যাটেই করা যায়।
ছবিই সাধারণত পেজের সবচেয়ে ভারী অংশ। যে মাপে দেখানো হয় সে মাপে ছোট করুন, WebP বা অন্য আধুনিক ফরম্যাট ব্যবহার করুন এবং প্রথম স্ক্রিনের নিচের ছবিগুলো লেজি লোড করুন।
আপলোডের আগে ছোট করুন
ফোনের ক্যামেরার সরাসরি ছবি কয়েক মেগাবাইট ও হাজার হাজার পিক্সেল চওড়া হতে পারে, অথচ দেখানো হয় কয়েকশো পিক্সেলের একটি বক্সে। ভালো নিয়ম হলো ঝকঝকে স্ক্রিনের জন্য প্রদর্শনের মাপের প্রায় দ্বিগুণ রাখা, তার বেশি নয়।
- পুরো প্রস্থের হিরো ছবি: ১৬০০ থেকে ২০০০ পিক্সেল চওড়া যথেষ্ট।
- কার্ড ও পণ্যের থাম্বনেইল: ৬০০ থেকে ৮০০ পিক্সেল।
- লোগো ও আইকন: SVG ব্যবহার করুন, যা পরিষ্কার থাকে এবং খুব হালকা।
সঠিক ফরম্যাট বেছে নিন
WebP (এবং যেখানে চলে সেখানে AVIF) সাধারণত সমান মানে JPEG বা PNG-র চেয়ে অনেক ছোট ফাইল দেয়। ফলব্যাক হিসেবে ছবির জন্য JPEG রাখুন, আর ছবির জন্য PNG এড়ান, কারণ তা বড়। ৭৫ থেকে ৮০ শতাংশ মান সাধারণত চোখে ধরা পড়ে না।
বুদ্ধি করে লোড করুন
প্রথম স্ক্রিনের নিচের ছবি তখনই লোড হওয়া উচিত, যখন দর্শক স্ক্রল করে কাছে আসেন (লেজি লোডিং)। ওপরের প্রধান ছবি সাথে সাথে লোড হবে, লেজি নয়, কারণ মানুষ আগে সেটিই দেখে।
প্রতিটি ছবিতে প্রস্থ ও উচ্চতা বা নির্দিষ্ট অনুপাত দিন, যাতে ছবি আসার সময় পেজ লাফিয়ে না ওঠে।
একটি প্রম্পট যা পেস্ট করতে পারেন
“এই সাইটের সব ছবি মোবাইল ডেটার জন্য অপ্টিমাইজ করো। ছবি WebP-তে বদলাও, প্রতিটি যে মাপে দেখানো হয় তার দ্বিগুণের বেশি রাখবে না, প্রথম স্ক্রিনের নিচের সবকিছু লেজি-লোড করো কিন্তু হিরো ছবি নয়, নির্দিষ্ট অনুপাত দাও যাতে কিছু না লাফায়, আর ছোট বর্ণনামূলক অল্ট টেক্সট যোগ করো।”
বদলের পর নিজের ফোনে ওয়াইফাই বন্ধ করে সাইট খুলুন এবং প্রথম স্ক্রিন কত দ্রুত আসে তুলনা করুন।