aタグで画像リンクにdownload属性を使用しないほうが良い理由

download属性とは

ブラウザがリンクされたURLをダウンロードとして扱うようにする属性。

例えば以下の画像へのリンクはクリックすると普通に開きますが…

<a href="https://iwb.jp/s/anime.png" target="_blank">https://iwb.jp/s/anime.png</a>

download属性を付けると画像をブラウザで開かずにダウンロードされます。

<a href="https://iwb.jp/s/anime.png" target="_blank" download>https://iwb.jp/s/anime.png</a>

便利そうな属性ですが、デメリットが多いので使用するのはオススメしないです。

download属性を付けているとSafariは初回はダウンロードして良いかポップアップが表示されてしまう。

ダウンロードだけの場合もあるが、パソコンの設定によってはプレビュー表示も起動する。

これだとダウンロードされたことがわかりづらい。

download属性は同一オリジンのURLでないと使用不可です。

例えばiwb.jp内にirasutoya.comの画像への直リンクを貼り付けてdownload属性を付けても機能しません。

この仕様は知らない人が多く、例えばYOSTERは自社のファンキットの画像ファイルはwebusstatic.yo-star.comに置いていますが、各ゲームサイトのファンキットはbluearchive.jpやarknights.jpになっているため、download属性が機能していません。

画像の直リンクにtarget="_blank"が付いていないとユーザーがWebサイトから離脱してしまうので、必ず画像への直リンクはtarget="_blank"を付けてください。

閲覧途中で離脱されてしまうとGoogleアナリティクスなどのWeb解析にも悪影響が出ます。

画像の直リンクは縦横のサイズを1920x1080のように記載しておくと親切です。

サイズの表記がないとユーザーがクリックする前にどのような大きさ(縦横比)の画像なのかわかりません。