画像を表示させる為の書き方を詳しくお話していきます。
画像表示はimg要素
HTMLで画像を表示させる場合は、「img要素」を使用します。
記述コードは “<img>” となっていて、他とは違い終了タグが存在しません。
代わりに、”src” と “alt” を設定していきます。
まずは完成したコードから見てみましょう。
【完成コード】
<img src=”photo.jpg” alt=”ひょーちゃんの画像”>
srcは画像のファイルパス
srcは「source（ソース：出典）の略称です。
表示させたい画像のファイルパスを指定してあげます。
パスの指定方法には、
・相対パス
・絶対パス
この2パターンがあります。
相対パスとは
相対パスの特徴は、パソコンの中にあるHTMLファイルの場所（フォルダ）を基準に画像を参照します。
使用頻度が高い参照方法となります。
HTMLファイルと同じフォルダにある場合の基準方法
<img src = “photo.jpg” alt = “ひょーちゃんの画像”>
HTMLファイルと同フォルダ内に「photo.jpg」名称の画像ファイルが存在している場合は、srcに画像ファイル名「photo.jpg」と記述することで参照出来ます。
HTMLフォルダの下にある場合の基準方法
<img src = “images/photo.jpg” alt = “ひょーちゃんの画像”>
HTMLファイルが存在するフォルダ内に別フォルダ（images）があり、その中に画像ファイルが存在している場合、先に「images/」と記述することで参照出来ます。
HTMLフォルダの上にある場合の基準方法
<img src = “../images/photo.jpg” alt = “ひょーちゃんの画像”>
HTMLファイルが存在するフォルダとは別のフォルダに（images）があり、その中に画像ファイルが存在している場合、先に「../images」と記述することで参照出来ます。
※ 別フォルダの直下に画像ファイルがある場合は「<img src = “../photo.jpg” alt = “ひょーちゃんの画像”と記述します
altは画像の代替えテキスト
altは「alternative（オルタナティブ：代替の）の略称です。
画像が破損した時にテキストで意味を表示させたり、スクリーンリーダーが代わりに画像を読み上げる際に必要となります。
altが不要（空白）な場合も存在する
ただ装飾する為だけに存在する「無意味」な画像に限っては、altを空白設定にしてあげます。
※ デザイン装飾・背景模様など
理由としては、無意味な画像の情報をスクリーンリーダーが読み上げた際に、ユーザーは「？」と疑問に感じてしまう為です。
img要素で指定する他の属性
img要素に使用することが出来る他の属性を紹介します。
width / height属性
<img src = “photo.jpg” alt =”画像” width = “400” height = “300”>
画像の表示サイズをピクセル単位で指定することが出来ます。
画像サイズの調整はCSSが一般的ですが、HTML側で直接指定することで、ブラウザはレイアウト領域を確保して画像読み込みを行う為、レイアウトのずれ防止に役立ちます。
※ CSSが一般的ですが、役割が異なる為、HTML記述する「width / height属性」は必須です
この後紹介する「srcset / sizes」属性とセットで使用するのがおすすめです。
srcset / sizes属性
<img src = “medium.jpg”
srcset = “small.jpg 400w , medium.jpg 800w , large.jpg 1600w”
sizes = “(max-width:600px) 400px , 800px”
alt = “画像”>
レスポンシブ画像（スマホやタブレット、パソコンなど各デバイスに応じて最適な画像サイズを自動選択）を指定することが出来ます。
・スマホに表示させるには大きすぎる画像
・PCに表示させる画像には小さすぎる画像
この両方をデバイスごとに画像を最適化してくれる便利な機能です。
今回紹介する中で一番難しく感じる属性になる為、少し深まりながら説明していきます。
srcset
デバイスに表示させる画像候補を事前に用意しています。
今回、記述したコードを例とすれば、
srcset = “small.jpg 400w , medium.jpg 800w , large.jpg 1600w”
「400px・800px・1600px の3種類を用意したよ。好きなの使ってね！」という意味になります。ファイルの隣にサイズを記述します。
サイズに関しては、実際の画像と同じサイズを記述してあげます。
sizes
「srcsetに設定した画像候補は、現在のブラウザ上でどれが最適か？」これを判断してあげることが出来ます。
sizes = “(max-width:600px) 400px , 800px”
sizesは表示される幅を教えてくれます。
上の記述コードを例にすると、(max-width:600px)400pxは画面幅が600px以下であれば、画像は400pxで表示されます。それ以外は、800pxで表示されます。と指定しています。
指定してあげるpxは、デバイスによって実用的な目安が存在します。
スマホ画面の場合（～600px）・・
- 画面の表示幅は320～420pxが一般的
- sizesでは、300～400pxと指定してあげる
タブレット画面の場合（600～900px）・・
- 画面の表示幅は600～800pxが一般的
- sizesでは、600～700pxと指定してあげる
PC画面の場合（900px～）・・
- 画面の表示幅は1000～1200pxが一般的
- sizesでは、700～900pxと指定してあげる
それでは先ほどの「srcset」と組み合わせて記述コード例を紐解いていきましょう。
srcset = “small.jpg 400w , medium.jpg 800w , large.jpg 1600w”
sizes = “(max-width:600px) 400px , 800px”
スマホ（幅375px）の場合・・
sizesは、画面600px以下なので400pxで表示させる
その際、解像度は2倍になる為、400px × 2 = 800pxの画像
つまり、srcsetで用意されている800pxの画像「medium.jpg」が最適なんだ！となります。
CSSピクセル（HTML / CSSで扱う見た目上のピクセル）と、物理ピクセル（画面上のドット部分）のピクセル数が異なる為。
スマホは超高解像度なので、CSSの1pxに対して、物理ピクセルが2個必要になる。
PC（幅1200px）の場合・・
sizesは、画面1200px以上なので、デフォルトの800pxで表示させる
その際、解像度は1倍なので800pxの画像
つまり、srcsetで用意されている800pxの画像「medium.jpg」が最適なんだ！となります。
CSSピクセル（HTML / CSSで扱う見た目上のピクセル）と、物理ピクセル（画面上のドット部分）のピクセル数が同じ為。
ただし、HiDPI（超高解像度）のPCは2～3倍になるので注意が必要です。
Retina PC の場合（主にMacBookなど）・・
sizesは、画面1200px以上なので、デフォルトの800pxで表示させる
その際、解像度は2倍になる為、800px × 2 = 1600pxの画像
つまり、srcsetで用意されている1600pxの画像「large.jpg」が最適なんだ！となります。
CSSピクセル（HTML / CSSで扱う見た目上のピクセル）と、物理ピクセル（画面上のドット部分）のピクセル数が異なる為。
Retina PCは超高解像度なので、CSSの1pxに対して、物理ピクセルが2個必要になる。
title属性
<img src = “photo.jpg” alt =”画像” title =”ここが補足情報です”
画像にカーソルを合わせた時のツールチップ（）を表示することが出来ます。
主に補足情報として使います。
loading属性
<img src =”photo.jpg” alt =”画像” loading = “lazy”
画像の読み込み方法を指定することが出来ます。
lazy・・ページスクロール時に画像が近づくと読み込みます
eager・・ページ読み込みと画像を読み込みます
※ デフォルトはブラウザ任せ
ページ読み込み時に一気に画像を読み込まない「lazy」に方が表示速度は速いです。
decoding属性
<img src = “photo.jpg” alt = “画像” decoding = “async”>
ブラウザが画像を表示する（デコード）タイミングを指定することが出来ます。
sync・・画像デコードを同期的に実施。HTML解析を止めて描画する為遅い
async・・画像デコードを非同期で実施。HTML解析を止めず描画する為早い
auto・・ブラウザのデフォルト任せ
一般的に使用するのは「async」です。
理由としては、画像を裏で処理するので、テキストや構造をすぐに表示させることが出来ます。
width / height属性とsrcset / sizes属性は、どちらかのみ使う？
「width / height属性とsrcset / sizes属性は、似ているので両方使うことはない？」と疑問に感じてしまいますが、実際には併用して使うことが推奨されています。
width / height属性の役割
画像の表示領域サイズをブラウザに伝えることが目的です。
その為、縦横比の保持やレイアウトを安定させることが出来ます。
srcset / sizes属性の役割
候補の中から、どの画像ファイルを使うか選ぶのが目的です。
画像サイズや解像度に応じて最適化をさせることが出来ます。
width / height属性とsrcset / sizesを併用したコード記述例
<img “photo-800.jpg”
srcset = ” photo-400.jpg 400w , photo-800.jpg 800w , photo-1600.jpg 1600w “
sizes = “(max-width:600px)400px , (max-width:1200px)800px , 1600px “
width = “800” height = “600”
alt = “画像”
width / height属性で画像の表示領域サイズを確保した上で、srcset / sizes属性でブラウザに最適な画像ファイルを自動選択してあげることが出来ます。
縦横比のレイアウトが安定している状態なので、ずれが起きずに表示してくれます。
コメント