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

ছবি একটি শালীন ওয়েবসাইটের সবচেয়ে গুরুত্বপূর্ণ উপাদান এক. তারা দর্শকদের মনোযোগ আকর্ষণ করে, আপনার সামগ্রীকে আরও ভাগ করার যোগ্য করে এবং আপনার ব্যবহারকারীদের পদক্ষেপ নিতে বাধ্য করে (যেমন আপনার পণ্যগুলি কিনুন)।

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

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

সঠিক ফাইল বিন্যাস চয়ন করুন

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

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

সঠিক আকার এবং রেজোলিউশন ব্যবহার করুন

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

আপলোড করার আগে আপনার ছবি কম্প্রেস করুন

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

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

আপলোড করার পর ছবি কম্প্রেস করুন

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

অনুরূপ ফাংশন সহ আরেকটি দুর্দান্ত প্লাগইন হল EWWW ইমেজ অপ্টিমাইজার যা আপনাকে আপনার ছবিগুলিকে বিন্যাসে রূপান্তর করতে সাহায্য করতে পারে যা সর্বনিম্ন সম্ভাব্য ফাইলের আকার তৈরি করে৷

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

আপনার ছবি ঠিকভাবে ট্যাগ করুন

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

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

অলস-লোড হচ্ছে

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

একটি সামগ্রী বিতরণ নেটওয়ার্ক ব্যবহার করুন

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

MaxCDN হল একটি উচ্চ-রেটেড CDN যা আপনি চেষ্টা করতে পারেন, এবং আরও আছে যেমন CloudFlare, CDN.net এবং আরও অনেক কিছু৷

নীচের লাইন

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