基礎10. img要素-画像を表示させる

src属性

画像の場所を相対パスまたは、絶対パスで指定します。
必須属性ですので省略できません。
相対パスと絶対パスは、基礎11. 絶対パスと相対パスで詳しく解説します。

width属性、height属性

img要素は、画像を表示するためのフレーム（枠）というタグです。
そのため、width属性とheight属性を指定しないと、画像が読み込まれるまで、幅、高さがない状態で表示します。width属性とheight属性を指定することで、画像が読み込まれるまでの間、レイアウトの崩れが発生しません。ちなみにCSSのwidthプロパティ、heightプロパティより、属性のほうが先に処理を行うことも重要なポイントです。

表示パフォーマンスの点でも、width属性とheight属性を指定しないと、ブラウザは画像が読み込まれてから画像の幅、高さを計測して表示するため、指定したほうが表示スピードが向上します。
必須属性ではありませんが、記述すべき属性です。 属性の値の単位は、ピクセルで指定します。ただし、単位（px）をつけません。pxを付けると無効化されます。

width属性、height属性を指定するとよいタグは、他にiframe要素、video要素があります。

<!-- 単位を付けるのは、間違い -->
<p><img decoding="async" src="flower01.jpg" alt="チューリップ" width="400px" height="266px"></p>

<!-- 単位は付けない -->
<p><img decoding="async" src="flower01.jpg" alt="チューリップ" width="400" height="266"></p>

alt属性

代替テキストを記述する属性。
代替テキストは、画像の説明文です。代替テキストの役割は、通信状態が悪い場合、画像の変わりに代替テキストを表示し、どんな画像が表示されるかをユーザーに伝えます。
もう一つの役割は、アクセシビリティです。視覚障害者の方は、音声ブラウザを使って、テキストを読み上げることで、WEBサイトを閲覧します。代替テキストがないと、どんな画像なのか理解できなくなってしまいます。
Googleなどの検索サイトは、アクセシビリティも重要視するため、alt属性は必須属性と言えます。
ただしalt属性に値を入れるか、入れないかは任意です。これは矢印やアイコンなど説明が不要な画像もあるからです。先ほどのコードのalt属性の値を省略した場合は下記になります。

<p><img decoding="async" src="flower01.jpg" alt="" width="400" height="266"></p>

img要素で指定できる画像形式

WEBサイトで使用できる画像形式は、JPG（ジェイペグ）、 PNG（ピング）、GIF（ジフ）、SVG（エスブイジー）の4種類が有名です。
現在は、上記以外にもWebP（ウェッピー）という新しい画像形式も登場しています。 画像形式は、種類が多くありますが、現在のWEB制作では、JPG、PNG24、SVGがよく使われます。

画像を圧縮してくれるWEBサービス「TinyPNG」

PNG24は、通常JPGより容量が重くなります。ですが、透明が利用できるため利用する頻度も高くなります。
「TinyPNG」というWEBサービスを利用すれば、PNG画像を大幅に容量を抑えることが可能です。
JPGより容量を軽減できることもあります。
利用方法は、サイト上部の「Drop your .png or .jpg files here!」に画像をドラッグするだけです。
圧縮完了後は、ダウンロードを押すだけです。