閉じる

ホームページ(HTML)に写真、イメージを配置する

HTMLに、写真などのイメージを表示する場合は、<img>要素のタグを使用します。

<img src=”ファイル名”>

srcには、イメージ名とイメージまでのパスを記載します。

<img>タグの設定例

イメージの設定例です。html5などはこのように設定します。
<img src="bird0.jpg" alt="インコ" width="640" height="480">

XHTMLの場合

<img src="bird0.jpg" alt="インコ" width="640" height="480" />

XHTMLの場合

XHTMLでは、一番最後が半角スペースとスラッシュが付きます。

alt属性について

イメージが何かの原因で表示されない場合、イメージの代替となる説明テキストを設定します。それがalt属性です。
SEOに影響する場合がありますので、写真やイラストなどは設定するようにしましょう。

幅(width)と高さ(height)のサイズ指定について

通常、img 要素の幅のwidthと高さのhaightの属性は、ページのローディン時間に関係あると言われていますので指定するべきでしょう。

しかし、スマートフォン対応のレスポンシブデザインは、幅と高さを両方入力すべきではない場合があります。
イメージがはみ出たりする原因になるからです。
※W3cの扱いも必須ではありません。

以前は、バージョンの古いieブラウザの対応で幅と高さの入力は必要でした。
現在はブラウザ表示に影響することもなく、両方の値を記載すると、余計な手間が増える場合があります。

効率的よくページ制作するため、幅だけ、widthのみなど、表示するイメージによって設定しましょう。

※幅と高さは最終的にCSSで制御する事も可能です。

ピックアップ記事

  1. 先日、Windows11の機能や無償アップグレードなどがMicrosoftから発表されました。…
  2. 2021年WEB制作やネットショップで利用できる補助金について2021年の補助金の公募が開始…
  3. Google Search Console(サーチコンソール)で、「パンくずリスト「WebサイトUR…
ページ上部へ戻る