2026年 Markdown 画像記法 完全チートシート：GitHub・Notion・HackMD・Obsidian 4 プラットフォーム対応

長文を読む時間がない人へ：3行まとめ

1. Markdownの画像基本構文は ![代替テキスト](画像URL) で、全プラットフォーム共通
2. 画像サイズの調整方法はプラットフォームごとに異なる。これが最大の落とし穴
3. 画像は「公開アクセス可能な直リンク」が必須。Google Driveの共有リンクは使えない

では、完全なチートシートに入ろう。

基本構文：全プラットフォーム共通

![代替テキスト](https://example.com/image.png)

• 代替テキスト：画像が表示できないときに表示されるテキスト。スクリーンリーダーが読み上げる内容でもある
• 画像URL：直接アクセス可能な画像URLが必要（直リンク）

タイトル付き（ホバー時に表示）：

![代替テキスト](https://example.com/image.png "マウスホバー時のタイトル")

参照形式の構文（同じ画像を繰り返し使う場合に便利）：

![代替テキスト][logo]

[logo]: https://example.com/image.png "タイトル"

各プラットフォームの画像サイズ調整方法

ここがつまずきやすいポイントだ。5つの主要プラットフォームを実際にテストした結果、どれも方法が異なっていた。

プラットフォーム	サイズ調整構文	例
GitHub	Markdownでの調整不可、HTMLが必要	<img src="url" width="300">
HackMD	URL末尾に =幅x高さ を追加	
Notion	ドラッグで調整、構文での制御不可	アップロード後にマウスで枠をドラッグ
Obsidian	altに `	幅または
Typora	HTMLまたはzoomマーカーを使用	<img src="url" style="zoom:50%">

GitHub

GitHubのMarkdownレンダラーは画像サイズ構文を一切サポートしない。唯一の方法はHTMLを使うことだ：

<img src="https://example.com/image.png" width="400" alt="説明テキスト">

GitHubは <img> タグの width、height、align 属性をサポートするが、style 属性はサポートしない（セキュリティ上の理由でフィルタリングされる）。

HackMD

HackMDは独自の拡張構文を採用しており、URL末尾に =幅x高さ を追加する：

![説明テキスト](https://example.com/image.png =300x200)

幅のみ指定し、高さは自動スケーリング：

![説明テキスト](https://example.com/image.png =300x)

この構文はHackMD専用で、他のプラットフォームでは動作しない。

Obsidian

Obsidianの画像サイズ構文は代替テキスト内に記述する：

![説明テキスト|300](https://example.com/image.png)
![説明テキスト|300x200](https://example.com/image.png)

ObsidianはWikiスタイルの内部画像リンクもサポートする：

![[image.png|300]]

Notion

NotionのMarkdownインポートは基本的な画像構文をサポートするが、サイズ調整はNotionのUI上でマウスドラッグでのみ可能だ。構文での制御オプションはない。

また注意点として、Notionは外部画像を自身のCDN（prod-files-secure.s3.us-west-2.amazonaws.com）に再アップロードする。そのため画像元は表示速度に影響しないが、元の画像を更新してもNotion内のバージョンは更新されないことを意味する。

各プラットフォームの画像ホスティング対応状況

すべての画像URLがすべてのプラットフォームで正常に表示されるわけではない。以下は実際のテスト結果だ。

画像ソース	GitHub	HackMD	Notion	Obsidian	Typora
画像ホスティング直リンク（lpic.cc、ImgBBなど）	正常	正常	正常	正常	正常
GitHubリポジトリ内画像	正常	正常	正常	設定が必要	正常
Google Drive共有リンク	表示不可	表示不可	自動再アップロード	不安定	表示不可
Dropbox共有リンク	表示不可	表示不可	自動再アップロード	不安定	表示不可
Base64インライン	対応	対応	非対応	対応	対応

重要：Google DriveやDropboxの共有リンクは画像の直リンクではないため、ほとんどのMarkdownプラットフォームは正しくレンダリングできない。Markdownに画像を埋め込むには、「直リンク」を提供できる画像ホスティングサービスが必要だ。

Hotlinkingポリシー：あなたの画像はブロックされるか？

Hotlinkingとは、自分のWebページで他のサーバー上の画像を直接参照することだ。帯域幅節約のためにhotlinkingをブロックするサービスもある。

サービス	Hotlinking許可	備考
画像ホスティング（lpic.cc、ImgBBなど）	はい	画像ホスティングの核心機能
GitHubリポジトリ	はい（制限あり）	高トラフィック時は速度制限の可能性
Imgur	一部（台湾ではブロック）	2025年以降、台湾IPからのアクセス不可
WordPress.com	いいえ	Refererをチェック
大半のWebサイト画像	いいえ	通常、外部サイトからの参照をブロック

テクニカルライティングにおける画像のベストプラクティス

技術文書やブログを書く際の画像処理の原則をいくつか紹介する。

代替テキストを手抜きしない

<!-- 不合格 -->
![image](url)
![スクリーンショット](url)

<!-- 合格 -->
![GitHub Actionsワークフロー設定画面](url)
![ターミナルにnpm installの成功出力が表示されている](url)

代替テキストの機能：

1. 画像の読み込みに失敗した場合のテキスト説明の表示
2. スクリーンリーダーが読み上げる（アクセシビリティ）
3. 検索エンジンが画像の内容を理解する手がかり（SEO）

画像ファイルの命名

<!-- 不合格 -->
Screenshot 2026-03-15 at 14.32.05.png
IMG_4521.jpg

<!-- 合格 -->
github-actions-workflow-config.png
npm-install-success-output.png

適切な命名をしておけば、半年後でもその画像が何なのか一目でわかる。

画像フォーマットの選択

• スクリーンショット、UI画面：PNG（シャープなテキストがぼやけない）
• 写真、複雑な画像：WebPまたはJPEG（ファイルサイズが小さい）
• アイコン、ロゴ、チャート：SVG（拡大縮小しても劣化しない）
• 操作手順の動的デモ：GIFまたはWebPアニメーション（ただし5MB以下に抑える）

圧縮してからアップロード

どのフォーマットでも、アップロード前に圧縮すること。おすすめツール：

1. Squoosh（squoosh.app）— Google製、ブラウザ内で操作可能
2. TinyPNG（tinypng.com）— PNG/JPEGの一括圧縮
3. ImageOptim（macOS）— ドラッグ＆ドロップで圧縮、画質を維持

クロスプラットフォーム互換の万能記法

Markdownファイルを複数のプラットフォームで正常に表示する必要がある場合、この戦略を使おう：

1. 画像構文：標準の ![alt](url) 構文を使い、プラットフォーム固有のサイズ調整構文は使わない
2. 画像サイズ：アップロード前に画像サイズを調整しておく（幅600〜800px推奨）。構文ではなく事前調整で対応
3. 画像ソース：画像ホスティングの直リンクを使用（例えば lpic.cc は登録不要のアップロードと直リンクを提供）。Google DriveやDropboxの共有リンクは使わない
4. 画像フォーマット：PNGまたはWebP。BMPやTIFFは避ける

ただしlpic.ccは現在、カスタム画像サイズやリアルタイムクロップには対応していないため、アップロード前に画像を処理しておく必要がある。APIでの一括アップロードや動的処理が必要な場合は、CloudinaryやImgur API（台湾以外の地域）などのサービスを検討しよう。

よくある質問 FAQ

Q1：Markdownで画像を中央揃えにできるか？

標準のMarkdown構文は画像の配置をサポートしない。GitHubではHTMLが使える：<p align="center"><img src="url" width="400"></p>。HackMDは {:center} 構文をサポート。NotionとObsidianはUIで調整する。

Q2：Markdownでローカル画像は使えるか？

使える。相対パスで指定する：![alt](./images/photo.png)。ただしこれはローカルエディタ（Typora、Obsidian、VS Code）でのみ有効だ。ドキュメントをWeb上に公開する場合は、画像をホスティングサービスにアップロードして公開URLを取得する必要がある。

Q3：GitHubのREADMEで画像が表示されないのはなぜ？

最も一般的な原因は3つ：(1) 画像URLが直リンクではなく、ログインが必要なリンク；(2) 画像元サーバーがGitHubのhotlinkingをブロックしている；(3) 相対パスが間違っていてリポジトリ内の正しい位置に対応していない。

Q4：HackMDの画像サイズ構文 =300x は他のプラットフォームでも使えるか？

使えない。=幅x高さ 構文はHackMD独自のMarkdown拡張で、GitHub、Notion、Obsidianなどのプラットフォームでは動作しない。ドキュメントをクロスプラットフォームで使う場合は、アップロード前に画像サイズを調整しておくか、HTML <img> タグを使用することを推奨する（GitHubもHackMDもサポート）。

Q5：画像の直リンクと共有リンクの違いは？

直リンク（Direct Link）は画像ファイルを直接指すURLで、通常 .jpg、.png、.webp で終わる。ブラウザで開くと画像だけが表示される。共有リンクはWebページのURLで、開くと画像を含むページが表示される（例：Google Driveのプレビューページ）。Markdownの画像構文は正しくレンダリングするために直リンクが必要だ。

参考資料

• Markdown Guide - Images — Markdown公式画像構文ドキュメント
• GitHub - Basic formatting syntax — GitHub Markdown構文ドキュメント
• HackMD - Supported Markdown Syntax — HackMDサポートのMarkdown構文
• Obsidian - Embed files — Obsidianファイル埋め込みドキュメント
• MDN - HTML img element — HTML imgタグリファレンス