ইমেজ সিনট্যাক্স

ইমেজ হল ডকুমেন্টেশনে গুরুত্বপূর্ণ ভিজ্যুয়াল উপাদান। মার্কডাউন ইমেজ সন্নিবেশ এবং পরিচালনার জন্য একটি সংক্ষিপ্ত সিনট্যাক্স প্রদান করে।

বেসিক ইমেজ সিনট্যাক্স

ইনলাইন ইমেজ

![অল্ট টেক্সট](ইমেজ URL) ফরম্যাট ব্যবহার করুন:

![মার্কডাউন লোগো](https://www.markdownlang.com/markdown-logo.png)

শিরোনাম সহ ইমেজ

একটি ঐচ্ছিক শিরোনাম যোগ করুন:

![মার্কডাউন লোগো](https://www.markdownlang.com/markdown-logo.png "অফিসিয়াল মার্কডাউন লোগো")

আপনি যখন ইমেজের উপর হোভার করবেন, তখন শিরোনাম টেক্সট প্রদর্শিত হবে।

রেফারেন্স-স্টাইল ইমেজ

বেসিক রেফারেন্স স্টাইল

![অল্ট টেক্সট][image-ref]

[image-ref]: https://www.markdownlang.com/image.jpg "ঐচ্ছিক শিরোনাম"

শর্টকাট রেফারেন্স স্টাইল

যখন রেফারেন্স লেবেল অল্ট টেক্সটের মতো একই হয়:

![মার্কডাউন লোগো][]

[মার্কডাউন লোগো]: https://www.markdownlang.com/markdown-logo.png

ইমেজ পাথ টাইপ

অ্যাবসলিউট URL

![ওয়েব ইমেজ](https://www.markdownlang.com/images/photo.jpg)

রিলেটিভ পাথ

![লোকাল ইমেজ](./images/photo.jpg)
![প্যারেন্ট ডিরেক্টরি ইমেজ](../images/photo.jpg)
![সেম ডিরেক্টরি ইমেজ](photo.jpg)

রুট-রিলেটিভ পাথ

![রুট ডিরেক্টরি ইমেজ](/images/photo.jpg)

অ্যাডভান্সড ইমেজ বৈশিষ্ট্য

ইমেজ লিঙ্ক

একটি ইমেজকে লিঙ্কে মোড়ান:

[![ইমেজ বিবরণ](image.jpg)](https://www.markdownlang.com)

রেন্ডার্ড আউটপুট: ইমেজে ক্লিক করলে নির্দিষ্ট লিঙ্কে যাওয়া যাবে।

HTML দিয়ে ইমেজ নিয়ন্ত্রণ

সাইজ নির্দিষ্ট করা

<img src="image.jpg" alt="বিবরণ" width="300" height="200">

ইমেজ অ্যালাইনমেন্ট

<!-- সেন্টার অ্যালাইন -->
<div align="center">
  <img src="image.jpg" alt="সেন্টার্ড ইমেজ" width="400">
</div>

<!-- রাইট অ্যালাইন -->
<div align="right">
  <img src="image.jpg" alt="রাইট অ্যালাইনড ইমেজ" width="300">
</div>

রেসপন্সিভ ইমেজ

<img src="image.jpg" alt="রেসপন্সিভ ইমেজ" style="max-width: 100%; height: auto;">

ইমেজ কম্বিনেশন ডিসপ্লে

পাশাপাশি ডিসপ্লে

<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">

ইমেজ গ্রিড

<table>
  <tr>
    <td><img src="img1.jpg" width="200"></td>
    <td><img src="img2.jpg" width="200"></td>
  </tr>
  <tr>
    <td><img src="img3.jpg" width="200"></td>
    <td><img src="img4.jpg" width="200"></td>
  </tr>
</table>

মিশ্র ইমেজ এবং টেক্সট

<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">

এটি ইমেজের বাম পাশে ভাসমান টেক্সটের একটি প্যারাগ্রাফ। টেক্সটটি ইমেজের চারপাশে মোড়ানো হবে, একটি মিশ্র লেআউট তৈরি করবে। এটি ব্যক্তিগত প্রোফাইল বা পণ্য পরিচিতির জন্য ব্যবহার করা যেতে পারে।

<div style="clear: both;"></div>

অল্ট টেক্সটের সেরা অনুশীলন

বর্ণনামূলক টেক্সট

✅ সুপারিশকৃত: ইমেজ কন্টেন্ট বর্ণনা করুন
![একটি ওয়ার্কস্পেসে ল্যাপটপে কাজ করছে এমন একজন ব্যবহারকারী](workspace.jpg)

❌ সুপারিশকৃত নয়: অর্থহীন টেক্সট
![ইমেজ](workspace.jpg)
![এখানে ক্লিক করুন](workspace.jpg)

ফাংশনাল ইমেজ

✅ সুপারিশকৃত: ইমেজের ফাংশন ব্যাখ্যা করুন
![অনুসন্ধান বাটন](search-icon.png)
![GitHub রেপোজিটরি লিঙ্ক](github-logo.png)

❌ সুপারিশকৃত নয়: চারপাশের টেক্সট পুনরাবৃত্তি
অনুসন্ধান করতে ![ক্লিক করুন](search-icon.png)

সজ্জিত ইমেজ

✅ সুপারিশকৃত: সজ্জিত ইমেজের জন্য খালি অল্ট টেক্সট ব্যবহার করুন
![](decorative-border.png)

❌ সুপারিশকৃত নয়: অপ্রয়োজনীয় বিবরণ
![সজ্জিত বর্ডার প্যাটার্ন](decorative-border.png)

সাধারণ ইমেজ ফরম্যাট

ওয়েব-ফ্রেন্ডলি ফরম্যাট

ফরম্যাট	ব্যবহার	বৈশিষ্ট্য
JPEG	ফটো, জটিল ইমেজ	ছোট ফাইল, লসি কম্প্রেশন
PNG	আইকন, স্বচ্ছ ব্যাকগ্রাউন্ড	লসলেস কম্প্রেশন, স্বচ্ছতা সমর্থন করে
WebP	আধুনিক ওয়েব ইমেজ	ছোট সাইজ, ভালো কোয়ালিটি
SVG	ভেক্টর গ্রাফিক্স, আইকন	স্কেলেবল, ছোট ফাইল
GIF	সহজ অ্যানিমেশন	অ্যানিমেশন সমর্থন করে, সীমিত রঙ

ফরম্যাট নির্বাচন পরামর্শ

✅ সুপারিশকৃত ব্যবহার:
![ফটো](photo.jpg)           ← ফটোর জন্য JPEG
![আইকন](icon.png)             ← আইকনের জন্য PNG
![ভেক্টর](logo.svg)           ← ভেক্টর গ্রাফিক্সের জন্য SVG
![অ্যানিমেশন](animation.gif)   ← সহজ অ্যানিমেশনের জন্য GIF

❌ সুপারিশকৃত নয়:
![আইকন](icon.jpg)             ← আইকনের জন্য JPEG উপযুক্ত নয়
![ফটো](photo.png)             ← PNG ফাইল বড় হতে পারে

ইমেজ অপ্টিমাইজেশন টিপস

ফাইল সাইজ অপ্টিমাইজেশন

1. সঠিক রেজোলিউশন নির্বাচন করুন

   <!-- ওয়েব ডিসপ্লের জন্য সুপারিশকৃত -->
   <img src="image.jpg" width="800" alt="বিবরণ">  ← হাই-DPI স্ক্রিনের জন্য 2x ইমেজ

2. উপযুক্ত কম্প্রেশন ব্যবহার করুন

   <!-- JPEG কোয়ালিটি: 70-80% সুপারিশকৃত -->
   ![অপ্টিমাইজড ফটো](optimized-photo.jpg)

3. লেজি লোডিং

   <img src="image.jpg" alt="বিবরণ" loading="lazy">

CDN এবং ইমেজ হোস্টিং ব্যবহার

<!-- ত্বরান্বিত করার জন্য CDN ব্যবহার করুন -->
![CDN ইমেজ](https://cdn.example.com/images/photo.jpg)

<!-- ইমেজ হোস্টিং সার্ভিস -->
![হোস্টেড ইমেজ](https://img.example.com/upload/photo.jpg)

সাধারণ ত্রুটি এবং সমাধান

1. পাথ ত্রুটি

❌ ত্রুটি:
![ইমেজ](images/photo.jpg)    ← পাথ বিদ্যমান নেই

✅ সঠিক:
![ইমেজ](./images/photo.jpg)  ← ফাইল পাথ পরীক্ষা করুন
![ইমেজ](/assets/photo.jpg)   ← সঠিক রিলেটিভ পাথ ব্যবহার করুন

2. অল্ট টেক্সট অনুপস্থিত

❌ ত্রুটি:
![](important-chart.jpg)     ← গুরুত্বপূর্ণ ইমেজের বিবরণ অনুপস্থিত

✅ সঠিক:
![2023 বিক্রয় ডেটা তুলনা চার্ট](important-chart.jpg)

3. সাইজ কন্ট্রোল ত্রুটি

❌ ত্রুটি: ইমেজ খুব বড়
![বড় ইমেজ](huge-image.jpg)   ← লেআউট ভাঙতে পারে

✅ সমাধান:
<img src="huge-image.jpg" alt="বড় ইমেজ" style="max-width: 100%;">

4. ইমেজ লিঙ্ক ত্রুটি

❌ ত্রুটি:
[![ইমেজ](image.jpg)(https://www.markdownlang.com)  ← সিনট্যাক্স ত্রুটি

✅ সঠিক:
[![ইমেজ](image.jpg)](https://www.markdownlang.com)

ব্যবহারিক সিনারিও

1. টেকনিক্যাল ডকুমেন্টেশন

## ইনস্টলেশন ধাপ

1. ইনস্টলার ডাউনলোড করুন

   ![ডাউনলোড পেজ স্ক্রিনশট](download-page.png)

2. ইনস্টলার চালান

   ![ইনস্টলার উইজার্ড ইন্টারফেস](installer-wizard.png)

3. ইনস্টলেশন সম্পূর্ণ করুন

   ![ইনস্টলেশন সম্পূর্ণ নিশ্চিতকরণ](installation-complete.png)

2. পণ্য শোকেস

## পণ্য বৈশিষ্ট্য

### আধুনিক UI ডিজাইন

<div align="center">
  <img src="ui-screenshot.png" alt="পণ্য UI স্ক্রিনশট" width="600">
  <p><em>পরিষ্কার এবং স্বজ্ঞাত ব্যবহারকারী ইন্টারফেস</em></p>
</div>

### মাল্টি-প্ল্যাটফর্ম সমর্থন

<table>
  <tr>
    <td align="center">
      <img src="windows-logo.png" width="60"><br>
      <strong>Windows</strong>
    </td>
    <td align="center">
      <img src="mac-logo.png" width="60"><br>
      <strong>macOS</strong>
    </td>
    <td align="center">
      <img src="linux-logo.png" width="60"><br>
      <strong>Linux</strong>
    </td>
  </tr>
</table>

3. ব্যক্তিগত প্রোফাইল

## আমার সম্পর্কে

<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">

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

### স্কিল স্ট্যাক

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<div style="clear: both;"></div>

4. টিউটোরিয়াল নির্দেশাবলী

## কোড এডিটর কনফিগারেশন

আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট কনফিগার করতে এই ধাপগুলি অনুসরণ করুন:

1. **সেটিংস খুলুন**

   ![VS Code সেটিংস এন্ট্রি](vscode-settings-1.png)

2. **কনফিগারেশন আইটেম অনুসন্ধান করুন**

   ![অনুসন্ধান কনফিগারেশন](vscode-settings-2.png)

3. **কনফিগারেশন ভ্যালু পরিবর্তন করুন**

   ![কনফিগারেশন পরিবর্তন করুন](vscode-settings-3.png)

> 💡 **টিপস**: সেটিংস কার্যকর করতে কনফিগারেশনের পরে এডিটর পুনরায় শুরু করুন।

অ্যাক্সেসিবিলিটি

অর্থপূর্ণ অল্ট টেক্সট লিখুন

✅ সুপারিশকৃত: বিস্তারিত বিবরণ
![2023 সালের Q3-এ 15% রাজস্ব বৃদ্ধি দেখানো বার চার্ট একটি লাল ঊর্ধ্বমুখী তীর সহ](revenue-chart-q3.png)

❌ সুপারিশকৃত নয়: সাধারণ পুনরাবৃত্তি
![চার্ট](revenue-chart-q3.png)

স্ট্রাকচার্ড বিবরণ ব্যবহার করুন

![দলীয় গ্রুপ ছবি: সামনের সারি বাম থেকে জhang সান, লি সি, ওয়াং উ; পেছনের সারি বাম থেকে ঝাও লিউ, সুন কি, ঝৌ বা](team-photo.jpg)

HTML আউটপুট

মার্কডাউন ইমেজ HTML-এ রূপান্তরিত হয়:

![অল্ট টেক্সট](image.jpg "ইমেজ শিরোনাম")

রূপান্তরিত হয়:

<img src="image.jpg" alt="অল্ট টেক্সট" title="ইমেজ শিরোনাম">

রেফারেন্স-স্টাইল ইমেজ:

![অল্ট টেক্সট][ref]

[ref]: image.jpg "শিরোনাম"

রূপান্তরিত হয়:

<img src="image.jpg" alt="অল্ট টেক্সট" title="শিরোনাম">

সম্পর্কিত সিনট্যাক্স

• লিঙ্ক সিনট্যাক্স - লিঙ্ক তৈরি
• HTML সিনট্যাক্স - HTML এম্বেড করা
• ফেন্সড কোড ব্লক - কোড হাইলাইটিং

অনুশীলন

নিম্নলিখিতগুলি তৈরি করার চেষ্টা করুন:

1. একাধিক পণ্য ইমেজ সহ একটি পণ্য শোকেস পৃষ্ঠা
2. ধাপে ধাপে স্ক্রিনশট এবং ব্যাখ্যা সহ একটি প্রযুক্তিগত টিউটোরিয়াল
3. সদস্য অ্যাভাটার এবং তথ্য সহ একটি দল পরিচিতি পৃষ্ঠা
4. ডেটা প্রবণতা দেখানো একটি তুলনা চার্ট

সুপারিশকৃত টুলস

ইমেজ এডিটিং টুলস

• অনলাইন টুলস: Canva, Figma, Photopea
• ডেস্কটপ সফটওয়্যার: GIMP, Paint.NET, Adobe Photoshop
• স্ক্রিনশট টুলস: Snipaste, Lightshot, বিল্ট-ইন স্ক্রিনশট টুলস

ইমেজ অপ্টিমাইজেশন টুলস

• কম্প্রেশন টুলস: TinyPNG, ImageOptim, Squoosh
• ফরম্যাট কনভার্সন: CloudConvert, Online-Convert
• ব্যাচ প্রসেসিং: ImageMagick, XnConvert

ইমেজ হোস্টিং সার্ভিস

• ফ্রি সার্ভিস: GitHub, Gitee, sm.ms
• পেইড সার্ভিস: Qiniu Cloud, Alibaba Cloud OSS, Tencent Cloud COS
• CDN ত্বরান্বিত: jsDelivr, Cloudflare, AWS CloudFront