ওয়েবসাইট এর জন্য ইমেজ অপ্টিমাইজেশন

আস্সালামুআলাইকুম। আজ আমি আপনাদের ওয়েবসাইট এর জন্য ইমেজ অপ্টিমাইজেশন এর কিছু টিপস এবং রিসোর্স শেয়ার করবো যেগুলো ব্যবহার করে আপনি সহজে আপনার ওয়েবসাইট এর জন্য ইমেজ অপ্টিমাইজ করতে পারবেন এবং ওয়েবসাইট এর লোডিং স্পিড বাড়াতে পারবেন।

অপ্টিমাইজ করা না এমন (নন-মিনিফাইড) ছবিগুলি হল দুর্বল ওয়েবসাইটের কার্যক্ষমতার অন্যতম প্রধান কারণ, বিশেষ করে প্রাথমিক (প্রথম) লোডের উপর। রেজোলিউশন এবং ছবির মানের উপর নির্ভর করে, আপনি এমন ছবি ব্যবহার করবেন যেইটা আপনার পুরো ওয়েবসাইট এর ৭০% এর ও বেশি জায়গা দখল করে । অনভিজ্ঞ ডেভেলপার রা সাধারণত এই সম্ভাব্য সমস্যা সম্পর্কে সচেতন নয়। তারা ইমেজ অপ্টিমাইজ করার জন্য সরঞ্জাম এবং পদ্ধতির বিস্তৃত পরিসর সম্পর্কে সচেতন নয়।

JPG ছবির ফাইলের আকার গণনা করা 

কম্প্রেসড ইমেজ সাইজ সহজেই ইমেজের প্রস্থ পিএক্স মানকে ইমেজের উচ্চতা পিএক্স মানের সাথে গুন করে এবং ফলাফলটিকে 3 বাইট দ্বারা গুন করে যা 24 বিট (RGB কালার সিস্টেম) এর সমান। মানটিকে বাইট থেকে মেগাবাইটে রূপান্তর করতে আমরা ফলাফলটিকে 1,048,576 (1024 \* 1024) দ্বারা ভাগ করি।

উদাহরণ : image_size = (image_width * image_height * 3) / 1048576

আজকের দিনে ওয়েবসাইটের গড় আকার 2Mb এবং 3Mb এর মধ্যে বিবেচনা করে, কল্পনা করুন যে আপনার সাইটে এমন একটি চিত্র রয়েছে যা আপনার সাইটের আকারের 80% এর বেশি নেয়৷ ধীরগতির মোবাইল নেটওয়ার্কে 3Mb লোড হতে সময় লাগে, তাই ব্যবহারকারী যদি আপনার ওয়েবসাইট লোড হওয়ার জন্য অপেক্ষা করে থাকে এবং একটি ছবি লোড করার জন্য বেশিরভাগ সময় ব্যয় হয় তবে আপনি আপনার ওয়েবসাইটে কিছু ট্রাফিক হারাতে পারেন। তাই না?

তো আমরা কিভাবে এর সমাধান করতে পারি ?

অনলাইন ইমেজ অপ্টিমাইজেশান

আপনি যদি একটি সাধারণ স্ট্যাটিক ওয়েবসাইটে কাজ করেন যেখানে শুধুমাত্র কিছু ছবি রয়েছে যা প্রায়শই পরিবর্তিত হবে না বা একেবারেই পরিবর্তন হবে না, আপনি অসংখ্য অনলাইন টুলগুলির মধ্যে যেইকোনো একটিতে আপনার একটি ছবিকে টেনে এনে দেখতে পারেন৷ তারা বিভিন্ন অ্যালগরিদম ব্যবহার করে চিত্রগুলি কমপ্রেস করার জন্য অসাধারণভাবে কাজ করে। যেমন : compressor.io, squoosh, tinypng ইত্যাদি।

লেজি লোডিং 

লেজি লোডিং  হল শুধুমাত্র প্রয়োজনীয় ইমেজ লোড করার একটি পদ্ধতি। যেমন  ব্যবহারকারীর ভিউপোর্টের (স্ক্রিন) মধ্যে থাকা ছবিগুলিই লোড করা হয়৷ অন্যান্য ছবিগুলি ব্যবহারকারীর ভিউপোর্টের মধ্যে উপস্থিত না হওয়া পর্যন্ত লোড করা হয় না৷

যদিও নেটিভ লেজি লোডিং সম্প্রতি ব্রাউজারগুলিতে চালু করা হয়েছে, সেখানে অনেক জাভাস্ক্রিপ্ট-ভিত্তিক সমাধান উপলব্ধ রয়েছে।

প্রগ্রেসিভ ইমেজ 

যদিও লেজি লোডিং কর্মক্ষমতা অনুসারে একটি দুর্দান্ত কাজ করে, UX দৃষ্টিকোণ থেকে সমস্যাটির দিকে তাকালে আমরা দেখতে পাচ্ছি যে ব্যবহারকারী ছবিটি লোড হওয়ার জন্য অপেক্ষা করছে এবং ফাঁকা স্থানটি দেখছে। ধীর ইন্টারনেট  সংযোগে, ছবিগুলি ডাউনলোড করতে বয়স লাগতে পারে৷ এখানেই প্রগতিশীল চিত্রগুলি খেলায় আসে।