ব্লগ সাইটের জন্য ইমেজ অপটিমাইজেশন

সাইটে ইমেজ ব্যবহারের নিয়ম ও Image Optimization

এখানে যা থাকছে---

• ওয়েব সাইটের জন্য ইমেজ ব্যবহারের নিয়ম
• ব্লগারে ইমেজ অপটিমাইজেশন
• সাইটের জন্য ইমেজ অপটিমাইজেশনের উপায়
• সাইটে ইমেজ ব্যবহারের নিয়ম
• Image optimization

ইমেজ অপটিমাইজেশনের নিয়ম

ওয়েব সাইট বা ব্লগ সাইটকে সুন্দর করে সাজাতে ইমেজ বা ছবির ব্যবহার খুবি গুরুত্বপূর্ণ। পিক বা ইমেজ সাইটের আর্টিকেল কে প্রাণবন্ত করে তোলে। Wordpress সাইটে নানা উপায় ও টুলস এর সাহায্যে ইমেজ অপটিমাইজেশন করা যায় কিন্তু Blogger বা Blogspot ব্লগে ইমেজ অপটিমাইজেশনের সু্যোগ কম থাকায় নানা উপায় ও অনলাইন টুলস ব্যবহার করে ইমেজ অপটিমাইজেশন করার প্রয়োজনীয়তা দেখা দেয়। ব্লগারদের সুবিধার্থে আমাদের আজকের আলোচনা ওয়েবসাইট বা ব্লগ সাইটের জন্য ইমেজ বা ছবি অপটিমাইজেশন করার প্রয়োজনীয়তা ও ইমেজ অপটিমাইজেশন করার বিভিন্ন উপায় ও পদ্ধতি নিয়ে।

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

ইমেজ অপটিমাইজেশন (Image Optimization) বলতে ইমেজ বা ছবিকে কম্প্রেশন (Compression) করা বোঝানো হয়ে থাকে। ইংরেজি Compression অর্থ সংকোচন বা সংক্ষেপন করা। অর্থাৎ ওয়েবসাইট বা ব্লগ সাইট কে SEO ফ্রেন্ডলি করতে ইমেজ বা ছবির আকার, আকৃতি, সাইজ ও কোয়ালিটির যে পরিবর্তন করা হয় বা কমিয়ে আনা হয় তাকে ইমেজ অপ্টিমাইজেশান বা ইমেজ অপটিমাইজেশন বলে।

ব্লগ সাইটের জন্য ইমেজ অপটিমাইজেশনের প্রয়োজনীয়তাঃ

সাইটের SEO (Search Engine Optimization) একটি গুরুত্বপূর্ণ বিষয়। SEO বলতে ভিজিটর সহায়ক ও সার্চইঞ্জিন সহায়ক পরিবেশ কে বোঝানো হয়ে থাকে। আমরা মোবাইলে বা ক্যামেরা দিয়ে যখন ছবি তুলি তখন খেয়াল করলে দেখতে পাবো সে গুলো খুবি বড় বড় সাইজ বা মেগাবাইটের। ওয়েবসাইট কে এসইও (SEO) ফ্রেন্ডলি করার অন্যতম শর্ত ব্রাউজারে সাইটের পেজ কে দ্রুত লোড দেওয়া। কিন্তু বড় মাপের বা বেশি কিলোবাইটের ছবি লোড নিতে বেশি সময় নেয়। ইমেজ বা ছবি লোড নিতে দেরি হওয়ায় ওয়েব পেজ ব্রাউজারে দেরিতে লোড নিতে পারে। ফলে ভিজিটরেরা বিরক্ত হয়ে সাইট থেকে বের হয়ে যায়। যা সাইটের SEO এর জন্য মারাত্মক সমস্যা। তাই সাটের জন্য ব্যবহৃত ছবি বা ইমেজ কম কিলোবাইটের হওয়া উচিত যাতে তা দ্রুত ব্রাউজারে লোড নেয়। শুধু ছবির কিলোবাইট বা সাইজ কম করলে হবে না ছবির রেজুলেশন সঠিক মাপে থাকা উচিত। সঠিক রেজুলেশন এবং কম কিলোবাইট হওয়ার সাথে সাথে ছবি বা ইমেজের মাণ সঠিক রাখাও অন্যতম আরেকটি চ্যালেঞ্জ। কোনো ছবি বা ইমেজের সাইজ কমিয়ে ফেলা হলে অনেক সময় ছবি বা ইমেজ খারাপ মানসম্পন্ন হয়ে পড়ে। কিন্তু সঠিক পরিমাপ ও কম সাইজের ছবি তৈরি করার ফলে তা যদি দেখতে সুন্দর না হয় তবে তা ভিজিটরদের উপর বিরূপ প্রভাব ফেলে। এ সকল সমস্যার কারণে কোনো ইমেজ বা ছবি সাইটে ব্যবহারের জন্য অপটিমাইজেশন করার প্রয়োজন পড়ে।

বাইনারি যোগ বিয়োগ- ক্লিক >> মৌলিক সংখ্যা কি বিস্তারিত- ক্লিক >> সংখ্যা পদ্ধতির A2Z- ক্লিক >> ভার্চুয়াল রিয়েলিটি কি - ক্লিক >> Domain Hosting কি বিস্তারিত - ক্লিক >>

সাইটে ছবি বা ইমেজ ব্যবহারের নিয়মঃ

সাইটে ছবি বা ইমেজ ব্যবহারের জন্য নিম্নোক্ত নিয়ম গুলো অনুসরণ করা যেতে পারে-

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

সাইটের জন্য ইমেজ অপটিমাইজেশনের উপায় বা পদ্ধতি সমুহঃ

নানারকম অফলাইন ও অনলাইন এপ (Allocation) বা সাইটের সহযোগীতা নিয়ে খুব সহজেই ইমেজ অপটিমাইজেশন করা যায়। নিম্নে সে গুলো সম্পর্কে বিস্তারিত তুলে ধরা হল-

• ১. অনলাইন থেকে কপিরাইট মুক্ত ছবি ডাউনলোড করা- ইমেজ বা ছবি অপটিমাইজেশনের জন্য প্রথম শর্ত হল কপিরাইট মুক্ত ছবি ডাউনলোড করা অথবা এমন কোনো ছবি ব্যবহার করা যা কপিরাইট মুক্ত। অনলাইনে অনেক সাইট রয়েছে যেখানে কপিরাইট মুক্ত ছবি ডাউনলোড করার অনুমতি দেয়। Unsplash.com তেমনি একটি সাইট। ব্লগসাইটের যেখানে ছবি ব্যবহার করা হবে সেই কনটেন্ট বা লেখার সাথে মিলরেখে একটি ছবি সর্বপ্রথম এখান থেকে ডাউনলোড করে নেওয়া যেতে পারে।
• ২. ছবি বা ইমেজের রেজুলেশন ঠিক করা- কপিরাইট মুক্ত ছবি সংগ্রহ করার পর ২য় কাজ হল ছবির রেজুলেশন ঠিক করা। ওয়েবসাইট বা ওয়েব পেজের ওয়াইড বা প্রস্থের চেয়ে যদি ছবির রেজুলেশন বেশি হয় তবে তা ব্রাউজারে আনফিট দেখাবে। এছাড়া ফেসবুক, টুইটারের মত জনপ্রিয় সোশাল নেটওয়ার্কে সাইটের কনটেন্ট শেয়ার করতে হলে তা সঠিক মাপে হওয়া বাঞ্ছনীয়। সাধারণত ১৬:৯ মাপের ছবি ব্লগ সাইটের জন্য নির্বাচন করা যেতে পারে। রেজুলেশন ১২৮০*৭২০ এর মধ্যে থাকা ভালো। অনলাইনে অনেক টুলস আছে যেখান থেকে ছবির মাণ না কমিয়ে রেজুলেশন পরিবর্তন করা যায়। Picresize.com সাইটে ছবি আপলোড করে এখান থেকে ছবির রেজুলেশন ঠিক করে নেওয়া যেতে পারে। এছাড়া Picsart সফটওয়ার বা এপ ব্যবহার করেও ছবির রেজুলেশন ঠিক করে নেওয়া যায়।
• ৩. ইমেজ বা ছবির সাইজ কমিয়ে আনা- ইমেজ অপটিমাইজেশন এর ৩য় কাজ ছবির সাইজ কমিয়ে আনা। ১০০ কিলোবাইটের কম সাইজের ছবি ব্লগ বা সাইটে ব্যবহার করা উত্তম। সবচেয়ে ভালো হয় ২০ কিলোবাইটের চেয়ে কম রাখা। কিন্তু বড় মাপের বা বেশি কিলোবাইটের কোনো ছবিকে কমিয়ে সাইজ কম করে ফেললে ছবির মাণ খারাপ হয়ে যেতে পারে। তাই এমন কোনো উপায় ব্যবহার করতে হবে যার ফলে ছবির সাইজ কমবে কিন্তু মাণের তেমন কোনো পরিবর্তন হবে না। মাণ ঠিক রেখে ছবি বা ইমেজের সাইজ কমিয়ে আনতে অনলাইন ভিত্তিক টুলস ব্যবহার করা যেতে পারে। অনলাইন ভিত্তিক প্লাটফর্ম যেমন, Picresize এপের মাধ্যমে অথবা Picresize.com এই সাইটে প্রবেশ করে ইচ্ছামত ছবির সাইজ কমিয়ে আনা যেতে পারে। ছবির রেজুলেশন ঠিক করার সময় picresize.com সাইটে রেজুলেশন ঠিক করার পাশাপাশি এর সাইজ ঠিক করে নেওয়া যায়। ছবির সাইজ ২০ কিলোবাইট এর কম হওয়া উত্তম তবে ১০০ কিলোবাইটের কম রাখলেও সমস্যা নেই। অনলাইনে অসংখ্য সাইট আছে যারা বিনামূল্যে ছবি বা ইমেজের রেজুলেশন ও মাণ ঠিক করার পাশাপাশি ছবির সাইজ কমিয়ে দেয়।
• ৪. ছবি বা ইমেজের ফরমেট পরিবর্তন করা- ইমেজ বা ছবির রেজুলেশন এবং সাইজ ঠিক করার পর ৪র্থ কাজ হল ছবির ফরমেট ঠিক করা। আমরা মোবাইল বা ক্যামেরায় যে সকল ছবি তুলি তা সাধারণত jpg বা jpeg ফরমেটের। Jpg থেকে jpeg ফরমেট উত্তম। এছাড়া png ফরমেটেও রাখা যেতে পারে। তবে সবচেয়ে ভালো হয় ছবিকে webp ফরমেটে কনভার্ট করা। Webp প্রায় সকল ব্রাউজারে সাপোর্ট করে এবং এটি নেক্সট জেনারেশন ইমেজ ফর্মেট। ছবি বা ইমেজ কে webp ফর্মেটে পরিবর্তন করতে অনলাইন ফিত্তিক অনেক টুলস বা সাইট বা প্লাটফর্ম রয়েছে। Cloudconvert.com সাইটের মাধ্যমে মাণের পরিবর্তন ছাড়া ছবির ফর্মেট পরিবর্তন করে webp তে রুপান্তর করে নেওয়া যায়। অর্থাৎ yourpicname.jpg পরিবর্তন হয়ে yourpicname.webp হয়ে যায়। Webp আধুনিক ব্রাউজারে ছবির গুনগত মান ঠিক রাখতে সহায়তা করে।
• ৫. Lazy loading এক্সটেনশন এর ব্যবহার- ব্লগে HTML ইমেজ কোডে lazy loading এক্সটেনশন ব্যবহার করে সাইট লোডিং এর সময় কমিয়ে আনা যায়। Lazy loding হচ্ছে দেরিতে লোড নেওয়া। অর্থাৎ একটি ওয়েব পেজে অনেক গুলো ছবি অথবা বড় সাইজের কোনো ইমেজ ব্যবহার করা হলে পেজ লোড নিতে বেশি সময় নেয়। এই সমস্যা সমাধান করতে lazy loading এক্সটেনশন ব্যবহার করা হয়। এটি ব্যবহার করলে ওয়ব পেজের নিচে থাকা ছবি লোড নেওয়া বাদে ওয়েব পেজে থাকা অন্যান্য কনটেন্ট দ্রুত ব্রাউজারে লোড নেয়। প্রথম পর্যায়ে অন্যান্য কনটেন্ট দ্রুত লোড নেওয়ার পর সব শেষে ছবি লোড নেয়। ভিজিটর যখন পেজের নিচের দিকে ব্রাউজ করে তখন নিচের ছবি গুলো লোড নেয়। ফলে প্রয়োজন মত কন্টেন্ট ভিজিটর দেখতে পাওয়ায় কোনো প্রকার বিরক্তি ছাড়ায় ওয়েব পেজ ব্রাউজ করতে পারে। ইমেজ বা ছবিতে lazy loading এক্সটেনশন দিতে html img কোডে loading এক্সটেনশন যুক্ত করতে হয়। অর্থাৎ পেজের html কোডের img এর সাথে loading="lazy" যুক্ত করতে হয়। ছবি বা ইমেজের কোডটি তখন দাঁড়ায়, <img loading="lazy" src="এখানে ইমেজের লিংক থাকে" alt="এখানে ইমেজের কি ওয়ার্ড থাকে"/>। এভাবে ইমেজ অপটিমাইজেশনের মাধ্যমে সার্চইঞ্জিনে ভালো ইফেক্ট পরিলক্ষিত হয়। যা SEO সহায়ক একটি উপায়।

  

  ইমেজ লেজি লোডিং html কোড

  
  

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