ভালো ওয়েব পারফরম্যান্সের জন্য ছবি অপ্টিমাইজ করার 6 উপায়

ভালো ওয়েব পারফরম্যান্সের জন্য ছবি অপ্টিমাইজ করার 6 উপায়
Rick Davis

মানুষ দৃশ্যমান প্রাণী, এবং গবেষণা সেই সত্যকে সমর্থন করে। মাত্র তিন দিন পর, পাঠ্য ধরে রাখার হার মাত্র 10%-20% এর মধ্যে থাকে। কিন্তু ছবির জন্য, ধরে রাখার হার 65% পর্যন্ত হতে পারে। মস্তিষ্ক 90% চাক্ষুষ তথ্য গ্রহণ করে এবং এটি 60,000 গুণ দ্রুত প্রক্রিয়া করে। নিঃসন্দেহে, ভিজ্যুয়ালগুলি ওয়েবসাইট জড়িত হওয়ার ক্ষেত্রে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে৷

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

আমাদের নিবন্ধটি 2021 সালে আরও ভাল ওয়েব পারফরম্যান্সের জন্য ছবিগুলিকে অপ্টিমাইজ করার ছয়টি ভিন্ন উপায় দেখাবে।

আরও ভাল ওয়েব পারফরম্যান্সের জন্য ইমেজ অপ্টিমাইজেশন টিপস

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

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

আসুন আপনার কিছু পরীক্ষা করে দেখিবিকল্প।

দেমাক দক্ষিণা দ্বারা বিপণন প্রচারাভিযানের চিত্র

1. একটি ইমেজ অপ্টিমাইজেশান অডিট দিয়ে শুরু করুন

একটি ইমেজ অপ্টিমাইজেশান অডিট আপনাকে কোথায় উন্নতি করতে হবে তার জন্য প্রাসঙ্গিক তথ্য প্রদান করবে।

আপনার সাইটে আপনার থাকা ইমেজগুলির একটি ইনভেন্টরি নিয়ে শুরু করুন। প্রাসঙ্গিক পরীক্ষাগুলি আপনাকে সমাধান করতে হবে এমন কোনও সমস্যা নির্ণয় করবে।

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

2. ছবির জন্য সঠিক ফরম্যাট বেছে নিন

ইমেজ ফাইলগুলো বিভিন্ন ফরম্যাটে আসে। ওয়েব অ্যাপ্লিকেশনের জন্য এই তিনটি সবচেয়ে সাধারণ ধরনের ইমেজ ফরম্যাট যা আপনাকে জানতে হবে:

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

আন্দ্রেয়াস স্টর্মের আইকনগুলি সংরক্ষণ করুন

3. ইমেজ রিসাইজ করুন এবং কম্প্রেস করুন

আপনি হয়তো লক্ষ্য করেছেন যে ছবিগুলো একটু একটু করে লোড হচ্ছে। আপনি সম্পূর্ণ চিত্র দেখতে পেতে আগে কিছু সময় অতিবাহিত হবে; একটি চিহ্ন যে ছবি সম্ভবত খুব ভারী. আকার পরিবর্তন বা সংকুচিত করা সমস্যাটির যত্ন নেবে।

অনুগ্রহ করে মনে রাখবেন যে আপনি কোন ছবি অপ্টিমাইজ করার আগে আপলোড করবেন না। এবং সর্বোত্তম মানের জন্য, ফাইলগুলিকে 1 থেকে 2 MB এর মধ্যে হতে লক্ষ্য করুন৷

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

ছবি কম্প্রেস করা ফাইলের আকার কমাতে সাহায্য করে। আপনি যদি এটি খুব বেশি সংকুচিত করেন তবে আপনি ছবিটিকে বিকৃত করতে পারেন। আপনি ছবির মান ধরে রাখতে চাইলে কম কম্প্রেশন আদর্শ হতে পারে; যাইহোক, এটি উল্লেখযোগ্যভাবে আকার হ্রাস করে না।

সংকোচনের প্রকারগুলি

দুটি ধারণা রয়েছে যা আমরা ইতিমধ্যে উপরে উল্লেখ করেছি, ক্ষতিহীন বনাম ক্ষতিকর কম্প্রেশন।

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

সঠিক ছবি সম্পাদক আপনাকে কোনটি নির্ধারণ করতে সহায়তা করবেকম্প্রেশন আপনার জন্য সবচেয়ে ভালো কাজ করে।

4. মোবাইল-ফার্স্ট ইমেজ অপ্টিমাইজেশান

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

আরো দেখুন: গ্রাফিক ডিজাইনের নিয়ম যা ভাঙার জন্য তৈরি করা হয়

যদি ব্যবহারকারীরা মোবাইল ডিভাইস ব্যবহার করার সময় একটি ভাল UX এর সাথে জড়িত না থাকে, তাহলে আপনি সেগুলি হারাবেন৷

মোবাইল-প্রথমে ছবিগুলিকে অপ্টিমাইজ করার কথা বিবেচনা করুন৷ এটি ছোট পর্দায় ভাল দেখায়, এটি একটি ডেস্কটপ বা ল্যাপটপে চমত্কার দেখাবে।

অ্যাবি_কেরিমোভ দ্বারা এএসও অপ্টিমাইজেশান

5. ফাইলের নাম এবং এসইওতে তাদের প্রভাব

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

আপনার ওয়েবসাইটে যেমন আছে ছবি আপলোড করা সার্চ ইঞ্জিনগুলিকে মোটেও সাহায্য করবে না৷

প্রতিটি ছবিতে বর্ণনামূলক লেবেল বরাদ্দ করে ওয়েব ক্রলারদের জন্য আপনাকে খুঁজে পাওয়া সহজ করে তুলুন৷ প্রাসঙ্গিক কীওয়ার্ড অন্তর্ভুক্ত করুন যা আপনার ব্যবসা বা সাইট সম্পর্কে তথ্য দেয়।

6. অলস লোডিং ব্যবহার করার কথা বিবেচনা করুন

ছবির অলস লোডিং ঠিক নাম অনুসারেই। পরিবর্তেএকযোগে পুরো ইমেজ লোড হচ্ছে, এটা এক ধরনের unfolds. অনলাইন ভিজিটররা পৃষ্ঠার নিচে স্ক্রোল করলে ছবিটি লোড হতে থাকে।

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

লোড হচ্ছে... ডোনা

চূড়ান্ত চিন্তা

ওয়েব পারফরম্যান্স একটি গুরুত্বপূর্ণ র‌্যাঙ্কিং ফ্যাক্টর যা সার্চ ইঞ্জিন ব্যবহার করে। পৃষ্ঠা লোড করার গতি কম হলে Google আপনার সাইটকে শাস্তি দেবে।

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

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

আরো দেখুন: ভিজ্যুয়াল প্রেজেন্টেশন তৈরি করার জন্য একটি নন-ডিজাইনার গাইড



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