छवि सिंटैक्स

छवियाँ दस्तावेज़ीकरण में महत्वपूर्ण दृश्य तत्व हैं। Markdown छवियाँ सम्मिलित करने और प्रबंधित करने के लिए एक संक्षिप्त सिंटैक्स प्रदान करता है।

बुनियादी छवि सिंटैक्स

इनलाइन छवियाँ

![alt पाठ](छवि URL) प्रारूप का उपयोग करें:

![Markdown लोगो](https://www.markdownlang.com/markdown-logo.png)

शीर्षक के साथ छवियाँ

वैकल्पिक शीर्षक जोड़ें:

![Markdown लोगो](https://www.markdownlang.com/markdown-logo.png "आधिकारिक Markdown लोगो")

जब आप छवि पर होवर करें, तो शीर्षक पाठ प्रदर्शित होगा।

संदर्भ-शैली छवियाँ

बुनियादी संदर्भ शैली

![alt पाठ][image-ref]

[image-ref]: https://www.markdownlang.com/image.jpg "वैकल्पिक शीर्षक"

शॉर्टकट संदर्भ शैली

जब संदर्भ लेबल alt पाठ के समान हो:

![Markdown लोगो][]

[Markdown लोगो]: 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="right" width="100" style="margin-left: 20px;">

यह एक पैराग्राफ पाठ है जिसमें छवि बाएँ तरफ तैर रही है। पाठ छवि के चारों ओर लपेटेगा, एक मिश्रित लेआउट बनाएगा। यह व्यक्तिगत प्रोफ़ाइल या उत्पाद परिचय के लिए उपयोग किया जा सकता है।

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

alt पाठ के लिए सर्वोत्तम प्रथाएँ

वर्णनात्मक पाठ

✅ अनुशंसित: छवि सामग्री का वर्णन करें
![एक कार्यस्थान में लैपटॉप पर काम करने वाला उपयोगकर्ता](workspace.jpg)

❌ अनुशंसित नहीं: अर्थहीन पाठ
![छवि](workspace.jpg)
![यहाँ क्लिक करें](workspace.jpg)

कार्यात्मक छवियाँ

✅ अनुशंसित: छवि के कार्य की व्याख्या करें
![खोज बटन](search-icon.png)
![GitHub रिपॉजिटरी लिंक](github-logo.png)

❌ अनुशंसित नहीं: आसपास के पाठ को दोहराना
क्लिक ![क्लिक](search-icon.png) करके खोजें

सजावटी छवियाँ

✅ अनुशंसित: सजावटी छवियों के लिए खाली alt पाठ का उपयोग करें
![](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. alt पाठ गुम

❌ त्रुटि:
![](महत्वपूर्ण-चार्ट.jpg)     ← महत्वपूर्ण छवि में विवरण गुम

✅ सही:
![2023 Q3 बिक्री डेटा तुलना चार्ट](महत्वपूर्ण-चार्ट.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)

> 💡 **टिप**: कॉन्फ़िगरेशन के बाद संपादक को पुनः शुरू करें ताकि सेटिंग्स प्रभावी हों।

पहुंचनीयता

सार्थक alt पाठ लिखें

✅ अनुशंसित: विस्तृत विवरण
![2023 Q3 में 15% राजस्व वृद्धि दिखाने वाला बार चार्ट लाल ऊपर की ओर तीर के साथ](revenue-chart-q3.png)

❌ अनुशंसित नहीं: सरल दोहराव
![चार्ट](revenue-chart-q3.png)

संरचित विवरणों का उपयोग करें

![टीम समूह फोटो: सामने की पंक्ति बाएँ से झांग सान, ली सी, वांग वू; पीछे की पंक्ति बाएँ से झाओ लिउ, सुन क़ी, झोउ बा](team-photo.jpg)

HTML आउटपुट

Markdown छवियाँ HTML में परिवर्तित हो जाती हैं:

![Alt पाठ](image.jpg "छवि शीर्षक")

परिवर्तित हो जाता है:

<img src="image.jpg" alt="Alt पाठ" title="छवि शीर्षक">

संदर्भ-शैली छवियाँ:

![Alt पाठ][ref]

[ref]: image.jpg "शीर्षक"

परिवर्तित हो जाता है:

<img src="image.jpg" alt="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