ওয়েব ইমেজ অপ্টিমাইজেশন মাস্টার করুন: স্পীড ও ইউজার এনগেজমেন্ট বাড়ান

একটি ছবি হাজার শব্দের মূল্য বহন করে কারণ এটি অধিক বার্তা संপ্রेषণ করতে পারে। এই ডিজিটাল জগতে প্রায় ৬৪% ওয়েবসাইট হোক সেটি মিডিয়া, ই-কমার্স বা ট্রাভেল ওয়েবসাইট, সবেই ইমেজ ব্যবহার করে। আমরা মানুষ দৃষ্টিমূলক প্রাণী এবং মানুষের মস্তিষ্কের একটি বড় অংশ ছবি প্রসেস করতে নিযুক্ত। আজকের ওয়েবসাইটগুলো এই সুপরিচিত সত্যটি ব্যবহার করে ইউজার আকর্ষণ করতে চায়। কিন্তু অপরিচ্ছদ এবং লো-কোয়ালিটি ইমেজওয়ালা ওয়েবসাইটগুলো সত্যিকারের প্রভাবে ফেলে না।

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

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

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

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

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

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

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

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

১. সঠিক কালার স্কিমে ইমেজ সেভ করুন

প্রাথমিকভাবে, কম্পিউটার ছবি প্রদর্শনের জন্য RGB এবং CMYK - দুটি কালার স্কিম ব্যবহার করে। RGB মানে (Red, Green, Blue) এবং CMYK মানে Cyan, Magenta, Yellow এবং Black। RGB ক্যামেরা, কম্পিউটার ব্যবহৃত স্ট্যান্ডার্ড কালার স্পেস এবং CMYK প্রিন্টিংয়ের জন্য ব্যবহৃত হয়।

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

CMYK ইমেজকে RGB-তে কনভার্ট করতে অ্যাডোব ফটোশপ ব্যবহার করা যায়। কালার প্রোফাইল পরিবর্তন হলে ফাইলটি অন্য নাম দিয়ে রি-সেভ করুন যাতে দুটি ফাইল আলাদা করা সহজ হয়।

২. ইমেজ ফাইল সাইজ কমপ্রেস করুন

২MB (২০৪৮ কিলোবাইট) এর বেশি বড় ওয়েব ফাইল ব্যবহার করা উচিত নয় কারণ এটিও পেজ লোড স্পীড ধীর করে। তাই সাইজ ২MB-র মধ্যে রাখা ভালো আইডিয়া। এছাড়া ওয়েবসাইটের জন্য ব্যবহৃত ইমেজ পিক্সেলেটেড (pixelated) হওয়া উচিত নয়। অর্থাৎ ইমেজ শার্প হতে হবে এবং ইমেজ কোয়ালিটি কনসিস্টেন্ট থাকতে হবে। ইমেজ কোয়ালিটি কমপ্রেশন সেটিংস এবং ফাইনাল ফাইল সাইজের ওপর নির্ভর করে। সঠিক কমপ্রেশন সেটিংস দিয়ে ছোট ফাইল সাইজ এবং ভালো ইমেজ কোয়ালিটি অর্জন করা যায়।

সাধারণত, ৭০-৮০% কমপ্রেশন লেভেলে সেভ করা ইমেজ পিক্সেলেটেড হয় না। এর জন্য ইমেজ কমপ্রেশন টুল ব্যবহার করা যায়।

৩. সঠিক ফাইল ফরম্যাটে ইমেজ সেভ করুন

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

Raster Images limité পিক্সেল دارা গঠিত এবং স্ক্যানার বা ক্যামেরার মতো পিক্সেল-ভিত্তিক প্রোগ্রাম দিয়ে ক্যাপচার করা হয়। বড় করলে রাস্টার ইমেজ কোয়ালিটি হারিয়ে ফেলে। রাস্টার ইমেজের জন্য সেরা ফরম্যাট: JPG, PNG, GIF।

Vector graphics ভেক্টর সফটওয়্যার দিয়ে তৈরি হয় এবং এই ইমেজগুলো কোয়ালিটি হ্রাস ছাড়া বড় করা যায়। ভেক্টর ইমেজের জন্য সেরা ফরম্যাট: SVG এবং GIF। কিন্তু ভেক্টর ইমেজ JPG বা PNG-তে সেভ করা যায়, তবে তখন ইমেজ অসীম স্কেল করার ক্ষমতা হারিয়ে ফেলে।

JPG

JPG-এর সুবিধা:

• ন্যূনতম ফাইল সাইজ
• সেরা হাই-কোয়ালিটি ইমেজ
• ওয়েব এবং অন্যান্য আধুনিক ডিভাইসের সাথে কম্প্যাটিবল

JPG-এর অসুবিধা:

• কমপ্রেস করলে ইমেজ কোয়ালিটি হ্রাস পায়
• ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড সাপোর্ট করে না

JPG কবে ব্যবহার করবেন: হাই-কোয়ালিটি স্ট্যাটিক (non-moving) ইমেজ দরকার হলে JPG ব্যবহার করুন। কিন্তু রঙিন ব্যাকগ্রাউন্ডে ব্যবহার করবেন না।

PNG

JPG-এর চেয়ে বেশি ভারসেটাইল অন্য একটি সাধারণ রাস্টার ফরম্যাট হলো PNG। এটি ১৬ মিলিয়ন এর বেশি রং, আলফা চ্যানেল বা ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড সাপোর্ট করে।

PNG-এর সুবিধা:

• রঙিন ব্যাকগ্রাউন্ডে লেয়ার করার জন্য ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড অফার করে
• কোয়ালিটি হ্রাস ছাড়া ইমেজ কমপ্রেস করা যায়

PNG-এর অসুবিধা:

• JPG-এর চেয়ে ফাইল সাইজ বড়
• অ্যানিমেশন সাপোর্ট করে না

PNG কবে ব্যবহার করবেন: নন-হোয়াইট ব্যাকগ্রাউন্ড, টেক্সট, শার্প এজ, লোগো, আইকন এবং অন্যান্য ডিজাইনের জন্য PNG গ্রাফিক্স ব্যবহার করুন।

GIF

GIF আরেকটি রাস্টার ফরম্যাট যা ইমেজ সিকোয়েন্স করে মোশন বা চলমান ছবি তৈরি করতে দেয়।

GIF-এর সুবিধা:

• অ্যানিমেটেড মেসেজ এবং ইমেজ তৈরি করা যায়
• ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড সাপোর্ট করে

GIF-এর অসুবিধা:

• ফাইল সাইজ এবং কোয়ালিটি রংয়ের সাথে জড়িত। বেশি রং মানে শার্পার ইমেজ কিন্তু ফাইল সাইজ বেড়ে। কম রং মানে গ্রেইনি (grainy) ইমেজ।
• শুধু ২৫৬ রংয়ালা ইমেজ ব্যবহার করা যায়

GIF কবে ব্যবহার করবেন: একই গ্রাফিক্সে ইলাস্টিসিটি এবং আকর্ষণীয় পরিবর্তন সহ একাধিক ইমেজ প্রদর্শনের জন্য GIF ব্যবহার করুন। তবে বেশি রংয়ালা গ্রাফিক্স ফাইল সাইজ বেড়ায়।

SVG

JPG, PNG, GIF-এর ভিন্ন, SVG একটি ভেক্টর ফরম্যাট। এটি ওয়েবে শার্প গ্রাফিক্স সহ অবজেক্ট ম্যানিপুলেট করতে দেয়। Inkscape, Adobe Illustrator, Sketch-এর মতো প্রোগ্রাম দিয়ে ভেক্টর ইমেজ এডিট ও তৈরি করা যায়।

SVG-এর সুবিধা:

• ছোট ফাইল সাইজ
• কোয়ালিটি হ্রাস ছাড়া ফাইল রিসাইজ করা যায়
• ডেভেলপারদের জন্য সহায়ক
• Adobe Illustrator দিয়ে ভেক্টর ইমেজ এডিট করা যায়
• অ্যানিমেশন সাপোর্ট করে
• Microsoft Office গ্রাফিক্সের জন্য সাপোর্ট করে

SVG-এর অসুবিধা:

• ইমেজ ফাইল সাইজ এবং কোয়ালিটি রংয়ের সাথে জড়িত (GIF-এর মতো)
• শুধু ২৫৬ রংয়ালা ইমেজ ব্যবহারের সীমাবদ্ধতা

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

৪. স্মার্টফোন ডিসপ্লে জন্য একাধিক সাইজ এক্সপোর্ট করুন

স্মার্টফোন পপুলার হলে ব্যবহারকারীরা সব কিছু মোবাইল ডিভাইসে অ্যাক্সেস করতে চায়। কিন্তু এই ডিভাইসগুলোর ডিসপ্লে ২০০+ PPI (Pixels Per Inch) রয়েছে, যাক पीসি এবং ওয়েবের স্ট্যান্ডার্ড ৭২ PPI।

উভয় টাইপের PPI সাপোর্ট করার জন্য Adobe Illustrator এবং Photoshop ব্যবহার করা যায়। এটি ২X এবং ৩X স্কেলে ইমেজ এক্সপোর্ট করতে সাহায্য করে। অর্থাৎ আসল ইমেজের পাশাপাশি ২০০% এবং ৩০০% স্কেলও তৈরি হবে। উচ্চ রেজোলিউশনেও ইমেজ এক্সপোর্ট করা যায়।

৫. ছোট ইমেজের সাইজ ১১৫% বাড়ান

যদি ছোট সাইজের রাস্টার ইমেজ ব্যবহার করা হয়, তবে পিক্সেলেশন কমানোর জন্য সেটিকে ১১৫% আপসাইজ (upsize) করতে হবে, এর জন্য Adobe Photoshop ব্যবহার করা যায়।

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

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