ভূমিকা
ওয়েবপেজে ছবি (Images) ভিজ্যুয়াল আকর্ষণ, কনটেক্সট এবং ব্র্যান্ডিং বাড়ায়। আর ফেভিকন (favicon) হলো ব্রান্ডের ছোট আইকন — ব্রাউজার ট্যাবে, বুকমার্কে ও মোবাইল হোম স্ক্রিনে দেখা যায়। এই পোস্টে আমরা দেখব—HTML-এ ছবি যোগ করার বিভিন্ন পদ্ধতি, responsive ও performant ছবি, accessibility টিপস এবং ফেভিকন তৈরি ও ব্যবহারের সঠিক উপায়।
অংশ ১ — HTML-এ ছবি যোগ করার বেসিক
img ট্যাগ মূল কাঠামো
src— ইমেজ ফাইলের পাথ বা URLalt— বিকল্প টেক্সট (অত্যন্ত গুরুত্বপূর্ণ; accessibility ও SEO-এর জন্য)
উদাহরণ
অংশ ২ — Accessibility (প্রবেশযোগ্যতা) গুরুত্বপূর্ণ টিপস
প্রতিটি দর্শনযোগ্য ছবি-তে
altদিন। সংক্ষিপ্ত, বর্ণনামূলক টেক্সট দিন (যাতে ভিজ্যুয়ালি অনুপস্থিত ইউজার বা স্ক্রীন রিডার বুঝতে পারে)।শুধু “image” বা “picture” লিখবেন না। উদাহরণ:
alt="করোনায় আকাশে লাল সূর্যাস্ত"বহু জটিল বা লম্বা কনটেন্ট হলে
figure+figcaptionব্যবহার করুন এবং প্রয়োজনেaria-describedbyদিয়ে অতিরিক্ত বর্ণনা দিন।সাজেশন: purely decorative ছবি হলে
alt=""(শূন্য) দিন যাতে screen readers তা এড়িয়ে যায়।
অংশ ৩ — Responsive images (responsive & high-DPI support)
srcset + sizes (বিভিন্ন রেজলিউশনের ছবি সরবরাহ)
ব্রাউজার শর্ত অনুযায়ী সবচেয়ে উপযুক্ত ফাইল নির্বাচন করবে → ব্যান্ডউইথ ও পারফরম্যান্স ভালো হয়।
picture element (format switching / art direction)
ব্রাউজারগুলো প্রথমে
sourceগুলো চেক করে — সাবধানভাবে modern formats ব্যবহার করলে লোড দ্রুত হয়।
অংশ ৪ — Lazy loading (ডিফার লোডিং) — পারফরম্যান্স বাড়ায়
loading="lazy"ব্যবহার করলে ইমেজ তখনই লোড হবে যখন ইউজার স্ক্রল করে ইমেজের কাছে পৌঁছাবে — দ্রুত পেজ লোড টাইম।
অংশ ৫ — ফাইল ফরম্যাট ও অপ্টিমাইজেশন
জনপ্রিয় ফরম্যাট:
JPEG / JPG: ফটোগ্রাফির জন্য (বেস্ট কম্প্রেসন)
PNG: ট্রান্সপারেন্সি প্রয়োজন হলে (আলফা) — কিন্তু বড় ফাইল
WebP / AVIF: আধুনিক, ছোট সাইজে উচ্চ মান — সাবধান করে ব্যাকআপ রাখুন (older browsers fallback)
SVG: লোগো/আইকন/ভেক্টর গ্রাফিক্স — scalable, ছোট, CSS দিয়ে কালার কন্ট্রোল করা যায়
অপ্টিমাইজেশন টিপস:
production-এ ছবি compress করুন (tool: ImageOptim, Squoosh, mozjpeg, cwebp ইত্যাদি)
সঠিক রেজল্যুশন সার্ভ করুন (desktop-এর জন্য 2x হলেই সব ক্ষেত্রে দরকার নেই)
CDN ব্যবহার করলে global delivery দ্রুত হয়
অংশ ৬ — CSS background images vs img
যখন CSS ব্যাকগ্রাউন্ড ব্যবহার করবেন:
purely dekorative images (layout/background) — ব্যবহার করুন
background-imageযখন ইমেজ কন্টেন্ট নয় (সমুদ্রের টেক্সচারের মতো) — CSS ভালো
যখন img ব্যবহার করবেন:
যখন ইমেজ কনটেন্ট/সম্মানীয় তথ্য প্রকাশ করে (infographic, product photo, article image) — অবশ্যই
<img>এবংaltদিন।SEO ও accessibility-র জন্য content images সবসময়
<img>হওয়া উচিত।
অংশ ৭ — ছবির আকার নির্দেশ ও aspect ratio
width/height attributes দিয়ে ব্রাউজার রিসার্ভ করে লেআউট
modern browsers aspect-ratio বজায় রেখে লেআউট শিফট কমায় → CLS (Cumulative Layout Shift) কমে
CSS দিয়ে কন্ট্রোল (responsive)
img { max-width: 100%; height: auto; display: block; }
অংশ ৮ — ছবির ক্যাপশন ও credit
ছবি যেখানে প্রয়োজন সেখানে credit দিন (কপিরাইট সন্মান):
<figcaption>Photo: John Doe / Unsplash</figcaption>LICENSE-aware ব্যবহার করুন — royalty-free বা proper license থাকা ছবি ব্যবহার করা আবশ্যক
অংশ ৯ — Favicon (ফেভিকন) — কী, কেন ও কিভাবে
ফেভিকন কী?
- ছোট আইকন যা ব্রাউজারের ট্যাবে, বুকমার্কে, অ্যাপ শর্টকাটে ও মোবাইল হোম স্ক্রিনে প্রদর্শিত হয় — ব্র্যান্ড পরিচিতির জন্য গুরুত্বপূর্ণ।
সাধারণly ব্যবহৃত সাইজ (প্রস্তাবিত):
- 16×16 px — ট্যাব আইকন
32×32 px — high-res ট্যাব/বুকমার্ক
48×48 (কিছু প্ল্যাটফর্ম)
192×192 — Android home screen / PWA icon
512×512 — large PWA splash / store assets
180×180 — Apple touch icon (iOS)
ফাইল ফরম্যাট:
ICO (পুরনো কিন্তু সব ব্রাউজারে সমর্থিত), PNG (স্কেল করা সহজ), SVG (ভেক্টর—লোগো জন্য ভালো), WebP (modern)
নিয়ম: একাধিক সাইজের ICO তৈরি করা যায় (favicon.ico এ 16/32 অন্তর্ভুক্ত)
অংশ ১০ — HTML-এ favicon যোগ করা (basic examples)
Favicons টেস্ট ও ট্রাবলশুটিং
- favicon পরিবর্তনের পর ক্যাশ পরিষ্কার করুন (browser cache/bust) — অনেক সময় তা দেখায় না।
dev tools ▶ network এ favicon request চেক করুন (status 200)
link rel="icon"ট্যাগ চাইলে<head>এ রাখুন; বিভিন্ন ব্রাউজার বিভিন্ন অর্ডার অনুসারে খুঁজে পায় — সব বড় সাইজগুলো লিংক করে রাখলেই ভালো।
অংশ ১১ — SEO ও পারফরম্যান্স টিপস (Image & Favicon)
- বড় ইমেজ টুকু compress ও serve করুন (lazy load + responsive) → page speed বাড়ে
altটেক্সট দিয়ে SEO-তে সাহায্য করুন (কিন্তু keyword stuffing করবেন না)critical hero image-এর জন্য preconnect/ preload ব্যবহার করতে পারেন:
favicon ছোট হলেও সার্ভারের response ভালো রাখুন (fast CDN)
প্রয়োজনীয় কোড সাব-সামারি (চটজলদি কপি-পেস্ট)
Responsive <picture> + lazy example
Basic favicon links (head)
সংক্ষিপ্ত টিপস (Quick Checklist)
- প্রতিটি content image-এ অর্থবহ
altদিন। responsive images (
srcset/picture) ব্যবহার করুন।modern ফরম্যাট (WebP/AVIF) প্রয়োগ করুন — fallback রাখুন।
lazy loading চালু রাখুন যেখানে প্রয়োজন।
CSS background images শুধুই decorative হলে ব্যবহার করুন।
ফেভিকন-এ বিভিন্ন সাইজ ও ফরম্যাট দিন (ICO/PNG/SVG) এবং
manifestযোগ করুন PWA-র জন্য।cache/ CDN & compression ব্যবহার করে load time কমান।
license/credit বজায় রাখুন — কপিরাইট লঙ্ঘন করবেন না।
