ওয়েবের জন্য ছবিগুলিকে কীভাবে অপ্টিমাইজ করবেন

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

যে ওয়েবসাইটটি লোড হতে 3 সেকেন্ডের বেশি সময় নেয় সেগুলি ব্যবহারকারীদের ব্যস্ততা হারাতে থাকে এবং Google র‍্যাঙ্কিং কম থাকে৷ তাই, যদি আপনার ওয়েবসাইটে ভিজিটরের অভাব হয়, তাহলে ভালো Google র‍্যাঙ্কিং আপনাকে ইমেজ অপ্টিমাইজ করতে হবে এবং নিচে ব্যাখ্যা করা কিছু টিপস অনুসরণ করতে হবে:

ইমেজ অপ্টিমাইজেশান সম্পর্কে জানার আগে আসুন জেনে নিই ইমেজ অপ্টিমাইজেশান কি এবং কেন ইমেজ অপ্টিমাইজেশান গুরুত্বপূর্ণ৷

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

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

ইমেজ অপ্টিমাইজেশন কেন গুরুত্বপূর্ণ?

ব্যবহারকারীরা এমন ওয়েবসাইট পরিত্যাগ করে যা লোড হতে 3 সেকেন্ডের বেশি সময় নেয়, এইভাবে বাউন্স রেট বৃদ্ধি পায় যা অবশেষে ওয়েবসাইটগুলির রূপান্তর হারকে প্রভাবিত করে। কিন্তু ইমেজ অপ্টিমাইজেশানের মাধ্যমে পৃষ্ঠা লোডের গতি বাড়ানো যায়, ওয়েবসাইটের এসইও র‌্যাঙ্কিং উন্নত করা যেতে পারে ব্যবহারকারীদের অভিজ্ঞতা বাড়ানো যেতে পারে।

পৃষ্ঠা লোড গতি একটি ওয়েব পৃষ্ঠা সম্পূর্ণরূপে লোড হতে সময় নেয়। 2 সেকেন্ডের কম লোড টাইম সহ একটি ওয়েবসাইট সবচেয়ে বেশি পরিদর্শন করা হয় এবং পছন্দ করা হয়। এইভাবে, ওয়েবসাইট র‌্যাঙ্কিং এবং ইমেজ অপ্টিমাইজেশানকে গুরুত্বপূর্ণ করে তোলার ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে। শুধু এই ইমেজ অপ্টিমাইজেশানটিই নয় এসইও র‍্যাঙ্কিং এবং রূপান্তরের সাথেও সম্পর্কিত৷

ওয়েবের জন্য ইমেজ অপ্টিমাইজ করতে এবং পৃষ্ঠা দ্রুত লোড করার জন্য এখানে কিছু টিপস রয়েছে৷

1. সঠিক রঙের স্কিমে ছবি সংরক্ষণ করুন

প্রাথমিকভাবে, আরজিবি এবং সিএমওয়াইকে দুটি রঙের স্কিম যা কম্পিউটার দ্বারা ছবি প্রদর্শনের জন্য ব্যবহৃত হয়। যেখানে RGB মানে (লাল, সবুজ, নীল) এবং CMYK মানে সায়ান, ম্যাজেন্টা, হলুদ এবং কালো। RGB হল মানক রঙের স্থান যা ক্যামেরা, কম্পিউটার দ্বারা ব্যবহৃত হয় এবং CMYK মুদ্রণের জন্য ব্যবহৃত হয়।

অতএব, যদি CMYK ছবিগুলি ওয়েবে ব্যবহার করা হয় তবে সেগুলি পৃষ্ঠা লোডের গতি কমিয়ে দেয় এবং এছাড়াও, সেগুলি আরজিবির মতো উজ্জ্বল এবং প্রাণবন্ত নয়। তাই, ব্যবহারকারীদের আকৃষ্ট করতে এবং পেজ লোডের গতি বাড়াতে RGB কালার স্কিম ছবি ব্যবহার করতে হবে।

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

2. চিত্র ফাইলের আকার কম্প্রেস করুন

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

সাধারণত, 70-80% এর মধ্যে একটি ইমেজ কম্প্রেশন লেভেলের সাথে সংরক্ষিত একটি ছবি পিক্সেলেড হয় না। এর জন্য ইমেজ কম্প্রেশন টুল ব্যবহার করা যেতে পারে।

3. সঠিক ফাইল ফরম্যাটে ছবি সংরক্ষণ করুন

চারটি প্রধান ফাইল ফরম্যাট রয়েছে JPG, PNG, GIF এবং SVG যাতে গ্রাফিক্স এবং ছবি সংরক্ষণ করা যায়। কিন্তু প্রতিটি ফাইল ফরম্যাটের নিজস্ব সুবিধা এবং অসুবিধা রয়েছে। তাই, প্রতিটি গ্রাফিক বা ছবিকে রাস্টার বা ভেক্টরের উপর ভিত্তি করে একটি নির্দিষ্ট বিন্যাসে সংরক্ষণ করতে হবে।

রাস্টার ছবি সীমিত সংখ্যক পিক্সেল রয়েছে এবং স্ক্যানার বা ক্যামেরার মতো পিক্সেল-ভিত্তিক প্রোগ্রাম ব্যবহার করে ক্যাপচার করা যেতে পারে। যখন বড় করা রাস্টার ছবিগুলি গুণমান হারাতে থাকে এবং রাস্টার ছবির জন্য সবচেয়ে উপযুক্ত ফর্ম্যাটগুলি হল JPG, PNG এবং GIF৷

যখন ভেক্টর গ্রাফিক্স ভেক্টর সফ্টওয়্যার ব্যবহার করে তৈরি করা হয়েছে এবং এই চিত্রগুলি গুণমানের সাথে আপস না করে প্রসারিত করা যেতে পারে। ভেক্টর চিত্রগুলির জন্য সবচেয়ে উপযুক্ত বিন্যাস হল SVG এবং GIF। কিন্তু ভেক্টর ছবিগুলি JPG বা PNG ফর্ম্যাটেও সংরক্ষণ করা যেতে পারে। কিন্তু এটা করলে ইমেজ আপনার গ্রাফিককে অসীমভাবে স্কেল করার ক্ষমতা হারিয়ে ফেলে।

JPG

JPG এর যোগ্যতা

• নূন্যতম ফাইলের আকার
• সর্বোত্তম উচ্চ মানের ছবি
• ওয়েব এবং অন্যান্য আধুনিক ডিভাইসের সাথে সামঞ্জস্যপূর্ণ

JPG এর ক্ষতিকরতা

• সংকুচিত হলে ছবির গুণমান কমে যায়
• স্বচ্ছ ব্যাকগ্রাউন্ড সমর্থন করে না

যখন JPG ব্যবহার করবেন

উচ্চ মানের সঙ্গে নন-মুভিং ইমেজ প্রয়োজন হলে JPGs ব্যবহার করা যেতে পারে। তবে এগুলি রঙিন ব্যাকগ্রাউন্ডে ব্যবহার করা উচিত নয়।

PNG

JPG-এর চেয়ে বহুমুখী আরেকটি সাধারণ রাস্টার বিন্যাস হল PNG। এটি 16 মিলিয়নেরও বেশি রঙ, আলফা চ্যানেল বা একটি স্বচ্ছ ব্যাকগ্রাউন্ড সমর্থন করতে পারে৷

PNG এর গুণাবলী

• রঙিন ব্যাকগ্রাউন্ডে লেয়ার ইমেজগুলিতে স্বচ্ছ পটভূমি অফার করে
• গুণমান হারানো ছবিগুলিকে সংকুচিত করা যেতে পারে

PNG এর ক্ষতিকরতা

• ছবির ফাইলের আকার JPG থেকে বড়
• অ্যানিমেশন সমর্থন করে না

কখন PNG ব্যবহার করা উচিত

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

GIF

GIF আরেকটি রাস্টার ফর্ম্যাট যা গতি তৈরি করতে একে অপরের উপরে ছবিগুলিকে সিকোয়েন্স করে চলমান ছবিগুলি পেতে দেয়।

GIF এর গুণাবলী

• অ্যানিমেটেড বার্তা এবং ছবি তৈরি করতে পারে
• স্বচ্ছ ব্যাকগ্রাউন্ড সমর্থন করে

GIF এর ক্ষতি

• ছবির ফাইলের আকার এবং গুণমান রঙের সাথে সংযুক্ত। আরও রঙের অর্থ তীক্ষ্ণ চিত্র, তবে এটি ফাইলের আকার বাড়ায়। যদিও কম রং ছবিকে দানাদার করে তুলবে
• মাত্র 256টি রঙের ছবি ব্যবহার করা যেতে পারে

কখন GIF ব্যবহার করা উচিত

GIF একই গ্রাফিকে স্থিতিস্থাপকতা এবং আকর্ষণীয় পরিবর্তন সহ একাধিক চিত্র প্রদর্শন করতে দেয়। যাইহোক, অনেক রঙের গ্রাফিক্স ফাইলের আকার বাড়ায়।

SVG৷

JPG, PNG, GIF এর বিপরীতে, SVG হল একটি ভেক্টর ফর্ম্যাট। এটি ওয়েবে তীক্ষ্ণ গ্রাফিক্সের সাহায্যে অবজেক্ট ম্যানিপুলেট করতে দেয়। ইঙ্কস্কেপ, অ্যাডোব ইলাস্ট্রেটর এবং স্কেচ ভেক্টর ইমেজগুলির মতো প্রোগ্রামগুলি ব্যবহার করে সম্পাদনা এবং তৈরি করা যেতে পারে৷

SVG এর যোগ্যতা

• ছোট ফাইলের আকার
• ফাইলের মান হারাতে না দিয়ে আকার পরিবর্তন করা যেতে পারে
• ডেভেলপারদের জন্য সহায়ক
• অ্যাডোবি ইলাস্ট্রেটরের মতো প্রোগ্রাম ভেক্টর ছবি সম্পাদনা করতে ব্যবহার করা যেতে পারে
• অ্যানিমেশনের অনুমতি দেয়
• গ্রাফিক্সের জন্য Microsoft Office দ্বারা সমর্থিত

SVG এর ক্ষতি

• ছবির ফাইলের আকার এবং গুণমান রঙের সাথে সংযুক্ত। আরও রং মানে তীক্ষ্ণ ছবি কিন্তু বড় ইমেজ ফাইল সাইজ। কম রং ছবিকে দানাদার করে তুলবে
• মাত্র 256টি রঙের সাথে ইমেজ ব্যবহার করার সীমাবদ্ধতা

কখন SVG ব্যবহার করা উচিত

যেহেতু SVG ছবিগুলিকে ছবির গুণমান না হারিয়ে জুম করা যায় সেগুলি ওয়েবে গ্রাফিক্স, লোগো, আইকন এবং অন্যান্য চিত্রের জন্য ব্যবহার করা যেতে পারে৷ এছাড়াও এই ছবিগুলি মোবাইল ডিভাইসের জন্য ব্যবহার করা যেতে পারে কারণ তারা স্মার্টফোনের মতো উচ্চ পিক্সেল ঘনত্বের ডিসপ্লেতে দুর্দান্ত দেখায়৷

4. স্মার্টফোন প্রদর্শনের জন্য একাধিক মাপ রপ্তানি করুন

স্মার্টফোন জনপ্রিয় হওয়ার সাথে সাথে ব্যবহারকারীরা তাদের মোবাইল ডিভাইসে সবকিছু অ্যাক্সেস করতে চায়। কিন্তু যেহেতু এই ডিভাইসগুলিতে সাধারণ 72 পিপিআই-এর বিপরীতে 200-এর বেশি পিপিআই-এর ডিসপ্লে রয়েছে যা PC এবং ওয়েবের জন্য আদর্শ।

ছবি সাপোর্ট করার জন্য PPI Adobe Illustrator এবং Photoshop উভয় ধরনের ব্যবহার করা যেতে পারে। এটি 2X এবং 3X স্কেল সহ ছবি রপ্তানি করতে সাহায্য করবে। এর মানে 200% এবং 300% সহ আসল ছবি তৈরি করা হবে। এছাড়াও, উচ্চতর রেজোলিউশনের ছবি রপ্তানি করা যেতে পারে৷

5. 115% দ্বারা ছোট ছবির আকার বাড়ান

যদি ছোট আকারের রাস্টার ছবিগুলি ব্যবহার করা হয়, তবে পিক্সেলেশন কমাতে সেগুলিকে 115% আপসাইজ করতে হবে এই Adobe Photoshop ব্যবহার করা যেতে পারে৷

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

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