TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

পেজ লোডিং স্পিড উন্নত করার জন্য ওয়ার্ডপ্রেসে ছবিগুলি অপ্টিমাইজ করার 7 টি উপায়

4

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

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

আমি কিভাবে ছবি অপ্টিমাইজেশান সমস্যাগুলি জানতে পারি?

এটি খুব সহজ এবং পেজ লোডিং স্পীড চেক করার জন্য প্রচুর ফ্রি টুলস আছে। লোডিং স্পিডকে প্রভাবিত করে পৃষ্ঠায় সমস্যাগুলি পরিমাপ করার জন্য গুগলের একটি ডেডিকেটেড পেজস্পিড ইনসাইটস টুল রয়েছে । নীচের মত ফলাফল দেখতে টুলে আপনার পৃষ্ঠার URL লিখুন:

পেজ লোডিং স্পিড উন্নত করার জন্য ওয়ার্ডপ্রেসে ছবিগুলি অপ্টিমাইজ করার 7 টি উপায়

গুগল পেজস্পিড ইনসাইটে ছবিগুলি অপ্টিমাইজ করুন

আপনার ছবিগুলি সংকুচিত না হলে আপনাকে "অগ্রাধিকার চিত্র" দেখতে হবে। গুগল পেজস্পিড ইনসাইটস টুলে আপনি যে প্রধান সমস্যাগুলি দেখতে পাবেন তার মধ্যে ইমেজ কম্প্রেশন অন্যতম। তবে নীচের মতো পিংডম এবং জিটিমেট্রিক্সের মতো সরঞ্জামগুলি ব্যবহার করার সময় আপনি আরও অনেক সমস্যা খুঁজে পেতে পারেন ।

  • হোস্টনাম জুড়ে ডাউনলোড সমান্তরাল করুন
  • কুকি কম ডোমেন থেকে স্ট্যাটিক সামগ্রী পরিবেশন করুন
  • ছবির মাত্রা নির্দিষ্ট করুন
  • স্কেল করা ছবি পরিবেশন করুন

এই সমস্ত সমস্যাগুলি প্লাগইন দিয়ে এবং সহজ নির্দেশিকা অনুসরণ করে সহজেই সমাধান করা যেতে পারে।

কিভাবে পেজ লোডিং স্পিড উন্নত করতে ওয়ার্ডপ্রেসে ইমেজ অপটিমাইজ করা যায়?

পৃষ্ঠা লোডিং গতি উন্নত করার জন্য অপ্টিমাইজেশন কৌশলগুলির সারাংশ এখানে:

  1. সার্ভারে ছবির সংখ্যা হ্রাস করুন
  2. আকার সংরক্ষণ করতে ছবিগুলি সংকুচিত করতে প্লাগইন ব্যবহার করুন
  3. সাবডোমেন থেকে ছবি পরিবেশন করুন
  4. সঠিক ছবির আকার ব্যবহার করুন
  5. এইচটিএমএল / সিএসএস এর মধ্যে আকার পরিবর্তন করা এড়িয়ে চলুন
  6. যেখানেই সম্ভব ভেক্টর আইকন ব্যবহার করুন
  7. উপযুক্ত ছবির বিন্যাস নির্বাচন করুন

1 ছবির সংখ্যা হ্রাস করুন

একটি পৃষ্ঠার প্রতিটি একক ছবি আপনার সার্ভারে আলাদা HTTP অনুরোধ পাঠাবে এবং ডাউনলোড করতে সময় নেবে। "একটি ছবি হাজার শব্দের মূল্য" প্রবাদটি ভাল লাগতে পারে কিন্তু বাস্তবে প্রয়োজন হলেই ছবি ব্যবহার করুন। কম ইমেজ মানে কম সংখ্যক সার্ভার অনুরোধ এবং দ্রুত লোড করা পৃষ্ঠা।

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

2 আকার সংরক্ষণ করতে ছবিগুলি সংকুচিত করুন

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

ছবি দুটি পদ্ধতিতে সংকুচিত করা যায় – ক্ষতিগ্রস্ত এবং ক্ষতিহীন। সহজ কথায়, ক্ষতিগ্রস্ত সংকোচন একটি অপরিবর্তনীয় উপায় এবং ছবি থেকে কিছু পিক্সেল ডেটা সরিয়ে দেয়। এবং ক্ষতিহীন সংকোচন হল একটি বিপরীতমুখী উপায় যা পিক্সেল অপসারণ ছাড়াই চিত্রকে সংকুচিত করে। ইমেজ ফরম্যাট (PNG / JPEG / GIF), গুণমান এবং প্রয়োজনীয় সংকোচনের উপর ভিত্তি করে, আপনার জন্য কী কাজ করে তা দেখতে আপনাকে বিভিন্ন প্লাগইন দিয়ে চেষ্টা করতে হতে পারে।

যদি আপনার কিছু ওয়েবপৃষ্ঠা বা অপ্টিমাইজ করার জন্য কয়েকটি ছবি থাকে তবে আমরা ইমেজ কম্প্রেশন টুলগুলির মাধ্যমে এটি সম্পন্ন করার পরামর্শ দিই। নিচে কিছু ইমেজ কম্প্রেশন টুল ব্যবহার করা যাবে:

  • gifsicle – GIF ইমেজ তৈরি এবং অপ্টিমাইজ করার জন্য
  • optipng – PNG ইমেজ সাইজ কমাতে লসলেস কম্প্রেশন ব্যবহার করুন
  • pngquant – PNG ছবির আকার কমাতে ক্ষতিকারক কম্প্রেশন ব্যবহার করুন
  • jpegtran – JPEG ইমেজ কম্প্রেস করুন

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

পেজ লোডিং স্পিড উন্নত করার জন্য ওয়ার্ডপ্রেসে ছবিগুলি অপ্টিমাইজ করার 7 টি উপায়

WP Smush ওয়ার্ডপ্রেস প্লাগইন

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

3 সাবডোমেন থেকে ছবি পরিবেশন করুন

আলাদা সাবডোমেইনে ছবি হোস্ট করার পরামর্শ দেওয়া হয়। এটি মূল ডোমেইন থেকে বিষয়বস্তুর সমান্তরালে ছবি লোড করতে সাহায্য করবে। আপনার পৃষ্ঠার বিষয়বস্তু দ্রুত লোড হবে কারণ ছবিগুলি বিভিন্ন স্থান থেকে লোড করা হয়েছে।

পেজ লোডিং স্পিড উন্নত করার জন্য ওয়ার্ডপ্রেসে ছবিগুলি অপ্টিমাইজ করার 7 টি উপায়

বিভিন্ন সার্ভার থেকে সামগ্রী পরিবেশন করা

কিভাবে ওয়ার্ডপ্রেস ইমেজ ফোল্ডারকে সাবডোমেনে সরানো যায় সে সম্পর্কে আমাদের নিবন্ধটি দেখুন ।

4 সঠিক ছবির আকার ব্যবহার করুন

ঠিক কিভাবে আকারে এটি সাইটে প্রদর্শিত হবে তার সাথে ছবিগুলি প্রস্তুত করুন। যখন আপনার 600 × 350 চিত্রের প্রয়োজন হয়, তখন 1200 × 700 আকার প্রস্তুত করবেন না। আকারের কারণে বড় ইমেজ ফাইল ডাউনলোড করতে ব্রাউজারের দীর্ঘ সময় প্রয়োজন। WP-Smushit প্লাগইনটিতে আপলোড করা ছবিগুলির জন্য সর্বাধিক আকার নির্ধারণ করার বিকল্প রয়েছে। এটি আপলোড করা ছবিগুলিকে সর্বাধিক আকারের সীমাতে পরিবর্তন করতে এবং চিত্রের আকার হ্রাস করতে সহায়তা করবে।

এইচটিএমএল / সিএসএস এর মধ্যে আকার পরিবর্তন করা এড়িয়ে চলুন

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

উদাহরণস্বরূপ, 90 × 90 পিক্সেল ছবি আপলোড করা এবং নীচের এইচটিএমএল কোড দিয়ে আকার কমানোর চেষ্টা করা ভাল অভ্যাস নয়।

<img src="your image URL" height=45 width=45>

6 ভেক্টর আইকন ব্যবহার করুন

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

আমি ফন্ট আইকন, ছবির পরিবর্তে আমাকে ব্যবহার করুন।

SVG চিত্র এবং অন্যান্য বিষয়বস্তুর ফাইলের আকার কমাতে সার্ভার লিভারে GZIP কম্প্রেশন সক্ষম করা নিশ্চিত করুন ।

7 উপযুক্ত ইমেজ ফরম্যাট নির্বাচন করুন

তিনটি সার্বজনীন সমর্থিত ইমেজ ফরম্যাট আছে – GIF, PNG এবং JPEG। প্রত্যেকেরই তার একটি সুবিধা এবং অসুবিধা রয়েছে।

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

প্রয়োজনীয় চিত্র বিন্যাস চয়ন করুন এবং ব্যবহারকারীদের পরিবেশন করার আগে প্লাগইন দিয়ে এটি সংকুচিত করুন।

উপসংহার

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

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত