【HTML】クリックするとダウンロードできる画像の作り方

よくある仕様…かどうかは分かりませんが、
「画像クリックでその画像をダウンロードする」
というのは実はHTMLだけで簡単に実装できます。

今回は本当に簡単なので早速サンプルコードです。

サンプルコード

<!-- クリックするとダウンロードできる画像の例 -->
<html>
<body>
  <!-- aタグ
    href：画像のURL
    download：ダウンロード時のファイル名
  -->
  <a href="/hoge/sample.jpg" download="sample.jpg">
    <!-- imgタグ
      aタグ内に書くと画像がリンクになる
    -->
    <img src="/hoge/sample.jpg">
  </a>
</body>
</html>

URL(/hoge/sample.jpgの部分)を置き換えればコピペで使えると思います。

※なお、ブラウザーがダウンロードをどのように扱うかは、ブラウザー、ユーザーの設定、その他の要因によって異なるのでご注意ください。

解説的な何か

上記コードのコメントに一通り書いたつもりですが、一応解説しておきます。

今回の仕組みのポイントは２つです。

１つ目は、リンククリックでダウンロードを行う点です。
アンカーつまり他要素へのハイパーリンクは<a>タグで書くことができるのですが、<a>タグにはdownloadという属性が存在します。
これを設定すると、リンクをクリックした際にダウンロードさせることが可能となります。

２つ目は、リンクを文字列ではなく画像に設定する点です。
例えば<a>aaa</a>等と記載するとaaaがリンクになるのですが、<a></a>の中に画像つまり<img>タグを設定すると画像がリンクとなります。

この２つを組み合わせると、「画像クリックでその画像をダウンロードする」が実現できるようになります。

今回の記事は以上となります。