ওয়েবসাইটের জন্য ছবি অপ্টিমাইজ করার উপায়: ফরম্যাট, সাইজিং, এবং ডেলিভারি

কেন ওয়েবসাইট ছবি অপ্টিমাইজেশন জরুরি

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

এই কারণেই ছবি অপ্টিমাইজেশনে একটি সিস্টেম দরকার, এলোমেলো সমাধান নয়। ফরম্যাট, সাইজিং, ডেলিভারি এবং প্রকাশনা প্রক্রিয়ার জন্য স্পষ্ট পরিকল্পনা থাকা জরুরি।

সাধারণত কোন ওয়েবসাইট ছবি প্রয়োজন

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

ফরম্যাট: কাজের জন্য সঠিক ফাইল টাইপ নির্বাচন করুন

সেরা ফরম্যাট নির্ভর করে ছবির ভূমিকার উপর। অধিকাংশ সাইটে একাধিক ফরম্যাট দরকার, একটাই সর্বজনীন নয়।

প্রতিদিনের কাজে WebP ব্যবহার করুন এবং AVIF রাখুন ছোট ফটোগ্রাফিক ছবির জন্য যেখানে সর্বোচ্চ সঞ্চয় গুরুত্বপূর্ণ।

দৈনন্দিন WebP ব্যবহারের জন্য পড়ুন JPG থেকে WebP ওয়ার্কফ্লো গাইড । নির্বাচিত হিরো-ছবি কম্প্রেশনের জন্য ব্যবহার করুন JPEG থেকে AVIF গাইড .

সাইজিং: রেসপন্সিভ ছবি, মাত্রা, এবং লেআউট স্থিতিশীলতা

ধীরগতির ওয়েবসাইটে শুধু ফরম্যাট সমস্যা থাকে না। তারা প্রায়ই প্রতিটি স্ক্রিন সাইজে বড় ছবি পাঠায়। রেসপন্সিভ সাইজিং এটি ঠিক করে।

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

ডেলিভারি মার্কআপ উদাহরণ

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

<picture>
  <source
    type="image/avif"
    srcset="/images/articles/hero-640.avif 640w,
            /images/articles/hero-1024.avif 1024w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/articles/hero-640.webp 640w,
            /images/articles/hero-1024.webp 1024w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/articles/hero-1024.jpg"
    alt="Product dashboard preview"
    width="1024"
    height="576"
    loading="lazy"
    decoding="async" />
</picture>

ডেলিভারি অগ্রাধিকার: লেজি লোডিং, LCP, এবং কোর ওয়েব ভিটালস

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

প্রসঙ্গ: ফাইলনেম, অল্ট টেক্সট, এবং আশেপাশের লেখা

ছবি অপ্টিমাইজেশন শুধু ডেটার ব্যাপার নয়। সার্চ ইঞ্জিন ও ব্যবহারকারীর ছবির প্রসঙ্গ ও পেজে থাকার কারণ জানা দরকার।

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

মেটাডেটা: কেন Open Graph ও JSON-LD ছবি গুরুত্বপূর্ণ

একটি পেজ ব্রাউজারে ঠিক দেখালেও মেটাডেটা ছবি না থাকলে আবিষ্কারে দুর্বল হয়। এটি সহজে ঠিক করার যোগ্য গুণগত ত্রুটি।

আপনি যদি Blazor দিয়ে তৈরি করছেন, তাহলে এই গাইডটি এর সাথে ব্যবহার করুন Blazor মেটাডেটা কম্পোনেন্ট গাইড যাতে পেজের শিরোনাম, বিবরণ, canonical লিঙ্ক, Open Graph ছবি এবং স্ট্রাকচার্ড ডেটা সব একসাথে সঙ্গতিপূর্ণ থাকে।

ওয়ার্কফ্লো: ওয়েবসাইট ছবির জন্য সুশৃঙ্খল প্রক্রিয়া

1. রপ্তানি করার আগে ছবির ভূমিকা নির্ধারণ করুন: হিরো, ইনলাইন, কার্ড, ওপেন গ্রাফ, বা স্কিমা ছবি।
2. কাজের জন্য ফরম্যাট বাছুন: দৈনন্দিন কাজে WebP, নির্বাচিত ভারী ছবির জন্য AVIF, ভেক্টরের জন্য SVG, এবং লসলেস স্বচ্ছতার জন্য PNG।
3. একটি বড় মূল ছবি বারবার পাঠানোর বদলে লেআউট অনুযায়ী সঠিক সাইজ রপ্তানি করুন।
4. ডেলিভারি অগ্রাধিকার নির্ধারণ করুন যাতে হিরো ছবি অগ্রাধিকার সম্পদ হিসেবে কাজ করে এবং সেকেন্ডারি ছবি কার্যকর থাকে।
5. প্রকাশের আগে মেটাডেটা ছবি, অল্ট টেক্সট, এবং ফাইলনেম পরীক্ষা করুন।

যদি আপনি সেই ওয়ার্কফ্লোর জন্য টুল নির্বাচন করেন, তাহলে ওয়েবের জন্য সেরা ইমেজ রূপান্তরকারী গাইড স্থানীয় বনাম অনলাইন সিদ্ধান্ত কভার করে।

ওয়েবসাইট ছবি অপ্টিমাইজেশন চেকলিস্ট

সাধারণ প্রশ্নাবলী

সম্পর্কিত সম্পদ