How to Embed GIFs in GitHub README

त्वरित शुरुआत

अपने README में AgentGIF demo जोड़ने का सबसे तेज़ तरीका:

<p align="center">
  <a href="https://agentgif.com/YOUR_ID">
    <img src="https://media.agentgif.com/YOUR_ID.gif" alt="demo" width="800">
  </a>
</p>

YOUR_ID को अपने GIF की 8-अक्षर ID से बदलें। यह एक केंद्रित, चौड़ाई-सीमित GIF बनाता है जो विवरण पेज से लिंक करता है।

1. Markdown Embed

मानक Markdown चित्र सिंटैक्स। सरल लेकिन बाईं-संरेखित और असीमित चौड़ाई:

[![Demo](https://media.agentgif.com/ID.gif)](https://agentgif.com/ID)

फायदे: शुद्ध Markdown, हर जगह काम करता है।
नुकसान: बाईं-संरेखित, चौड़े स्क्रीन पर पूर्ण चौड़ाई।

2. केंद्रित HTML Embed (अनुशंसित)

GitHub README फ़ाइलें HTML का एक उपसेट समर्थन करती हैं। नियंत्रित चौड़ाई के साथ केंद्रित GIF के लिए इसका उपयोग करें:

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="project demo" width="800">
  </a>
</p>

यह क्यों काम करता है:

• align="center" — centers the block on GitHub
• width="800" — constrains maximum width (scales down on mobile)
• <a> wrapper AgentGIF विवरण पेज से लिंक करता है
• alt पाठ पहुंच और SEO के लिए demo का वर्णन करता है

यह अधिकांश ओपन-सोर्स प्रोजेक्ट द्वारा README demo के लिए उपयोग किया जाने वाला प्रारूप है।

कैप्शन के साथ

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
  <br>
  <em>Recording with <a href="https://agentgif.com">AgentGIF</a></em>
</p>

3. iframe Embed

<iframe src="https://agentgif.com/embed/ID/" width="800" height="500" frameborder="0"></iframe>

नोट: GitHub README फ़ाइलों से <iframe> tags हटा देता है। इस तरीके का उपयोग केवल दस्तावेज़ीकरण साइटों (Docusaurus, MkDocs, VitePress) और ब्लॉग पोस्ट के लिए करें।

4. Script Widget

<div data-agentgif="ID"></div>
<script src="https://agentgif.com/widget.js" async></script>

नोट: GitHub <script> tags हटा देता है। अपनी खुद की वेबसाइट या scripts की अनुमति देने वाली दस्तावेज़ीकरण साइटों के लिए उपयोग करें।

5. Badge Embed

अपनी badge पंक्ति में एक कॉम्पैक्ट SVG badge जोड़ें:

[![AgentGIF demo](https://agentgif.com/badge/ID.svg)](https://agentgif.com/ID)

अन्य badge के साथ मिलाएं:

[![PyPI](https://img.shields.io/pypi/v/mypackage)](https://pypi.org/project/mypackage/)
[![AgentGIF demo](https://agentgif.com/badge/ID.svg)](https://agentgif.com/ID)

6. oEmbed

oEmbed समर्थन करने वाले प्लेटफॉर्म (Notion, Slack, Discord) में AgentGIF URL पेस्ट करें। प्लेटफॉर्म embed मेटाडेटा स्वतः खोजता है और एक समृद्ध पूर्वावलोकन रेंडर करता है।

Demo कहां रखें

README में GIF demo की सर्वोत्तम स्थिति:

सबसे प्रभावी स्थान README के शीर्ष के पास है, badge के ठीक बाद। पहली बार आने वाले आगंतुक सेकंड के भीतर तय करते हैं कि पढ़ना जारी रखें या नहीं — एक अच्छी तरह से बनाया गया GIF demo तुरंत संप्रेषित करता है कि आपका प्रोजेक्ट क्या करता है।

आकार और प्रदर्शन

अनुशंसित आयाम

फ़ाइल आकार दिशानिर्देश

• 500 KB से कम: आदर्श — तुरंत लोड होता है
• 500 KB – 2 MB: अच्छा — अधिकांश कनेक्शन के लिए स्वीकार्य
• 2 – 5 MB: Use carefully — add loading="lazy"
• 5 MB से अधिक: छोटे क्लिप में विभाजित करने पर विचार करें

GitHub सीमाएं

GitHub का Markdown रेंडरर HTML को sanitize करता है। जानें क्या अनुमत है:

फ़ाइल आकार सीमा: GitHub बाहरी URL से 10 MB तक की चित्र serve करता है। AgentGIF GIF media.agentgif.com (Cloudflare R2 CDN) से serve होते हैं, इसलिए GitHub-side की कोई caching सीमा नहीं है।

सर्वोत्तम प्रथाएं

1. Write descriptive alt text — alt="jq demo showing JSON pretty-printing and field extraction" not alt="demo"
2. हमेशा विवरण पेज से लिंक करें — <img> को <a> tag में लपेटें ताकि दर्शक पूर्ण-आकार GIF और मेटाडेटा देख सकें
3. संक्षिप्त रखें — 5-15 सेकंड के demo सबसे प्रभावी हैं। लंबी रिकॉर्डिंग दर्शकों को खो देती है।
4. सफल पथ दिखाएं — टूल को काम करते हुए दिखाएं, त्रुटि प्रबंधन नहीं
5. डार्क थीम उपयोग करें — डार्क terminal थीम GitHub की सफेद और डार्क पृष्ठभूमि पर बेहतर दिखती हैं
6. अपनी tape फ़ाइल को version करें — README के साथ .tape फ़ाइल commit करें ताकि कमांड बदलने पर आप पुनः रिकॉर्ड कर सकें