[Qiita] 巨大な画像のような重い画像を記事に載せたいときにサムネイル画像を使う方法

問題

重い画像を記事に載せたいときがある。
Qiitaに付属している画像アップロード機能は1MiBの画像までアップロードでき、外部のURIを使えるのならばこの1MiB制限も無くなる。
このようなMiB級の重い画像を記事に載せたいとき、普通に

![代替テキスト](重い画像.png)

のように書くと、

<a href="重い画像.png" target="_blank"><img src="重い画像.png" alt="代替テキスト" style="max-width:100%"></a>

に相当するHTMLが生成され、重い画像を意図せず読者にダウンロードさせることになり忍びない。
一方で、単に画像へのリンクを貼るだけというのも味気ないので、記事には容量が軽いサムネイル画像を載せておいて、クリックで元画像を開けるようにしたい。

解決策

自前で軽いサムネイル画像を作成しておき、サムネイル画像をQiitaにアップロードしたら次のようなMarkdownを書く。

[![代替テキスト](サムネイル画像.png)](重い画像.png)

これは以下に相当するHTMLを生成するので、

<a href="重い画像.png" target="_blank"><img src="サムネイル画像.png" alt="代替テキスト" style="max-width:100%"></a>

読者は意図せず重い画像をダウンロードせずに済む。

使用例

拙記事で使ったもの。

[![状態遷移図](https://qiita-image-store.s3.amazonaws.com/0/106760/d46f5420-8ffa-0e82-fdd4-f2250c5230d5.png)](https://qiita-image-store.s3.amazonaws.com/0/106760/6ff8132d-04f3-1a92-668f-c0367f4f1d2e.png)

この画像の元画像は431KiBなのでサムネイル画像を使う意味はあまり無いのだが、MiB級でなくても、この規模の画像が何枚も連続するような記事ならばサムネイル画像を使うのは一考の余地があるかと思う。