কম্পিউটার টিউটোরিয়াল

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

ইমেজ একটি সượngসর ওয়েবসাইটের সবচেয়ে গুরুত্বপূর্ণ এলিমেন্টের একটি। এগুলো ভিজিটারর অটেনশন আকর্ষণ করে, আপনার কন্টেন্ট আরও শেয়ারযোগ্য করে, এবং আপনার ইউজারদের একশন নেওয়ায় বাধ্য করে (যেন আপনার প্রোডাক্ট কেনা)।

তবে, হাই রেজোলিউশন ইমেজ বা বড় ফাইল সাইজের ইমেজ যোগ করলে আপনার ওয়েবসাইট স্লো হয়ে যেতে পারে এবং এন্ড ইউজারের জন্য খারাপ ইউজার এক্সপেরিয়েন্স দিতে পারে। প্লেথোরা টুল আছে যা আপনার ইমেজ কম্প্রেস করতে সাহায্য করবে বিনা যেকোনো لاحظযোগ্য কোয়ালিটি লসের এবং প্রসেসটি অটোমেট করবেও — তাই খারাপ ইউজার এক্সপেরিয়েন্স দেয়ার কোনো এক্সকিউজ নেই।

এই আর্টিকেলে আমি আপনাকে অনেক উপায় দেখাব ইমেজ ওয়েবের জন্য অপ্টিমাইজ করার এবং আরও স্পেসিফিক্যালি ওয়ার্ডপ্রেস ওয়েবসাইটের জন্য।

সঠিক ফাইল ফরম্যাট বেছে নিন (Pick the right file format)

JPEG এবং PNG ওয়েবে দুটি সবচেয়ে জনপ্রিয় ইমেজ ফাইল ফরম্যাট। JPEG একটি কমপ্রেসড ফরম্যাট যা সাধারণত ফটোর জন্য ব্যবহৃত হয় যেগুলো অনেক রঙ ধারণ করে, যখন PNG টেক্সটের সাথে ফটো, 일러스트্রেশন, লোগো, স্ক্রিনশট এবং ট্রান্সপারেন্ট ইমেজের জন্য খুব ভালো। আরেকটি কমন ফরম্যাট হলো GIF যা কম রঙ বা বড় এলাকা একই রঙ থাকা ইমেজের জন্য সেরা। GIF আজকাল ওয়েবে मुख্য アニメইটেড ইমেজের জন্য ব্যবহৃত হয়।

অধিকাংশ ইমেজ এডিটিং সফটওয়্যার আপনাকে অনেক ফরম্যাটে ফাইল সেভ করতে দেয়। সঠিক ফরম্যাট বেছে নিলে আপনি mümkনতম শার্প ইমেজ পাবেন যা আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স বাড়াবে।

সঠিক সাইজ এবং রেজোলিউশন ব্যবহার করুন (Use the right size and resolution)

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

আপলোড করার আগে ইমেজ কমপ্রেস করুন (Compress your images before uploading)

অনেক টুল আছে যা আপলোড করার আগে আপনার ইমেজ কমপ্রেস করতে সাহায্য করবে। ফটোশপে উদাহরণস্বরূপ একটি হ্যান্ডি "Save for Web & devices" ফিচার আছে যা আপনাকে ফরম্যাট এবং কোয়ালিটি সেটিংস বেছে নেওয়া দেবে। আপনি ফাইল সাইজও দেখতে পাবেন নির্দিষ্ট সেটিং অ্যাপ্লাই করলে। GIMP-এর মতো অন্যান্য ইমেজ ম্যানিপুলেশন টুলগুলোও একই ধরনের অপশন দেয়।

অনলাইন কমপ্রেশন টুলও আছে, যেন Picresize, Kraken.io এবং TinyPNG, যেখানে আপনি আপনার হাই রেজোলিউশন ইমেজ আপলোড করুন, অপ্টিমাইজ করুন, এবং ওয়েবের জন্য কমপ্রেসড ফরম্যাট ডাউনলোড করুন।

আপলোড করার পর ইমেজ কমপ্রেস করুন (Compress images after uploading)

এই উদ্দেশ্যে বেশ কিছু প্লাগইন আছে, এবং আরও জনপ্রিয়তম একটি হলো WP Smush যা JPEG, PNG বা GIF ফরম্যাট আলাদা আলাদা বা বাল্কে ডেডিকেটেড সার্ভার ব্যবহার করে অপ্টিমাইজ করতে সাহায্য করে। এটি সিম্পলি মেটাডেটা এবং অনইউজড কালার ফাইল থেকে বাদ দিয়ে ফাইল সাইজ কমায়। বিনামূল্য ভার্সনে আপনি ১MB নিচের ইমেজের জন্য সীমাবদ্ধ, কিন্তু প্রো ভার্সনে আপগ্রেড করলে ৫MB পর্যন্ত লিমিট বাড়ে।

EWWW Image Optimizer আরেকটি চমৎকার প্লাগইন একই ফাংশন সহ যা আপনার ইমেজকে সে ফরম্যাটে কনভার্ট করতে সাহায্য করে যা লোয়েস্ট পসিবল ফাইল সাইজ প্রোডিউস করে।

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

ইমেজ সঠিকভাবে ট্যাগ করুন (Tag your images properly)

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

যেখানে প্রয়োজন ক্যাপশন যোগ করা একটি আরেকটি চমৎকার উপায় আপনার ওয়েবসাইট ভিজিটরদের ইমেজ ভালো বুঝতে সাহায্য করার। সঠিক ডেসক্রিপ্টিভ টাইটেল ট্যাগ এবং ইমেজ ফাইলনেম একইভাবে সাহায্য করে। তাই আপনার ইমেজ "FXSCSUYE.jpg" রূপে সেভ করার বদলে, আপনার টপিক ও ওয়েবসাইটের সাথে রিলেভ্যান্ট কিওয়ার্ডসহ ডেসক্রিপ্টিভ টাইটেল ও নাম ব্যবহার করুন। এটি SEO দৃষ্টিকোণ থেকে ও ভালো।

লেজি-লোডিং (Lazy-Loading)

লেজি লোডিং একটি টেকনিক যা অনেক ওয়েবসাইট ব্যবহার করে ব্যান্ডউইথ বাঁচাতে শুধু তখন ইমেজ লোড করে যখন ইউজার স্ক্রোল করে ইমেজের ভিউ-ফ্রেমে আসে। প্রথম কয়েকটি ইমেজ অবিলম্বে লোড হয়, কিন্তু বাকিগুলো অপেক্ষা করে যতক্ষণ না ইউজার ইমেজের أسপাসে আসে। এই ফিচার আপনার ওয়েবসাইটে যোগ করলে আপনার এবং আপনার ইউজার উভয়ের ব্যান্ডউইথ বাঁচাবে এবং আপনার ওয়েবপেজের স্পিড বাড়াবে। BJ Lazy Load একটি চমৎকার প্লাগইন যা আপনার ওয়ার্ডপ্রেস ওয়েবসাইটে লেজি লোডিং যোগ করবে।

কন্টেন্ট ডেলিভারি নেটওয়ার্ক ব্যবহার করুন (Use a Content Delivery Network)

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

MaxCDN একটি হাইরেটেড CDN যা আপনি ট্রাই করতে পারেন, এবং অন্যান্য আছে যেন CloudFlare, CDN.net এবং আরও।

শেষ কথা (Bottom Line)

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

  1. আপনার iPhone X মাস্টার করার ৯টি অপরিহার্য টিপস

  2. প্রতিটি ফটোগ্রাফার যেগুলো মাস্টার করা উচিত: প্রো ফটোশপ টেকনিক

  3. উইন্ডোজের জন্য সেরা ১০ ইমেজ কমপ্রেশন টুল – দ্রুত, নিরাপদ ও সহজ

  4. প্রতিটি মার্কেটারের জানা দরকার টপ ৫টি প্রমাণিত ASO কৌশল