こんにちは、イラスト素材を無料配布しているベジです。
フリー素材のイラストをダウンロードしてもらうために、以前は ZIP 形式にしてリンクを貼っていました。しかし、ZIP 形式だと解凍する手間がかかるので、何か良い方法はないものかと他のフリー素材屋さんを見て回っていました。
有名ないらすとやさんは、サムネイル画像にフルサイズの画像のリンクを貼るだけの対応だったので、私もダウンロードボタンを作る手間を省いて、そのやり方を真似しています。
しかし、調べているうちにHTML5にはdownload属性というものがあり、クリック１回でローカルファイルとして保存できる方法があることを知りました。ZIP 形式だとdownload属性を入れなくても勝手にローカルファイルとして保存されますが、PNG のような画像データにも使えます。
<a href="hogehoge.png" download>hogehoge.pngのダウンロード</a>
<a href="hogehoge.png" download="test.png">test.pngのダウンロード</a>download属性のみの上段のコードの場合は、hogehoge.png がローカルに保存されます。
属性値を設定した下段のコードの場合は、test.png がローカルに保存されます。
逆にdownload属性を入れないと普通に画像データが開いてしまいます。
すんなりダウンロードしてもらうには、download属性は最良の方法かもしれません。
IE以外のブラウザでは、ほぼ機能するようです。
備忘録として記しておきます。
