[Markdown] リンク付き画像をReference-style linkで短く表記する

(An English translation is available here.)

はじめに

Markdownでリンク付き画像を表示すると、必要な文字列が長くなる傾向があります。
例えば、Travis CIのバッジ（）は次のようになります。

[![Build Status](https://travis-ci.org/travis-ci/travis-web.svg?branch=master)](https://travis-ci.org/travis-ci/travis-web)

（このバッジの例は、Travis CIのEmbedding Status Imagesで紹介されているものです。）

これほど長い文字列だと、例えば表の中でリンク付き画像を使いたい場合に書きづらくなってきます。

OS	Status
Ubuntu

| OS     | Status |
|:------:|:------:|
| Ubuntu | [![Build Status](https://travis-ci.org/travis-ci/travis-web.svg?branch=master)](https://travis-ci.org/travis-ci/travis-web) |

上の例ではバッジは１つですが、仮に１行に２つ以上バッジを並べようとすると、列の区切りの|が一目で分からないぐらい複雑になってきます。
実際の例としては、srz-zumix/iutestのREADME.mdには、多くのバッジを載せた表があります。そのRaw contentはとても複雑です。

どうにか短くできないものでしょうか？

改善案

Reference-style linkを使うと、多少マシになります。次のようになります。

| OS     | Status |
|:------:|:------:|
| Ubuntu | [![travisci-image]][travisci-link] |

[![travisci-image]][travisci-link]と、だいぶ短くなりました。
これなら、１行に２つ３つバッジを並べても大丈夫でしょう。
画像URLとリンクURLは、別の場所に次の２行を書いておきます。

[travisci-image]: https://travis-ci.org/travis-ci/travis-web.svg?branch=master
[travisci-link]: https://travis-ci.org/travis-ci/travis-web

travisci-imageとtravisci-linkは任意の文字列なので、分かりやすい名前をつけるなり、列の区切り文字|が揃うように文字数を調整するなりすれば良いと思います。

おわりに

Qiita上でこの表記法を使った表を置いておきます。この記事のURLの末尾に.mdをつけて、ソースを見てみてください。

OS	Status
Ubuntu

GitHubでもこの表記法は使えます。例としてGitHub Gistを置いておきます。このGistでRawボタンをクリックすると、実際に使っていることが分かります。