गाइड

Markdown इमेज सिंटैक्स का पूरा चीट शीट 2026: GitHub, Notion, HackMD समेत 4 प्लेटफॉर्म speed reference

प्रकाशित15/3/20268 min read

साझा करें

Long article पढ़ने का समय नहीं? 3-liner summary

Markdown image का basic syntax है ![alt text](image URL) — हर platform support करता है
Image size adjust करने का तरीक़ा हर platform अलग है — यही main trap है
Image "publicly accessible direct link" होनी चाहिए — Google Drive share link नहीं

ठीक है, अब complete cheat sheet।

Basic Syntax — सब जगह काम करता है

![alt text](https://example.com/image.png)

alt text: image load fail होने पर text दिखता है, screen readers इसे पढ़ते हैं (accessibility + SEO)
image URL: directly accessible image URL (direct link)

Title add करना (hover पर दिखता है):

![alt text](https://example.com/image.png "Hover title")

Reference-style syntax (same image बार-बार use करनी है):

![alt text][logo]

[logo]: https://example.com/image.png "Title"

Platform-specific Image Sizing

यही वो section है जहाँ developers सबसे ज़्यादा stuck होते हैं। 5 major platforms पर real testing के आधार पर:

Platform	Size adjustment syntax	Example
GitHub	No Markdown sizing, HTML only	`<img src="url" width="300">`
HackMD	URL के बाद `=WxH`	`![alt](url =300x200)`
Notion	Drag to resize, no syntax	Upload, drag edge
Obsidian	`\|W` या `\|WxH` in alt	`![alt\|300](url)`
Typora	HTML या zoom style	`<img src="url" style="zoom:50%">`

GitHub

GitHub का Markdown renderer Markdown image sizing support नहीं करता। एकमात्र तरीक़ा HTML:

<img src="https://example.com/image.png" width="400" alt="description">

GitHub <img> tag का width, height, align support करता है पर style attribute नहीं (security filter)।

Indian developers के लिए common use case — README पर project screenshots Hindi alt text के साथ। GitHub पूरा UTF-8 support करता है, Devanagari text alt में fine।

HackMD

HackMD custom extended syntax use करता है:

![description](https://example.com/image.png =300x200)

सिर्फ़ width, height auto-scale:

![description](https://example.com/image.png =300x)

ये syntax HackMD-only है, दूसरी जगह काम नहीं करेगा।

Obsidian

Obsidian alt text में size लिखता है:

![description|300](https://example.com/image.png)
![description|300x200](https://example.com/image.png)

Wiki-style internal images:

![[image.png|300]]

Obsidian PKM (Personal Knowledge Management) users के बीच popular — UPSC aspirants, research scholars, Hindi content creators जो Zettelkasten method follow करते हैं, अक्सर उसे use करते हैं।

Notion

Notion Markdown import basic syntax support करता है, पर sizing सिर्फ़ UI drag से। कोई syntax option नहीं।

Important note: Notion external images को अपने CDN पर re-upload करता है (prod-files-secure.s3.us-west-2.amazonaws.com)। यानी source image speed matter नहीं करती display पर, पर original image update करने से Notion copy automatic update नहीं होगी।

Indian enterprises और startups Notion heavy use करते हैं (Flipkart, Razorpay जैसी companies में) — team documentation के लिए यह behavior samjhana zaroori है।

Platform × Image Source Compatibility

हर URL हर platform पर काम नहीं करता। Tested results:

Image source	GitHub	HackMD	Notion	Obsidian	Typora
Image host direct (lpic.cc, ImgBB)	OK	OK	OK	OK	OK
GitHub repo image	OK	OK	OK	Setup needed	OK
Google Drive share link	No	No	Auto-reupload	Unstable	No
Dropbox share link	No	No	Auto-reupload	Unstable	No
Base64 inline	Yes	Yes	No	Yes	Yes

Key point: Google Drive और Dropbox share links image direct links नहीं हैं। ज़्यादातर Markdown platforms इन्हें render नहीं करते। Markdown में image embed करने के लिए "direct link" देने वाला image hosting चाहिए।

Hotlinking — क्या आपकी image block होगी?

Hotlinking = अपने webpage पर किसी और के server की image direct embed करना। कुछ services bandwidth बचाने के लिए hotlinking block करते हैं।

Service	Hotlinking allowed	Notes
Image hosts (lpic.cc, ImgBB)	Yes	यही service का core है
GitHub repos	Yes (with limits)	High traffic पर throttling
Imgur	Partial	कुछ regions में restricted
WordPress.com	No	Referer check करता है
Most websites	No	Non-site references block

Indian Developer / Writer के लिए practical tips

Hindi alt text best practices

अगर आपका project Hindi audience के लिए है:

![UPI payment flow diagram दिखाता स्क्रीनशॉट](image-url)
![Razorpay integration के setup steps वाला screenshot](image-url)

Benefits:

Hindi screen readers accessibility
Hindi search queries पर SEO ranking (for public docs)
Hindi-speaking team members को bilingual context

पर filename हमेशा English-kebab-case में रखिए — upi-payment-flow.png, Hindi-named files server-side encoding issues करती हैं।

Tech Writing Best Practices

Alt Text पर कंजूसी नहीं

<!-- Fail -->
![image](url)
![screenshot](url)

<!-- Pass -->
![GitHub Actions workflow configuration page](url)
![Terminal showing npm install success output](url)
![UPI app dashboard में transaction history screen](url)

Alt text functions:

Image load fail पर text display
Screen readers read करते हैं (accessibility)
Search engines image content समझते हैं (SEO)

Filename Convention

<!-- Fail -->
Screenshot 2026-03-15 at 14.32.05.png
IMG_4521.jpg

<!-- Pass -->
github-actions-workflow-config.png
npm-install-success-output.png
razorpay-integration-step-1.png

6 महीने बाद भी filename से पता चले — क्या image है।

Format Selection

Screenshots, UI captures, Hindi text images: PNG (text sharp रहेगा)
Photos, complex images: WebP या JPEG (smaller files)
Icons, logos, charts: SVG (zoom पर distort नहीं होता)
Operation flows: GIF या WebP animation (5 MB के अंदर रखिए)

Pre-upload Compression

Format कोई भी हो, upload से पहले compress करिए। Recommended tools:

Squoosh (squoosh.app) — Google का web tool, browser में
TinyPNG (tinypng.com) — batch PNG/JPEG
ImageOptim (macOS) — drag-drop lossless
Caesium (Windows) — GUI batch compression

Cross-platform Universal Approach

अगर आपका Markdown document कई platforms पर render होना है:

Syntax: Standard ![alt](url) ही use करिए, platform-specific sizing नहीं
Image size: Upload से पहले image dimensions adjust (width 600-800 px recommended), syntax से control नहीं
Image source: Image host direct links use करिए (जैसे lpic.cc registration-free upload + direct link देता है), Drive/Dropbox share links से बचें
Format: PNG या WebP, BMP/TIFF avoid

पर ध्यान रखिए, lpic.cc अभी custom image resizing या runtime cropping support नहीं करता — upload से पहले images ready करनी होंगी। API batch upload या dynamic processing चाहिए तो Cloudinary जैसी services consider करिए।

Indian Context Use Cases

Case 1: Hindi YouTube creator GitHub पर tutorial repo maintain कर रहा है। README में Hindi descriptive alt text + screenshots image host पर upload करके embed। GitHub repo images भी work करती हैं, पर image host से CDN faster है।

Case 2: UPSC aspirant Obsidian में Prelims notes बना रहा है। Obsidian wiki-style links (![[ncert-map-rajputs|400]]) perfect हैं। Local vault, Hindi file names mostly fine (Obsidian UTF-8 handles)।

Case 3: Startup founder Notion में product specs documenting कर रहा है। External images auto-reupload होंगी Notion CDN पर। Public sharing के लिए original image host link preserve करिए अलग से।

Case 4: Tech writer HackMD पर Hindi/English bilingual documentation लिख रहा है। HackMD size syntax (=300x200) convenient, पर export करते वक़्त यह syntax दूसरी platforms पर टूटेगा। Cross-compatibility चाहिए तो pre-sized images।

Case 5: OSS maintainer GitHub README international contributors के लिए। HTML <img width=""> universal approach। GitHub भी compatible, मज़बूती।

FAQ

Q1: Markdown में image center करना possible है?

Standard Markdown में नहीं। GitHub पर HTML: <p align="center"><img src="url" width="400"></p>। HackMD में {:center} syntax। Notion/Obsidian UI-based adjustment।

Q2: Markdown में local image use कर सकते हैं?

हाँ, relative path से: ![alt](./images/photo.png)। पर ये सिर्फ़ local editors (Typora, Obsidian, VS Code) पर काम करता है। Web पर publish करने के लिए image host पर upload करके public URL ज़रूरी।

Q3: GitHub README पर image क्यों नहीं दिख रही?

3 common reasons: (1) URL direct link नहीं, login-required link है; (2) Image host GitHub hotlinking block करता है; (3) Relative path गलत, repo में actual location से match नहीं।

Q4: HackMD का `=300x` syntax दूसरी platforms पर काम करता है?

नहीं। =WxH HackMD custom Markdown extension है, GitHub, Notion, Obsidian में कुछ नहीं होगा। Cross-platform documents के लिए pre-upload image sizing + HTML <img> tag (GitHub + HackMD दोनों support करते हैं)।

Q5: Direct link और share link में फ़र्क़ क्या है?

Direct link = image file पर direct URL, usually ending .jpg, .png, .webp में। Browser खोलने पर सिर्फ़ image। Share link = webpage URL जिसमें image embedded है। Google Drive preview page। Markdown image syntax direct link ही चाहिए।

Q6: Hindi filename वाली images कैसे handle करूं?

Filename English-kebab-case में रखिए (upi-flow.png), URL encoding issues avoid। Alt text में Hindi description रख सकते हैं proudly। Best of both worlds।

Q7: Notion में external image host का benefit है?

Original image update करते रहना है तो external host better है (Notion auto-reupload करता है, update propagate नहीं)। Static reference के लिए Notion native upload simpler।

संदर्भ सामग्री

Markdown Guide - Images — official Markdown image syntax
GitHub - Basic Formatting Syntax — GitHub Markdown docs
HackMD - Supported Markdown Syntax — HackMD features
Obsidian - Embed files — Obsidian embedding docs
MDN - HTML img element — HTML img reference

#Markdown#GitHub#Notion#HackMD#image syntax#technical writing

लेखक

Mia Huang

दक्षता विशेषज्ञ

त्वरित गाइड और उत्पादकता टिप्स