ウェブサイトに画像を表示する: img タグの使い方

UB3/informatics/html/tag_h

このページの最終更新日: 2024/09/30

  1. 概要: img タグとは
  2. image のサイズを指定する重要性: CLS issue: more than **

広告

概要: img タグとは

ウェブサイトに画像を表示させたい場合には、img タグを用いる。例えば、ここにサイコロの画像があるが、

サイコロ

これは html では次のように記述されている。

<img class="centm150" src="../../images_public/statistics/Dice.png" width="619" height="619" alt="サイコロ">

つまり、img というタグで images_public というフォルダにあるサイコロの画像を参照することで、画像を表示しているわけである。

この例で全て使っているわけではないが、img タグには次のような属性を追加することができる。

class

css で別途クラスを指定し、それを参照している。css には、最大幅、ボーダーの有無などの設定が書かれている。

src

画像のパスを指定する必須要素。

width

画像の幅を指定する。width="200px", height="150px" のように、ピクセルで指定するのが一般的である。本サイトでは、幅は css で指定し、ここには画像の幅をそのまま記入している。

height

画像の高さを指定する。width と同様に設定している。

alt

alternative の略で、画像が表示されないときに、かわりに表示する文字を指定する。

ここで指定した内容が、画像検索の際のタグとして使われるので、指定しておいた方がよい。

loading

loading = "eager" または loading = "lazy" と指定する。指定しないと eager になる。

eager では、イメージが直ちに読み込まれる。lazy では、画像が必要とされるまで (ブラウザで定義されたビューポートからの距離に達するまで) イメージの読み込みを遅延する。通信量を節約し、最初のページ読み込みを早くすることができるので、ほとんどの場合でページの評価にポジティブに作用する (3)。

Javascript が有効になっていないと、読み込みは延期されない (3)。

loading = "lazy" にしておくと、スクロールでその画像が表示されたときに画像が読み込まれるようになる。ページの最初の読み込みが速くなるというメリットがあるが、Google がページをクロールした際、画像がインデックスされないというデメリットがあるようだ。

ただし、これには議論があり、たとえばこの Google サポートページ では Google has repeatedly confirmed that it does index content that it can successfully render. This includes lazy load content. つまりクロールされるとしている。

基本的に、ページの読み込みの速さは訪問者にメリットがあるので、これが SEO に負に働くケースがあっても、Google は今後それを改善していくものと予想される。したがって、このサイトではページ下方にある img には基本的に loading = "lazy" をつけることにしている。

border

border = "1" のようにして、画像に境界線をつける。単位はピクセル。HTML 4.0.1 で既に非推奨。

このサイトでは、基本的に img タグは基本的に以下のルールで記述している。

  • 最大幅を css で指定。
  • width, height は画像のそのままの値を指定。
  • loading = "lazy" を指定する。

image のサイズを指定する重要性: CLS issue: more than **

2021 年春ごろ、Google Search Console を見てみたら CLS issue: more than 0.1 (mobile) というエラーのようなものをみつけた。重大なエラーではないが、ウェブサイトで改善すべき点のようである。調べてみたら画像のサイズに関係する内容だったので、ここに記載しておく。

まず、この CLS とは cumulative layout shift (日本語では「累積レイアウトシフト」？) のことで、ページを読み込んでいるときに、レイアウトが動いた量のことらしい (1)。値が 0.1 未満であることが推奨されており、0.25 を超えると重大な問題として認識される。

問題の多くは、img タグで width と height を指定していないことにある ようだ。つまり、これらが指定されていないと、ブラウザがページを読み込む際に、画像を読み込んでみるまでその大きさがわからない。したがって、画像よりも下にテキストなどがあると、画像が読み込まれるにつれて下にずれていくことになる。これがシフト。

width と height が指定されていれば、ページ読み込みの極めて最初の段階で、画像のためのスペースが確保されるため、このようなシフトが起こらない (2)。どうも、この問題は 2020 年夏から始まっていたようである。


レスポンシブの場合の記述

css で width: 100%; height: auto; が指定してあれば、img タグには元画像のサイズをそのまま含めて良い。

たとえば以下の画像は、もとが 800 x 800 の大きい画像であり、以下のようにソースを書いている。

<img class="cent" src="../../images_public/informatics/Heatmap.png" width="800" height="800" alt="ヒートマップ">

ヒートマップ

しかし、css で

img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

のように最大幅が 100% と指定されているので、このページをスマホで見ても、画像が画面からはみ出すことがない。

2021 年 10 月追記

2021 年 10 月追記に Search Console を見てみたところ、CLS issue の項目が消えていた。見慣れないパラメーターができていた気もするので、他のパラメーターに統合されたのかもしれない。

Google の指針に一喜一憂せず、コンテンツの質を高めるというのは基本。ただ、イメージの大きさ指定はこれからも続けていこうと考えている。

max-width: 100% が効いていなかった

2022 年 3 月に修正。img.cent というクラスを指定していたのだが、これが二重になっていた (css のクラス指定が 2 つあった)。max-width: 100% のあとに、max-width: 500px という古いクラス指定があり、これが上書きしていた。


広告

References

  1. CLS に関する問題: 0.25 超 (パソコン) ってなんですかコレ. Link: Last access 2021/06/26.
  2. 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい. Link: Last access 2021/06/26.
  3. img 画像埋め込み要素. Link: Last access 2021/06/26.

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。

↑