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

UB3/informatics/html/tag_h

このページの最終更新日: 2021/10/08

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

広告

概要: img タグとは

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

サイコロ

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

<img class="cent" src="../../images_public/statistics/Dice.png" width="150" alt="サイコロ画像">

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

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

class

css で別途クラスを指定し、それを参照している。

src

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

width

画像の幅を指定する。width="200px", height="150px" のように、ピクセルで指定するのが一般的である。

height

画像の高さを指定する。

alt

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

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

loading

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

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

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


広告

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


広告

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.

コメント欄

各ページのコメント欄を復活させました。スパム対策のため、以下の禁止ワードが含まれるコメントは表示されないように設定しています。レイアウトなどは引き続き改善していきます。「管理人への質問」「フォーラム」へのバナーも引き続きご利用下さい。

禁止ワード: http, the, м (ロシア語のフォントです)


このページにコメント

Name:


Comment:



これまでに投稿されたコメント

Date Name Comment