スマホやRetina対応するためのイメージタグの記述方法

スマホやRetina対応するためのイメージタグの記述方法を紹介します。
例えば、パソコンとスマートフォンで画像を切り替えて、かつRetinaディスプレイ対応をしたい時に便利な方法です。

1. 基本的なイメージタグの記述方法
2. Retinaディスプレイに対応するためのイメージタグの記述方法
3. スマートフォンでは別の画像を表示したい時のイメージタグの記述方法

基本的なイメージタグの記述方法

まずはイメージタグの基本的な記述方法を紹介します。

<img src="example.jpg" alt="example" >

イメージタグには、画像URLを指定するsrc属性以外にも特徴的な属性がいくつかあります。

基本的にはsrc属性の他にalt属が指定されていれば問題ないでしょう。

イメージタグのSEO対策

SEO対策をする場合はイメージタグのalt属性に、画像の代わりとなるテキストを指定することで、その画像が何の画像かを示すことができます。
逆に、関係ない装飾的な画像の場合はalt属性の中身を空にします。

Retinaディスプレイに対応するためのイメージタグの記述方法

Retinaディスプレイに対応するためには、srcset属性を使用します。
次のコードはRetinaディスプレイとそうでないディスプレイで表示する画像を分ける場合の記述方法です。

<img src="example.jpg" srcset="example.jpg 1x, example@2x.jpg 2x" alt="">

example.jpg 1x と指定することで、一般的なディスプレイで表示する画像を指定します。
続いて、「,（カンマ）」で区切って example@2x.jpg 2x と指定することで、Retinaディスプレイで表示する画像を指定します。
3倍、4倍のディスプレイを指定する場合は xxx.jpg 3x や xxx.jpg 4x と指定します。

スマートフォンでは別の画像を表示したい時のイメージタグの記述方法

スマートフォンでは別の画像を表示したい時はよくあります。
そう言った時には picture タグにブレイクポイントを指定して、パソコンとスマートフォンで表示する画像を切り替えます。
例えば、ブレイクポイントが768pxの場合は次のコードを追加します。

<picture>

  <source media="(min-width: 768px)" srcset="example.jpg 1x, example@2x.jpg 2x"/>

  <img src ="example_sp.jpg" alt="">

</picture>

picture タグの中に source と img を追加。
source のmedia属性にブレイクポイントを指定。合わせてRetinaディスプレイの指定も追加します。
次に、imgタグにスマートフォンで表示する画像を指定しますが、スマートフォンではRetinaディスプレイが主流なので、ここではRetinaディスプレイ対応の画像を１つだけ指定します。

まとめ

スマホやRetina対応するためのイメージタグの記述方法を紹介しました。