【HTML5】img要素で画像を表示してみよう

img要素は画像をブラウザに表示するための要素です。

画像には様々な種類(jpegpnggifなど)があり、多くの種類をimg要素で表示することが可能です。

また、画像はひと目で雰囲気を伝えるための有効な手段ですが、文章より容量が大きく、読み込むまでに時間が必要な場合があります
そのため、大きいサイズの画像は圧縮して容量を小さくすることをお勧めします。基準としては数十KB程度か、大きくても100KB程度に収めるように調整しましょう。

同様に、たくさんの画像を一度に表示させる際も注意が必要です。具体的にはJavaScriptを使用して、画面に表示される領域に入ったら読み込みを行う遅延読み込み(Lazy Loading)を行うのが現在最も効果的な手段です。

この学習ページでは、img要素の使い方について説明しますが、実際には上記の点にそれぞれ考慮する必要があります。

理解度チェック

  • なぜ画像の圧縮が必要になりますか?
  • 多くの画像を一度に表示する場合、どの様な問題が発生する可能性がありますか?

img要素の使い方

最初に使い方について簡単に説明します。

img要素には閉じタグがありません

src属性に画像の場所を示すためのパスを設定し、alt属性に画像の説明を設定します。


<img src="https://picsum.photos/200/300" alt="ランダムで表示される画像です">
    
ランダムで表示される画像です

src属性について

img要素のsrc属性には画像の場所を示すためのパスを設定します。
このパスは画像を特定できるURLで指定することができます。また、【CSS】背景に画像やグラデーションを表示しよう!background属性の使い方と意識する点について(前篇)で記述しているように相対パスで指定することができます。

この例では、https://picsum.photos/200/300というURLを指定して画像を表示しています。
このURLは画像をランダムで取得できるサービスで、https://picsum.photosのURLに画像の横幅(width)や高さ(height)を追記することで、そのサイズの画像を返却してくれます。
今回のURLでは、横幅200px、高さ300pxの画像を取得しています。

alt属性について

alt属性には画像の説明文を設定します。

ここに設定する内容は、画像の読み込みに失敗した場合に表示する代替テキストであったり、視覚障害のある利用者に画像の内容を伝えるための内容になります。
また、画像情報を収集するロボットが画像の内容を把握するためにも使用するため、具体的な画像の説明を記述する必要があります

遅延読み込みについて

loading属性にlazyを指定することで、遅延読み込みを行うことができます。
2021年5月時点では、Chrome、Safari、Edge、Operaが対応していますが、Safariは対応していません。

各ブラウザの対応状況についてはCan I Useでご確認ください。


<img src="https://picsum.photos/200/300" alt="ランダムで表示される画像です" loading="lazy">
    

理解度チェック

  • img要素を使用して画像を表示してみましょう!
  • img要素のsrc属性に相対パスで指定した画像を表示してみましょう!

横幅(width)と高さ(height)を指定する

画像の横幅と高さを指定する方法は2つあります。

  • 要素のwidth属性、height属性を指定する
  • CSSのwidth属性、height属性で指定する

要素の属性で指定する

img要素のwidth属性とheight属性を使用して画像の大きさを指定します。

この方法では、指定する値はピクセル(px)値のみになります
次のように指定することで、横幅200px、高さ300pxで画像領域が確保されます。


<img src="https://picsum.photos/200/300" 
          alt="ランダムで表示される画像です" 
          loading="lazy" 
          width="200" 
          height="300">
    

CSSの属性で指定する

CSSのwidth属性とheight属性で画像の大きさを指定します。

この方法では、ピクセル(px)値以外にパーセント(%)値なども指定することができます
次のように指定することで、横幅100%、高さauto(自動)で表示されます。


img {
    width: 100%;
    height: auto;
}
    

理解度チェック

  • 要素の属性を使って画像の大きさを指定してみましょう!
  • CSSの属性を使って画像の大きさを指定してみましょう!

利用できる画像の形式

jpegpngなど画像には複数の形式があります。

古くから使用されている形式のものもあれば、新しく使用されるようになった形式もあるため、ブラウザごとに使用できるものとできないものがあります。

ここでは、より一般的な画像の種類について記述します。

略称 MIMEタイプ 拡張子 概要
GIF image/gif .gif ジフと発音します。簡易的なアニメーションを表現することができます。
JPEG image/jpeg .jpg,.jpeg,.pjpeg,.pjg,.jfif 現在最もよく使用されている形式で、ジェイペグと発音します。圧縮率が高いので画像サイズを小さくしやすいですが、不可逆圧縮といって一度圧縮した画像は元に戻せません。
PNG image/png .png 透過画像を使用する場合や元の画像をノイズなく表示させたい場合に適しています。ピン(グ)と発音します。主にアイコンやロゴの表示で使用します。
SVG image/svg+xml .svg 画像サイズが大きくなっても劣化しません。そのためアイコンなどによく使用されます。これはSVGがベクター画像(画像データを座標で表現したもの)であるためです。
WebP image/webp .webp Googleが近年新しく開発している形式で、GIF、JPEG、PNGよりはるかに優れた形式になります。IEなどの古いブラウザは対応していませんが、近年ではそれらのブラウザを無視してもさほど問題ないとし、使用される機会は増えています。

理解度チェック

  • JPEGとPNGの違いについて説明してください。
  • SVG画像について説明してください。
  • WebP画像について説明してください。

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。