প্লেসহোল্ডার ইমেজ জেনারেটর

কয়েক সেকেন্ডে একটি প্লেসহোল্ডার ইমেজ তৈরি করুন

এই প্লেসহোল্ডার ইমেজ জেনারেটর মকআপ, ওয়্যারফ্রেম, প্রোটোটাইপ এবং ফ্রন্ট-এন্ড ডেভেলপমেন্টের জন্য কাস্টম ডামি ইমেজ তৈরি করে — সম্পূর্ণভাবে আপনার ব্রাউজারেই। প্রস্থ ও উচ্চতা সেট করুন, একটি ব্যাকগ্রাউন্ড ও টেক্সট রঙ বেছে নিন, একটি ঐচ্ছিক লেবেল যোগ করুন, আর আপনি পেয়ে যাবেন একটি পরিচ্ছন্ন প্লেসহোল্ডার — ডাউনলোড করার বা সরাসরি আপনার কোডে পেস্ট করার জন্য প্রস্তুত।

যেসব হোস্টেড সার্ভিস সার্ভারে ইমেজ রেন্ডার করে (placehold.co, dummyimage.com, via.placeholder.com), তাদের বিপরীতে এখানে প্রতিটি ইমেজ স্থানীয়ভাবে SVG এবং HTML Canvas API দিয়ে তৈরি হয়। এতে এটি তাৎক্ষণিক, প্রাইভেট, ফ্রি এবং অফলাইনেও কাজ করতে সক্ষম হয় — কোনো রিকোয়েস্ট নেই, কোনো রেট লিমিট নেই, এবং কিছুই কখনও কোনো সার্ভারে আপলোড হয় না।

ধাপে ধাপে: কীভাবে একটি কাস্টম প্লেসহোল্ডার ইমেজ বানাবেন

একটি প্লেসহোল্ডার তৈরি করতে ১০ সেকেন্ডেরও কম সময় লাগে: ১) প্রস্থ ও উচ্চতা পিক্সেলে টাইপ করুন, অথবা একটি সাইজ প্রিসেট বেছে নিন (OG ইমেজের জন্য ১২০০×৬৩০, Instagram-এর জন্য ১০৮০×১০৮০, ভিডিও থাম্বনেইলের জন্য ১২৮০×৭২০, অ্যাভাটারের জন্য ২৫৬×২৫৬)। ২) কালার পিকার দিয়ে ব্যাকগ্রাউন্ড রঙ বেছে নিন, অথবা ক্লাসিক প্লেসহোল্ডার লুকের জন্য “ধূসর”-এর মতো একটি প্যালেট প্রিসেট বেছে নিন। ৩) ঐচ্ছিকভাবে কাস্টম টেক্সট যোগ করুন — খালি রাখলে ইমেজটি স্বয়ংক্রিয়ভাবে নিজের ডাইমেনশন দেখায়। ৪) আপনার এক্সপোর্ট ফরম্যাট বেছে নিন: ওয়েবে ব্যবহারের জন্য SVG (সবচেয়ে ছোট, সবচেয়ে ধারালো), স্বচ্ছতাসহ র‍্যাস্টারের জন্য PNG, ফটো-সামঞ্জস্যপূর্ণ ফরম্যাটের জন্য JPG বা WebP। ৫) ফাইল সংরক্ষণ করতে Download-এ ক্লিক করুন, অথবা কোড ট্যাবে গিয়ে একটি data URI, একটি <img> ট্যাগ বা CSS ব্যাকগ্রাউন্ড রুল কপি করুন — যা আপনার প্রজেক্টে পেস্ট করার জন্য প্রস্তুত।

SVG, PNG, JPG নাকি WebP — সঠিক ফরম্যাট বেছে নেওয়া

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

এর বদলে একটি র‍্যাস্টার ফাইল দরকার? PNG (পূর্ণ স্বচ্ছতা সমর্থনসহ), সবচেয়ে ব্যাপকভাবে সামঞ্জস্যপূর্ণ ফরম্যাটের জন্য JPG, অথবা সবচেয়ে ছোট র‍্যাস্টার ফাইল সাইজের জন্য WebP এক্সপোর্ট করুন। আপনি যা-ই বেছে নিন, লাইভ প্রিভিউ সংরক্ষণের আগেই দেখিয়ে দেয় আপনি ঠিক কী পাবেন — ফাইল খোলার সময় কোনো চমক নেই।

কেন এটি placehold.co এবং অন্যান্য হোস্টেড সার্ভিসকে ছাড়িয়ে যায়

placehold.co, dummyimage.com এবং via.placeholder.com-এর মতো সার্ভিসগুলো আপনাকে এমন একটি URL দেয় যা তাদের সার্ভারে হটলিংক করে। এটি নির্ভরশীলতা তৈরি করে: তাদের সার্ভিস বন্ধ হলে, রেট-লিমিটেড হলে, বা কোনো Content Security Policy দিয়ে ব্লক হলে আপনার মকআপ ভেঙে যায়। তারা কোন পেজগুলো তাদের ইমেজ রিকোয়েস্ট করছে তা-ও ট্র্যাক করে, যা অভ্যন্তরীণ প্রোটোটাইপের ক্ষেত্রে গোপনীয়তার উদ্বেগ বাড়ায়।

এই টুল আপনাকে আরও পোর্টেবল কিছু দেয়: একটি স্বয়ংসম্পূর্ণ data URI যা আপনি একটি <img src> বা CSS url()-এ বসাতে পারেন, কাঁচা SVG মার্কআপ, মিলযুক্ত ডাইমেনশনসহ একটি পেস্ট-করার-জন্য-প্রস্তুত <img> স্নিপেট, অথবা একটি CSS ব্যাকগ্রাউন্ড রুল। যেহেতু ইমেজটি এমবেড করা থাকে, তাই আপলোড করার কোনো বাড়তি ফাইল নেই, কোনো সার্ভিস বন্ধ হলে ভাঙা হটলিংক নেই, এবং কোনো তৃতীয়-পক্ষের ব্যবহার-ট্র্যাকিং নেই। কপি করুন, পেস্ট করুন, হয়ে গেল।

সোশ্যাল মিডিয়া, বিজ্ঞাপন, অ্যাভাটার ও থাম্বনেইলের প্রিসেট

এমন একটি লেআউট বানাচ্ছেন যাতে অনেক ইমেজ স্লট দরকার? প্রিসেট সাইজগুলো আপনার সবচেয়ে বেশি প্রয়োজনীয় ফরম্যাটগুলো কভার করে — সোশ্যাল ও OG ইমেজ (১২০০×৬৩০), বিজ্ঞাপন ইউনিট (৭২৮×৯০, ৩০০×২৫০), স্কয়ার পোস্ট (১০৮০×১০৮০), স্টোরি (১০৮০×১৯২০), ব্যানার, প্রোডাক্ট শট, বইয়ের কভার এবং ভিডিও থাম্বনেইল (১২৮০×৭২০)। প্লেসহোল্ডারকে আসল স্লটের সাথে মিলিয়ে সাইজ করলে আপনার লেআউট স্থিতিশীল থাকে এবং সেই cumulative layout shift (CLS) প্রতিরোধ হয় যা Core Web Vitals স্কোরের ক্ষতি করে।

অ্যাসপেক্ট রেশিও প্রিসেট (১:১, ৪:৩, ১৬:৯, ৯:১৬ এবং আরও) একটি ঐচ্ছিক অ্যাসপেক্ট লকসহ আপনাকে স্কেল করার সময় অনুপাত ধরে রাখতে দেয়। লকটি চালু করুন, একটি ডাইমেনশন পাল্টান, আর অন্যটি স্বয়ংক্রিয়ভাবে সমন্বয় হয় — রেসপন্সিভ ইমেজ গ্রিড ডিজাইনের জন্য নিখুঁত, যেখানে কন্টেইনারের প্রস্থ যা-ই হোক প্রতিটি কার্ডকে একই অনুপাত ধরে রাখতে হয়।

প্রাইভেট, তাৎক্ষণিক ও ফ্রি — সব ডিভাইসে কাজ করে

কোনো অ্যাকাউন্ট নেই, কোনো ওয়াটারমার্ক নেই, এবং আপনি কতগুলো ইমেজ তৈরি করেন তার কোনো সীমা নেই। প্রতিটি প্লেসহোল্ডার আপনার নিজের ডিভাইসে তৈরি হয়, তাই গোপনীয় ডিজাইন বা অভ্যন্তরীণ মকআপ নিয়ে কাজ করা ডিজাইনার ও ডেভেলপারদের জন্য এটি একটি দ্রুত, গোপনীয়তা-বান্ধব টুল। Windows, Mac, Linux, iPhone, iPad এবং Android-এ কাজ করে — যেকোনো আধুনিক ব্রাউজারে খুলুন এবং সঙ্গে সঙ্গে তৈরি করা শুরু করুন।

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

প্রতিটি ওয়েব ডিজাইনারের জানা উচিত এমন মানক ইমেজ ডাইমেনশন

আপনার প্লেসহোল্ডারকে একটি বাস্তব ডাইমেনশনের সাথে মেলালে চূড়ান্ত অ্যাসেট আসার সময় অনুমানের প্রয়োজন থাকে না। হিরো ব্যানার সাধারণত ১৯২০×১০৮০ px (ফুল-HD, ১৬:৯) বা ১৪৪০×৬০০ px (মার্কেটিং সাইটে প্রচলিত একটি খাটো সিনেমাটিক ক্রপ)। Open Graph শেয়ার ইমেজ — যে প্রিভিউ কার্ডটি Twitter/X, Facebook ও LinkedIn-এ কোনো URL শেয়ার করলে খোলে — অন্তত ১২০০×৬৩০ px হতে হবে; এর ছোট কিছু হলে প্ল্যাটফর্মের সাধারণ আইকন দিয়ে প্রতিস্থাপিত হয়। ব্লগ পোস্টের ফিচার্ড ইমেজ একই ১৬:৯ আকৃতি অনুসরণ করে ১২০০×৬৭৫ px-এ, যা ডেস্কটপ কার্ড থেকে মোবাইল ফুল-উইডথ পর্যন্ত পরিষ্কারভাবে স্কেল করে।

থাম্বনেইল ডিফল্টভাবে ক্লাসিক ৪:৩ অনুপাতে ৪০০×৩০০ px বা এখনকার মানক ভিডিও অনুপাত ৩২০×১৮০ px (১৬:৯) হয়। অ্যাভাটার ও প্রোফাইল ইমেজ প্রায় সবসময় বৃত্ত হিসেবে দেখানো হয় কিন্তু বর্গাকারে সংরক্ষিত থাকে — Twitter/X বা LinkedIn-এর মতো প্ল্যাটফর্ম বিস্তারিত সংকুচিত করার আগে ৪০০×৪০০ px নিরাপদ ন্যূনতম। ই-কমার্সের প্রোডাক্ট ইমেজ প্রথা অনুযায়ী বর্গাকার, ৮০০×৮০০ px বিশাল ফাইল সাইজ ছাড়াই জুম ফাংশনালিটির জন্য যথেষ্ট রেজোলিউশন দেয়। ই-মেইল হেডার সরু ও অগভীর: ৬০০ px প্রস্থ (বেশিরভাগ ই-মেইল ক্লায়েন্ট যতটা রেন্ডার করে তার সর্বোচ্চ) এবং ২০০–৩০০ px উচ্চতা। মোবাইল-ফার্স্ট ডিজাইনের জন্য, ৩৯০×৮৪৪ px iPhone 15-এর লজিক্যাল ক্যানভাসের সাথে মেলে এবং ৩৯৩×৮৭৩ px iPhone 16-এর সাথে মেলে, যা নেটিভ-অনুভূতির ওয়েব-অ্যাপ মকআপের জন্য একটি সত্যিকারের ফুল-স্ক্রিন প্লেসহোল্ডার দেয়।

এই সংখ্যাগুলো জানা মানে আপনি প্রথম দিন থেকেই বাস্তব স্কেলে প্রোটোটাইপ করতে পারেন। আপনার মেটা ট্যাগে একটি ১২০০×৬৩০ OG প্লেসহোল্ডার ফটোগ্রাফি সম্পন্ন হওয়ার আগেই একটি ব্রাউজার প্রিভিউ টুলে শেয়ার-কার্ড লেআউট যাচাই করতে দেয়। একটি কমেন্ট থ্রেডে ৪০০×৪০০ অ্যাভাটার ঠিক দেখায় রেন্ডার হওয়া ৪০ px ব্যাসে একটি বৃত্তাকার ক্রপ কতটা মুখ প্রকাশ করবে। প্লেসহোল্ডার পর্যায়ে সাইজ ঠিক রাখা হলো প্রোডাকশন অ্যাসেট তৈরি হওয়ার আগেই লেআউট সমস্যা ধরার সবচেয়ে সস্তা উপায়।

অ্যাসপেক্ট রেশিও, CSS aspect-ratio এবং Cumulative Layout Shift

একটি অ্যাসপেক্ট রেশিও হলো একটি ইমেজের প্রস্থ ও উচ্চতার মধ্যকার আনুপাতিক সম্পর্ক, যা প্রস্থ:উচ্চতা হিসেবে প্রকাশ করা হয় — যেমন ১৬:৯ (ওয়াইডস্ক্রিন ভিডিও ও বেশিরভাগ ডেস্কটপ হিরো), ৪:৩ (ক্লাসিক টেলিভিশন ও অনেক কার্ড থাম্বনেইল), ১:১ (বর্গাকার: Instagram পোস্ট, প্রোডাক্ট টাইল, অ্যাভাটার), অথবা ২:৩ (পোর্ট্রেট: Pinterest পিন, বইয়ের কভার, মোবাইল-ফার্স্ট স্টোরি)। লেআউটের জন্য অনুপাত পরম পিক্সেল ডাইমেনশনের চেয়ে বেশি গুরুত্বপূর্ণ, কারণ ১৬:৯ কার্ডের একটি CSS গ্রিড দৃশ্যত সামঞ্জস্যপূর্ণ থাকে, প্রতিটি কার্ড ৩২০ px হোক বা ৮০০ px।

CSS aspect-ratio প্রপার্টি — ২০২১ সালে চালু হয় এবং এখন Chrome, Safari, Firefox ও Edge-এ সর্বজনীনভাবে সমর্থিত — একটি ব্রাউজারকে ফাইল ডাউনলোড হওয়ার আগেই একটি ইমেজের জন্য সঠিক উল্লম্ব স্থান সংরক্ষণ করতে দেয়। img { aspect-ratio: 16 / 9; width: 100%; } লিখলে ব্রাউজার সঙ্গে সঙ্গে একটি ১৬:৯ বাক্স আঁকে, তাই ইমেজ আসার সময় আশপাশের কন্টেন্ট কখনও নিচে ঠেলে যায় না। এটি ছাড়া, ইমেজ লোড না হওয়া পর্যন্ত ব্রাউজার শূন্য উচ্চতা দেখে, তারপর হঠাৎ নিচের সবকিছু সরিয়ে দেয় — এটিই Cumulative Layout Shift (CLS) সমস্যা, Google-এর তিনটি Core Web Vitals-এর একটি। ০.১-এর বেশি CLS স্কোর সার্চ র‍্যাঙ্কিংয়ে জরিমানা পায়, যা aspect-ratio-কে ডিজাইনের মতোই একটি SEO বিষয় করে তোলে।

এই কারণেই স্পষ্ট প্রস্থ ও উচ্চতা অ্যাট্রিবিউটসহ প্লেসহোল্ডার ইমেজ গুরুত্বপূর্ণ: <img width="1200" height="630"> ব্রাউজারকে সেই অনুপাত দেয় যা কোনো CSS বা JavaScript লোড হওয়ার আগে স্থান সংরক্ষণ করতে দরকার। আধুনিক ব্রাউজার এই অ্যাট্রিবিউট থেকে অন্তর্নিহিত অ্যাসপেক্ট রেশিও গণনা করে এবং তা সঙ্গে সঙ্গে প্রয়োগ করে — HTML5-এ মানকীকৃত একটি আচরণ এবং এখন Google-এর ওয়েব পারফরম্যান্স নির্দেশিকায় প্রস্তাবিত অনুশীলন। আপনি যখন এই টুল থেকে একটি <img> ট্যাগ কপি করেন, মিলযুক্ত প্রস্থ ও উচ্চতা ইতিমধ্যেই অন্তর্ভুক্ত থাকে, তাই আসল কন্টেন্ট লোড হওয়ার সময় স্লটটি কখনও সরে না।

SVG প্লেসহোল্ডার, Data URI এবং Shimmer Skeleton প্যাটার্ন

একটি SVG প্লেসহোল্ডার আসলে একটি রঙে ভরা <rect> এলিমেন্ট ছাড়া আর কিছুই নয়, যা মিলযুক্ত প্রস্থ ও উচ্চতাসহ একটি <svg> ট্যাগে মোড়ানো। সবচেয়ে সরল অবস্থায়, পুরো ফাইলটি ২০০ বাইটের নিচে — এমনকি একটি ১×১ GIF-এর চেয়েও অনেক ছোট। যেহেতু SVG একটি XML টেক্সট ফরম্যাট, তাই এটি ঝাপসা না হয়ে যেকোনো ডিসপ্লে রেজোলিউশনে স্কেল করে, যা এটিকে ৩× Retina ডিসপ্লেসহ যেকোনো স্ক্রিন ঘনত্বে সম্ভাব্য সবচেয়ে ধারালো প্লেসহোল্ডার করে তোলে। SVG CSS ক্লাস ও কাস্টম প্রপার্টিও সমর্থন করে, তাই একই প্লেসহোল্ডার একটি মাত্র CSS রুল দিয়ে এবং কোনো বাড়তি ডাউনলোড ছাড়াই লাইট-মোড ধূসর ও ডার্ক-মোড স্লেটের মধ্যে পাল্টে যেতে পারে।

একটি data URI ইমেজটিকে সরাসরি অ্যাট্রিবিউট মানের ভেতরে এনকোড করে, একটি আলাদা HTTP রিকোয়েস্টের প্রয়োজন পুরোপুরি সরিয়ে দেয়। src="data:image/svg+xml,%3Csvg…%3E" (URL-এনকোডেড) প্যাটার্ন বা base64 ভ্যারিয়েন্ট ফাইলটিকে আপনার HTML বা CSS-এর ভেতরে ইনলাইনে এমবেড করে। এটি গুরুত্বপূর্ণ অ্যাবাভ-দ্য-ফোল্ড প্লেসহোল্ডারের জন্য আদর্শ: কোনো বাহ্যিক রিসোর্স আনার আগেই, প্রাথমিক HTML পার্সের সময় ব্রাউজার এগুলো আঁকে, তাই ইমেজ-অনুপস্থিতির কোনো ঝলক থাকে না। ট্রেড-অফ হলো এনকোড করা স্ট্রিংটি HTML ডকুমেন্টে নিজেই বাইট যোগ করে — সাধারণত base64-এর জন্য ৩০–৪০% ওভারহেড — তাই বড় ফটোগ্রাফের বদলে ছোট প্লেসহোল্ডারের জন্য data URI সবচেয়ে ভালো।

অনুভূত পারফরম্যান্সের জন্য অনেক বড় প্ল্যাটফর্ম — Facebook, YouTube, LinkedIn — একটি shimmer skeleton অ্যানিমেশন ব্যবহার করে: একটি ফ্যাকাশে ধূসর আয়তক্ষেত্র যার ওপর একটি উজ্জ্বল হাইলাইট লুপে বাঁ থেকে ডানে চলে, নড়াচড়ার অনুকরণ করে এবং সংকেত দেয় যে কন্টেন্ট লোড হচ্ছে। ব্যবহারকারী গবেষণা ধারাবাহিকভাবে দেখায় যে প্রকৃত লোড সময় অভিন্ন হলেও একটি অ্যানিমেটেড প্লেসহোল্ডার সমতুল্য ফাঁকা স্থানের চেয়ে দ্রুত অনুভূত হয়। প্রভাবটি একটি CSS @keyframes অ্যানিমেশন দিয়ে বাস্তবায়িত হয় যা এলিমেন্টের ওপর একটি লিনিয়ার গ্রেডিয়েন্ট সরিয়ে দেয় — বিশুদ্ধ CSS, শূন্য JavaScript, কোনো ইমেজ নেই। ডেভেলপমেন্ট প্লেসহোল্ডার হিসেবে আপনার অ্যানিমেশন দরকার নেই, তবে এটি বোঝা স্পষ্ট করে কেন সমতল ধূসর বাক্স ডিজাইন মান হিসেবে টিকে আছে: তারা shimmer skeleton-এর মতোই একই নিরপেক্ষ দৃশ্যভাষা ভাগ করে, তাই ডেভেলপার ও ডিজাইনাররা তাৎক্ষণিকভাবে এগুলোকে অনুপস্থিত বা ভাঙা অ্যাসেট নয়, বরং “কন্টেন্ট এখনও লোড হয়নি” হিসেবে বোঝেন।

রেসপন্সিভ ইমেজ, LQIP এবং Largest Contentful Paint সংযোগ

প্রোটোটাইপিংয়ের জন্য একটি মাত্র প্লেসহোল্ডার সাইজ ঠিক আছে, কিন্তু প্রোডাকশনে আসল ইমেজ পাঠানো মানে আসলে কোন পিক্সেল ডাইমেনশন সার্ভ করবেন তা ঠিক করা। srcset অ্যাট্রিবিউট আপনাকে একই ইমেজের একাধিক প্রি-রিসাইজড সংস্করণ তালিকাভুক্ত করতে দেয় (image-480w.jpg 480w, image-1200w.jpg 1200w), আর ব্রাউজার ডিভাইসের স্ক্রিন প্রস্থ ও পিক্সেল ঘনত্বের ভিত্তিতে সবচেয়ে উপযুক্তটি বেছে নেয়। sizes অ্যাট্রিবিউটের সাথে জোড়া বেঁধে — যা ব্রাউজারকে বলে প্রতিটি ভিউপোর্ট ব্রেকপয়েন্টে ইমেজটি কত প্রশস্ত রেন্ডার হবে — এই সংমিশ্রণ কোনো JavaScript ছাড়াই মোবাইল ডিভাইসে ইমেজ পেলোড ৫০–৭০% কমাতে পারে। আপনার প্লেসহোল্ডার সবচেয়ে বড় srcset সাইজের সাথে মেলা উচিত, যাতে সবচেয়ে বড় সংস্করণ লোড হওয়ার সময় লেআউট কখনও না সরে।

Low-Quality Image Placeholder (LQIP) প্যাটার্ন data URI-কে আরও একধাপ এগিয়ে নেয়: একটি ফাঁকা বাক্সের বদলে, আপনি প্লেসহোল্ডার src হিসেবে একটি ছোট, ভারীভাবে ঝাপসা করা থাম্বনেইল (প্রায়শই ১০×১০ px-এর মতো ছোট, base64-এনকোডেড) এমবেড করেন। এটি ব্যবহারকারীদের ফুল-রেজোলিউশন সংস্করণ ব্যাকগ্রাউন্ডে লোড হওয়ার সময় আসল ইমেজ কন্টেন্টের একটি তাৎক্ষণিক — যদিও ঝাপসা — প্রিভিউ দেয়। ফুল ইমেজ প্রস্তুত হলে JavaScript (বা নেটিভ loading="lazy") src পাল্টে দেয়। ঝাপসা প্রিভিউ চূড়ান্ত ইমেজের ঠিক একই স্থান দখল করে, তাই কোনো লেআউট শিফট নেই, এবং ঝাপসা থেকে ধারালোতে দৃশ্যত রূপান্তর একটি ধূসর বাক্সের চেয়ে অগ্রগতি অনেক স্পষ্টভাবে জানায়। Next.js next/image এবং Gatsby-র ইমেজ প্লাগইনের মতো টুল বিল্ড ধাপে স্বয়ংক্রিয়ভাবে LQIP ডেটা তৈরি করে।

একটি পেজের উপরের হিরো বা ফিচার্ড ইমেজ প্রায় সবসময়ই ব্রাউজারের Largest Contentful Paint (LCP) এলিমেন্ট — যে মেট্রিক দিয়ে Google পরিমাপ করে একটি পেজ কত দ্রুত লোড হওয়া অনুভূত হয়। Core Web Vitals-এ “Good” স্কোর পেতে একটি মাঝারি মোবাইল কানেকশনে LCP ২.৫ সেকেন্ডের মধ্যে সম্পন্ন হতে হবে। loading="eager" ব্যবহার করা (অ্যাবাভ-দ্য-ফোল্ড ইমেজের জন্য ডিফল্ট), <link rel="preload" as="image"> দিয়ে ইমেজ প্রিলোড করা, এবং <picture> এলিমেন্টের মাধ্যমে WebP বা AVIF-এর মতো একটি পরবর্তী-প্রজন্মের ফরম্যাট সার্ভ করা হলো LCP-র জন্য তিনটি সর্বোচ্চ-প্রভাবী অপ্টিমাইজেশন। আপনার প্লেসহোল্ডার কৌশল এই স্কোরকে সরাসরি প্রভাবিত করে: স্পষ্ট ডাইমেনশনসহ একটি সঠিক-সাইজের প্লেসহোল্ডার ব্রাউজারকে সঙ্গে সঙ্গে স্থান সংরক্ষণ করতে বলে, আর একটি প্রিলোড করা আসল ইমেজ ব্যবহারকারী সোয়াপটি লক্ষ্য করার আগেই সেই স্থান ভরে দেয় — LCP দ্রুত এবং CLS শূন্যে রাখে।