ওয়েবসাইট ইমেজ চেক
ওয়েবসাইট ইমেজ অপ্টিমাইজ করুন: প্রকাশের আগে পৃষ্ঠা পরীক্ষা করুন
এই গাইড ব্যবহার করে দেখুন ব্রাউজার আসলে কী লোড করে, প্রতিটি ইমেজের সঠিক মাপ নির্বাচন করুন, HTML ঠিক করুন এবং প্রকাশের আগে পৃষ্ঠা পরীক্ষা করুন।
দ্রুত উত্তর
অন্য ফাইল এক্সপোর্টের আগে লাইভ পৃষ্ঠা পরীক্ষা করুন
সবচেয়ে দ্রুত ইমেজ সমাধান প্রায়ই নতুন কনভার্টার নয়। প্রথমে ভারী অনুরোধ, অনুপস্থিত মাপ, লেজি লোডেড LCP ইমেজ বা পুরানো ফাইল নির্দেশকারী মেটাডেটা খুঁজুন। পৃষ্ঠা থেকে শুরু করুন, তারপর শুধুমাত্র পরিবর্তনীয় অংশ এক্সপোর্ট করুন।
প্রথমে পরীক্ষা করুন
ব্রাউজার যা ডাউনলোড করে তা থেকে শুরু করুন
ডিজাইন ফাইল ও মিডিয়া ফোল্ডার ব্যবহারকারীরা আসলে যা পায় তা দেখায় না। ব্রাউজার দেখায় কোন ইমেজ URL লোড হয়, কত বড় দেখায়, পৃষ্ঠা স্থান সংরক্ষণ করে কিনা, এবং বড় ফাইল ছোট ফাইলের পরিবর্তে ব্যবহৃত হচ্ছে কিনা।
কোন URL লোড হয়?
পৃষ্ঠা খুলুন এবং আসল ইমেজ URL, ট্রান্সফার সাইজ, প্রদর্শিত সাইজ এবং ব্রাউজার প্রত্যাশিত সংস্করণ নির্বাচন করেছে কিনা লিখে রাখুন।
ইমেজের আকার কত বড়?
সোর্স ফাইল থেকে অনুমান না করে দৃশ্যমান এলাকা পরিমাপ করুন। কার্ড, কন্টেন্ট কলাম এবং সামাজিক ইমেজ এক্সপোর্ট ভাগ করবেন না।
এটি কি প্রথম স্ক্রিনে আছে?
সম্ভাব্য LCP ইমেজ খুঁজুন, ভুলবশত লেজি লোডিং এড়ান, এবং কম গুরুত্বপূর্ণ ইমেজ প্রথম লোড থেকে দূরে রাখুন।
মেটাডেটা মিলছে কি?
অল্ট টেক্সট, Open Graph ইমেজ, JSON-LD ইমেজ, নিকটবর্তী টেক্সট এবং ফাইল নাম পরীক্ষা করুন যাতে পৃষ্ঠা একটি স্পষ্ট গল্প বলে।
ইমেজ পরিকল্পনা
রূপান্তরের আগে প্রতিটি গুরুত্বপূর্ণ ইমেজ পরিকল্পনা করুন
একটি ইমেজ পরিকল্পনা এই গাইডকে কনভার্টার আর্টিকেল থেকে আলাদা রাখে। এটি প্রতিটি ইমেজ এলাকার প্রয়োজনীয়তা যেমন: মাপ, লোডিং অর্ডার, ফ্যালব্যাক, মেটাডেটার ভূমিকা এবং চূড়ান্ত চেক নির্ধারণ করে যা প্রমাণ করে পৃষ্ঠা সঠিক ফাইল ব্যবহার করছে।
| ইমেজ এলাকা | সিদ্ধান্ত | ঝুঁকি | পরীক্ষা করুন |
|---|---|---|---|
| প্রধান ইমেজ | সম্ভাব্য LCP ইমেজ, সঠিক মাত্রা, লোডিং অর্ডার এবং ফ্যালব্যাক পথ নির্ধারণ করুন। | লেজি লোডিং বা বড় ফাইল প্রথম দরকারী ইমেজ দেরি করতে পারে। | প্রথম স্ক্রিনে প্রদর্শিত মাপ, অনুরোধের মাপ এবং লোডিং আচরণ তুলনা করুন। |
| আর্টিকেল বিষয়বস্তু ইমেজ | কন্টেন্ট-প্রস্থ সংস্করণ নির্ধারণ করুন এবং প্রস্থ ও উচ্চতা দিয়ে স্থান সংরক্ষণ করুন। | পৃষ্ঠা পড়ার কলামের চেয়ে অনেক বড় সোর্স ইমেজ লোড করতে পারে। | ডেস্কটপ ও মোবাইল প্রস্থ পরীক্ষা করুন এবং নির্বাচিত srcset যাচাই করুন। |
| পুনরাবৃত্ত কার্ড ইমেজ | তালিকা, হাব, সম্পর্কিত কার্ড এবং আর্কাইভ পৃষ্ঠার জন্য ছোট সংস্করণ তৈরি করুন। | একটি পুনরায় ব্যবহৃত আর্টিকেল ইমেজ তালিকা পৃষ্ঠায় অনেক ওজন যোগ করতে পারে। | তালিকা পৃষ্ঠা স্ক্যান করুন এবং নিশ্চিত করুন পুনরাবৃত্ত কার্ড পূর্ণ আর্টিকেল ইমেজ লোড করে না। |
| মেটাডেটা ইমেজ | Open Graph এবং JSON-LD ইমেজ পরিকল্পিত ফাইল হিসেবে প্রস্তুত করুন, এলোমেলো অবশিষ্টাংশ নয়। | অনুসন্ধান ও শেয়ারিং প্রিভিউতে পুরানো, ক্রপ করা বা অপ্রাসঙ্গিক ইমেজ দেখাতে পারে। | চূড়ান্ত URL-এর জন্য রেন্ডার করা মেটা ট্যাগ এবং স্ট্রাকচার্ড ডেটা পরীক্ষা করুন। |
পরিকল্পনা বললে ফাইলের নতুন সংস্করণ দরকার, পরবর্তী ধাপ বেছে নিতে ইমেজ রূপান্তর গাইড ব্যবহার করুন। সাধারণ WebP কাজের জন্য JPG থেকে WebP গাইড ব্যবহার করুন এবং AVIF গাইড বড় ছবি জন্য যেগুলো আরও সাশ্রয়ী হতে হবে।
ইমেজ মাপ
প্রতিটি ইমেজ এলাকার জন্য স্পষ্ট মাপ নির্ধারণ করুন
রেসপন্সিভ ইমেজ কাজ করে যখন HTML লেআউটের সাথে মেলে। এলাকা পরিমাপ করুন, কয়েকটি দরকারী প্রস্থ নির্বাচন করুন, অনুপাত সংরক্ষণ করুন, এবং বড় মূল ফাইল পাঠানো এড়িয়ে চলুন শুধুমাত্র কারণ এটি আছে।
সহজ পরীক্ষা: যদি ৩৬০ পিক্সেল কার্ড ২৪০০ পিক্সেল ফাইল ডাউনলোড করে, তবে কম্প্রেশন প্রধান সমস্যা নয়। পৃষ্ঠায় ছোট ইমেজ সংস্করণ দরকার বা HTML ভুল ফাইল নির্দেশ করছে।
লোডিং অর্ডার
প্রথম ইমেজ সচেতনভাবে লোড করুন
প্রথম স্ক্রিনের ইমেজের জন্য আলাদা নিয়ম প্রয়োজন যা পৃষ্ঠার নিচের ইমেজ থেকে ভিন্ন। সম্ভাব্য LCP ইমেজ খুঁজুন, ভুলবশত লেজি লোডিং এড়ান, এবং নিচের ইমেজগুলো প্রয়োজন না হওয়া পর্যন্ত শান্ত রাখুন।
- 1
LCP ইমেজের নাম দিন
যদি প্রথম গুরুত্বপূর্ণ ইমেজ Largest Contentful Paint হয়, ভুলবশত লেজি লোডিং করবেন না।
- 2
নিচের ইমেজগুলো শান্ত রাখুন
প্রথম ভিউপোর্টের নিচের ইমেজগুলো সাধারণত লেজি লোডিং ও অ্যাসিঙ্ক ডিকোডিং ব্যবহার করা উচিত।
- 3
CSS ব্যাকগ্রাউন্ড পরীক্ষা করুন
একটি ক্রপ করা ব্যাকগ্রাউন্ডও বড় ফাইল ডাউনলোড করতে পারে। দৃশ্যমান এলাকার জন্য সঠিক মাপের ফাইল ব্যবহার করুন।
- 4
পুনরাবৃত্ত অনুরোধ পরীক্ষা করুন
একই বড় ফাইল বারবার ব্যবহার করলে ছোট কার্ড ইমেজের ওজন বেড়ে যায়।
HTML
পরিমাপকৃত এলাকার জন্য রেসপন্সিভ HTML ব্যবহার করুন
গুরুত্বপূর্ণ ইমেজের জন্য ব্রাউজারের পছন্দ স্পষ্ট করুন। নিচের উদাহরণে প্রস্থ বিকল্প, মাপ, নির্দিষ্ট মাত্রা এবং ফ্যালব্যাক দেখানো হয়েছে। এলাকা অনুযায়ী লোডিং আচরণ পরিবর্তন করুন, অভ্যাস অনুযায়ী নয়।
<picture>
<source
type="image/avif"
srcset="/images/article/product-640.avif 640w,
/images/article/product-960.avif 960w,
/images/article/product-1280.avif 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/article/product-640.webp 640w,
/images/article/product-960.webp 960w,
/images/article/product-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/article/product-960.jpg"
alt="ড্যাশবোর্ড স্ক্রিনশট যা আপলোড প্রবাহ দেখায়"
width="960"
height="540"
loading="lazy"
decoding="async" />
</picture>অনুসন্ধান ও শেয়ারিং
ইমেজ, অল্ট টেক্সট এবং মেটাডেটা এক গল্প বলুক
ইমেজ SEO শুধু কীওয়ার্ড যোগ করা নয়। দৃশ্যমান ইমেজ, নিকটবর্তী টেক্সট, সহায়ক অল্ট টেক্সট, Open Graph ট্যাগ এবং JSON-LD ইমেজ লিঙ্ক একই পৃষ্ঠা স্পষ্টভাবে বর্ণনা করা উচিত। অলঙ্কারিক ইমেজ অলঙ্কারিক থাকুক।
চেক দুর্বল সামাজিক প্রিভিউ পেলে Open Graph ইমেজ গাইড ব্যবহার করুন। স্কিমা ও মেটা ট্যাগ সমস্যা হলে Blazor মেটাডেটা গাইড ব্যবহার করে JSON-LD ও পৃষ্ঠা মেটাডেটা সঙ্গতিপূর্ণ রাখুন।
ধাপসমূহ
প্রতিটি পৃষ্ঠার জন্য একটি সহজ ইমেজ চেক
- 1
বাস্তব পৃষ্ঠা খুলুন
বর্তমান URL থেকে শুরু করুন, অ্যাসেট ফোল্ডার থেকে নয়। আসল লোড হওয়া ইমেজগুলো নথিভুক্ত করুন।
- 2
ইমেজ পরিকল্পনা তৈরি করুন
প্রতিটি গুরুত্বপূর্ণ ইমেজের জন্য লক্ষ্য প্রস্থ, অনুপাত, লোডিং অর্ডার, ফ্যালব্যাক এবং মেটাডেটার ভূমিকা লিখে রাখুন।
- 3
শুধুমাত্র পরিবর্তিত অংশ রূপান্তর করুন
পুরো মিডিয়া ফোল্ডার পুনরায় এক্সপোর্ট না করে শুধুমাত্র চেক করা ফাইলের জন্য রূপান্তর সরঞ্জাম ব্যবহার করুন।
- 4
HTML ও মেটাডেটা আপডেট করুন
srcset, মাপ, মাত্রা, Open Graph এবং JSON-LD ইমেজ লিঙ্ক প্রস্তুত ফাইল নির্দেশ করুন।
- 5
ব্রাউজার আউটপুট যাচাই করুন
পৃষ্ঠা, নেটওয়ার্ক অনুরোধ, সামাজিক মেটাডেটা, স্ট্রাকচার্ড ডেটা এবং মোবাইল লেআউট পরীক্ষা করুন।
- 6
পরেরবারের জন্য নিয়ম রাখুন
ইমেজ সংক্রান্ত সিদ্ধান্ত নথিভুক্ত করুন যাতে ভবিষ্যতে আপডেট অনুমানের উপর নির্ভর না করে।
টুল টিপ
কোন ফাইল রূপান্তর করতে হবে জানলে PixelPress ব্যবহার করুন
চেক দেখালে ফোল্ডারে নতুন WebP বা AVIF ফাইল দরকার, PixelPress স্থানীয়ভাবে রূপান্তর করতে পারে। মূল ফাইল অপরিবর্তিত থাকে এবং আউটপুট ফোল্ডার পর্যালোচনার জন্য সহজ।
চেকলিস্ট
প্রকাশের আগে ইমেজ চেকলিস্ট
একটি আর্টিকেল, ল্যান্ডিং পৃষ্ঠা বা পণ্য পৃষ্ঠা লাইভ হওয়ার আগে এই তালিকা ব্যবহার করুন। এটি রূপান্তর একা ধরতে না পারা পৃষ্ঠা সমস্যা ধরবে।
প্রশ্নোত্তর