Markdown用画像アップロード:GitHubのREADME・ドキュメント・ノートに使える画像共有

画像のMarkdownを取得する

1. 画像をアップロードします。画像をアップロードを押すか、パソコンならCtrl+Vでクリップボードから直接スクリーンショットを貼り付けてください。
2. アップロードが終わったらMarkdownタブを開き、コードをコピーします。
3. ファイルに貼り付けます。

Markdownタブでは、クリックすると元のサイズの画像が開く画像リンクが表示されます:

[![AbC123xYz0](https://yourimageshare.com/ib/AbC123xYz0.png)](https://yourimageshare.com/ib/AbC123xYz0)

リンクなしで画像だけを表示したいときは、内側の部分だけを残し、代替テキストを分かりやすく書き換えてください:

![Settings screen](https://yourimageshare.com/ib/AbC123xYz0.png)

GitHubのREADME・Issue・Wikiで画像を使う

GitHubでは、README、Issue、プルリクエスト、ディスカッション、Wikiに外部の画像を表示できます。Markdownコードを貼り付けると、ページの表示時に画像が現れます。

• サイズを指定するには、GitHubがMarkdown内で使えるHTMLタグを利用します: <img src="https://yourimageshare.com/ib/AbC123xYz0.png" width="400" alt="Screenshot">
• デモ用GIFはREADMEでも動き続けます。詳しくはGIFアップロードをご覧ください。画面録画をGIFにしたい場合は、動画からGIFへの変換ツールが便利です。
• 代替テキストは、スクリーンリーダー向けに画像の内容を説明するもので、画像を読み込めないときにも表示されます。

Obsidian・Notion・ドキュメントサイトで使う

• Obsidian、Typora、VS CodeのプレビューなどのMarkdownエディタは、リンク先の画像を表示します。そのためノートは軽いままで、どのデバイスでも画像を見られます。
• Notion:/imageと入力し、リンクを埋め込むを選んで、直接リンク(Directタブ)を貼り付けてください。
• MkDocs、Docusaurus、Jekyll、Hugo、GitBookで作ったドキュメントサイトでも、同じMarkdownの画像構文で表示されます。

画像をリポジトリの外に置く理由

• リポジトリを軽く保てます。スクリーンショットやGIFは、あとで差し替えても、クローンのたびにずっと数MBずつ容量を増やします。アップロードした画像なら、ページを開いたときにだけ読み込まれます。
• リンクに有効期限はありません。画像は削除するまで保存されます。
• 登録不要で、設定も必要ありません。スクリプトやCIには、無料のアップロードAPIもあります。
• 元の解像度のまま、透かしも入りません。位置情報を含むEXIFデータは、画像を保存する前に削除されます。

よくある質問