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

কোন কোডিং দক্ষতা ছাড়াই আপনার ওয়ার্ডপ্রেস ওয়েবসাইটের কর্মক্ষমতা উন্নত করার একটি সহজ উপায় হল ছবি অপ্টিমাইজ করা! এই সেশনটিতে, আমরা এই বিষয়ে কথা বলব:

• ছবি অপ্টিমাইজেশন কি এবং কেন এটি আমাদের প্রয়োজন
• কিভাবে আপনি আপনার ছবিগুলো অপ্টিমাইজ করতে পারেন
• টিপস, পদ্ধতি সমূহ এবং টুলসগুলো

শেখার ফলাফল

১. ছবি অপ্টিমাইজ করার সুবিধাগুলো চিহ্নিত করুন। 
২. ফাইলের নাম এডিট করুন এবং বিকল্প লেখা যুক্ত করা।
৩. সঠিক ছবির ধরণ পছন্দ করা।
৪. বিভিন্ন পদ্ধতি ব্যবহার করে ছবি অপ্টিমাইজ করা।

সম্পূরক প্রশ্ন

১. আপনার ওয়েবসাইটের ছবি অপ্টিমাইজ করার জন্যে কতগুলো ভিন্ন ভিন্ন উপায় রয়েছে?
২. মিডিয়া লাইব্রেরিতে ছবি যুক্ত করার পূর্বে ফাইলের নাম পরিবর্তন করা এত গুরুত্বপূর্ণ কেনো?

ট্রান্সক্রিপ্ট

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

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

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

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

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

মিডিয়া লাইব্রেরিতে ছবি এডিট কিভাবে করবো সেদিকে দেখার আগে, আসুন আমরা সেটিংস এবং মিডিয়াতে ক্লিক করি। এটি মনে রাখবেন যে, যখন আপনি মিডিয়া লাইব্রেরিতে আপলোড করবেন ওয়ার্ডপ্রেস তখন একটি ছবির চার ধরণের আকার জমা রাখে। আসল ছবিটির আকার ঠিক থাকবে এবং এর নিচে তালিকাবুক্ত বাকি তিনটির আকার সর্বোচ্চ নির্ধারিত আকারকে অতিক্রম করবে না। এবং আমি এটি দেখাবো আপনাকে যখন আমি আমার তৈরি করা একটি পৃষ্ঠায় যাবো। আমি একটি ছবিই তিনবার আপলোড করেছি ওয়ার্ডপ্রেসের নির্ধারিত আকারগুলো দিয়ে: থাম্বনেইল, মধ্যম আকার, বৃহদাকার, এবং আপনি যদি সাইডবার সেটিংসের ছবির আকারে ক্লিক করেন তাহলে দেখতে পাবেন, সেখানে চার নাম্বার একটি উপায় রয়েছে; পূর্ণ আকার।

এখন যদি আমরা এই ছবিটি অপ্টিমাইজ করতে চাই তাহলে আমাদের মিডিয়া লাইব্রেরিতে যেতে হবে। ছবিটি বের করতে হবে। প্রথমত, আপনি খেয়াল করবেন ছবিটি জেপিজি ধরণের, এবং দ্বিতীয়ত আমি ইতিমধ্যে বিকল্প লেখা যুক্ত করে দিয়েছি। তারপর আমরা এটি দেখতে পাচ্ছি যে ফাইলের আকার ৪৩২ কিলোবাইটস এবং ডাইমেনশনগুলো হচ্ছে ২৫৬০ বাই ১৭০৮ পিক্সেল। ছবিটি এডিত করতে, নিম্নোক্ত এডিট ইমেজে ক্লিক করতে হবে এবং এখন আমরা উপরের ডান পাশের ছবিতে যেয়ে স্কেল করতে পারি। যখন আপনি নতুন মাত্রাগুলো যুক্ত করে দিবেন তখন স্কেলে ক্লিক করবেন। এখন যদি আমরা ছবির বিবরণিতে ফেরত যাই তাহলে দেখতে পারবো ফাইলের আকার কমে গেছে, ডাইমেনশন কমে গেছে এবং আমাদের নির্ধারিত নতুন ডাইমেনশন প্রদর্শিত হচ্ছে। আমরা যদি এডিট ছবিতে ফিরে যাই এবং আমরা আমাদের করা পরিবর্তনগুলো নিয়ে খুশি না থাকি, তাহলে আমরা পুনরায় আসল ছবিটি নিয়ে আসতে পারবো এবং এটি আমরা যা পরিবর্তন করেছিলাম সব মুছে দিবে।

আরেকটি উপায় হচ্ছে ছবিটিকে ছোট করে ফেলা এবং যখন আমরা ছোট করে ফেলবো এবং জমা করবো তখন আমরা খেয়াল করলে দেখতে পাবো যে ফাইলের আকার এবং মাত্রাগুলো আপডেট হয়েছে। দ্বিতীয়ত, আপনি একটি ওয়ার্ডপ্রেস প্লাগইন ব্যবহার করতে চাইবেন যেটি আপনার হয়ে সব কাজ করে দিবে। একটি প্লাগইন যুক্ত করতে, চলুন প্লাগইনগুলোতে যাওয়া যাক। নতুন যুক্ত করুনে ক্লিক করুন, এবং তারপর অনুসন্ধান ব্লকে লিখুন ইমেজ অপ্টিমাইজেশন। এখন আপনি খেয়াল করবেন যে, সেখানে পছন্দ করার মত অনেকগুলো ভিন্ন ধরণের প্লাগইন রয়েছে। কিছু প্লাগইন খুঁজে দেখলে ভালো হবে যেমন Imagify, Image Optimization এবং Lazy Load by Optimole, Smush অথবা EWWW Image Optimizer.

আমি সামনে এগিয়ে যাই, EWWW Image Optimizer প্লাগইনটি ইনষ্টল করি এবং এক্টিভেট করে ইনষ্টল করার পর, আমরা সেটিংসে যেতে পারি। আপনার সাইটের জন্যে স্পিড আপ নির্বাচন করুন, এবং সেক্ষেত্রে আমি ফ্রি মোডটাই চালু রাখবো। তারপর সেখানে রেকমেন্ডেড সেটিংস ও রয়েছে। প্রথমটি, মেটাডাটা মুছে ফেলা। এটি ছবি সম্পর্কে অতিরিক্ত তথ্যগুলো মুছে দিবে এবং লেজি লোড খুবই মজার একটি জিনিস, এটি শুধুমাত্র যেই সেকশনটি দেখা হচ্ছে সেটিই লোড করবে এবং বাকী রিসোর্সগুলোকে দরকার পড়া না পর্যন্ত সমস্যা তৈরি করতে দিবে না। এবং যখন আপনি প্রস্তুত, সেইভ সেটিংসে ক্লিক করে শেষ করুন। এখন আমরা মিডিয়া লাইব্রেরিতে ফিরে যেতে পারি এবং লিস্ট ভিউয়ে ক্লিক করতে পারি। এখানে আপনি প্লাগইন ইনষ্টল করার আগে আপলোড করা ছবিগুলো একটা করে অপ্টিমাইজ করতে পারবেন অথবা যদি সবগুলো একত্রে অপ্টিমাইজ করতে চান এক ক্লিকে সেটিও করতে পারবেন একইসাথে, এই উপায় ও রয়েছে। কিন্তু খেয়াল রাখবেন, একদম উপরে এটি বলছে যে একত্রে সবগুলো ছবি অপ্টিমাইজ করতে গেলে আপনার আসল ছবিগুলোর মধ্য পরিবর্তন আসবে এবং এটি আগের অবস্থায় নেওয়া যাবে না। সামনে আগানোর পূর্বে নিশ্চিত হয়ে নিন আপনি ছবিগুলোর ব্যাকআপ করে নিয়েছেন। কিন্তু আপনি প্লাগইন ইনষ্টল করার পরে কোনো ছবি আপলোড করলে কি ঘটবে? চলুন একটি নতুন ছবি যুক্ত করা যাক এবং যখন ছবিটি আপলোড করা হয়ে যাবে খেয়াল করে দেখেবেন যে কিছু না করেই ছবিটি অপ্টিমাইজ এবং ছোট করা হয়ে গেছে। তো সঠিক প্লাগইনটি আপনার হয়ে ছবিগুলো অপ্টিমাইজ করে দিবে।

পরবর্তীতে চলুন এখন কিছু ওয়েব ভিত্তিক টুলস ঘেঁটে দেখা যাক যেগুলো দিয়ে আপনার ওয়ার্ডপ্রেস সাইটে আপলোড করার আগেই আপনি ছবি অপ্টিমাইজ করতে পারবেন। কিছু উপায় রয়েছে বিবেচনা করার মত যেমন tinypng.com, tiny-img.com, kraken.io এবং squoosh.app. আসুন এখন দেখি কিভাবে tinypng.com কাজ করে। আপনার কম্পিউটার থেকে ছবিটি আপলোড করুন এবং যখন আপলোড করা এবং ছোট করা হয়ে যাবে। তখন আপনি দেখবেন যে ফাইলের সাইজ প্রায় ৫৯% কমে গেছে।

পরিশেষে, আপনার কাছে থাকা আরো উপায়গুলোর মধ্যে রয়েছে ছবি এডিটর ব্যবহার করা যেমন এডোব ফটোশপ, গিম্প এবং প্রিভিউ যেটি ম্যাক ওএসের জন্যে বানানো হয়েছে। আপনি হয়তো জিজ্ঞেস করতে পারেন ওয়ার্ডপ্রেসে ব্যবহার করার জন্যে ছবির সবচেয়ে ভালো সাইজ কোনটি। তবে, এটি নির্ভর করে আপনি কিভাবে সেই ছবিটি ব্যবহার করবেন। হেডার ছবির জন্যে ভালো সাইজ হচ্ছে ১২০০ বাই ৬২৮ পিক্সেল। অন্যান্য ছবিগুলোর জন্যে, সবচেয়ে ভালো উপায় হচ্ছে কমপক্ষে ৬৪০ বাই ৪৮০ এবং ১০২৪ বাই ৭৬৮ পিক্সেলের মধ্যে রাখা। আমি মনে করি, এই তথ্যগুলো আপনাকে সাহায্য করবে এবং আপনি আপনার জন্য যেটা কাজ করে সেই সঠিক উপায়টি খুঁজে পাবেন। আরো টিউটোরিয়াল এবং শেখার ম্যাটেরিয়ালের জন্যে লার্ন ওয়ার্ডপ্রেস ঘুরে দেখুন।