HirashimaスマホやRetina対応するためのイメージタグの記述方法を紹介します。パソコンとスマートフォンで画像を切り替えて、かつRetinaディスプレイ対応をしたい時に便利な方法です。基本的なイメージタグの記述方法まずはイメージタグの基本的な記述方法を紹介します。>イメージタグには、画像URLを指定するsrc属性以外にも特徴的な属性がいくつかあります。src=””ソース表示する画像のURLを指定します。alt=””オルト画像の代わりとなるテキストを指定します。title=””タイトル画像の補足的な情報を指定します。指定した内容は、画像にホバーした時にも表示されます。width=””ワイド画像の幅を指定します。height=””ハイト画像の高さを指定します。画像の境界線を指定します。基本的にはsrc属性の他にalt属が指定されていれば問題ないでしょう。イメージタグのSEO対策SEO対策をする場合はイメージタグのalt属性に、画像の代わりとなるテキストを指定することで、その画像が何の画像かを示すことができます。逆に、関係ない装飾的な画像の場合はalt属性の中身を空にします。Retinaディスプレイに対応するためのイメージタグの記述方法Retinaディスプレイに対応するためには、srcset属性を使用します。次のコードはRetinaディスプレイとそうでないディスプレイで表示する画像を分ける場合の記述方法です。alt="">srcset=””ソースセット画像ファイルをカンマ区切りで指定することで、ディスプレイに合わせた画像を表示することができます。指定することで、一般的なディスプレイで表示する画像を指定します。指定することで、Retinaディスプレイで表示する画像を指定します。スマートフォンでは別の画像を表示したい時のイメージタグの記述方法スマートフォンでは別の画像を表示したい時はよくあります。タグにブレイクポイントを指定して、パソコンとスマートフォンで表示する画像を切り替えます。ブレイクポイントが768pxの場合は次のコードを追加します。media属性にブレイクポイントを指定。合わせてRetinaディスプレイの指定も追加します。次に、imgタグにスマートフォンで表示する画像を指定しますが、スマートフォンではRetinaディスプレイが主流なので、ここではRetinaディスプレイ対応の画像を1つだけ指定します。まとめスマホやRetina対応するためのイメージタグの記述方法を紹介しました。