記事に画像を挿入する方法

Obsidianで記事を書いていると、スクリーンショットや図を貼りたくなる。vault の設定では添付ファイルが assets/ に保存されるようになっているので、そのまま使える。

Obsidianでの画像の貼り付け

画像ファイルをObsidianのエディタにドラッグ&ドロップするか、クリップボードにコピーした画像を Cmd+V で貼り付けると content/assets/ に自動保存される。

Obsidian上では以下のようなwikilink形式で参照される：

![スクリーンショット 2026-05-28.png](/posts/スクリーンショット 2026-05-28.png/)

ブログ記事での書き方

ブログのHTMLとして出力するには、通常のMarkdown画像記法で書く：

![説明テキスト](/assets/スクリーンショット.png)

Obsidianの ![...](/posts/.../) 記法はHTMLに変換されないため、ブログ用には ![alt](/assets/filename.png) の形式を使う。Obsidianのプレビューでも両方表示されるので、慣れたらどちらを使っても問題ない。

画像の最適化

ファイルサイズが大きい画像はページ速度に影響する。貼り付け前に圧縮しておくと良い。

• macOS: プレビューアプリで「書き出す」→ファイルサイズを指定
• コマンドライン: sips -Z 1200 image.png（長辺を1200pxに）
• WebP変換: ffmpeg -i input.png output.webp でさらに軽量化できる

代替テキストを書く

![代替テキスト](/assets/image.png) の「代替テキスト」部分はSEOとアクセシビリティに影響する。画像の内容を端的に説明する文章を書くこと。空にしてはいけない。