imgタグとは？
imgタグは、「Image」の略で、画像を表示するための要素です。少し難しく感じるかもしれませんが、使用している内に慣れてきますので心配しなくても大丈夫です。
imgタグの使用方法
<img src="フォルダ/ファイル名" width="画像の横幅" height="画像の高さ" alt="代替テキスト">例えば、「images」というフォルダの中に、幅400px、高さ200pxの「sample.jpg」という画像が保存されていたとします。するとこのように指定します。
<img src="iamges/sample.jpg" width="400" height="200">“src”属性とは「ソース」の略で、目的の画像までの道順を指定する際に使用します。（※フォルダの指定方法や、階層については次の講座で説明します。）
alt属性とは？
alt属性とは、代替テキストとも言い、何らかの理由で画像が上手く表示されない場合に代わりに表示されるテキストの事です。
例えば、画像のファイル名を打ち間違えた場合などです。また、目の不自由な方向けの音声ソフトなどで、読み上げられるといった役割もあります。
alt属性はその画像を表すテキストですから、画像に全く関係ない名前や、01等の番号だけというもの避けましょう。
画像のファイル形式を覚えよう
Webで使用する画像ファイルの拡張子には主に、「jpg」、「gif」、「png」という3つのファイルの形式があります。
それぞれ特徴が違い、用途によって使い分けます。
ここでは、詳しい説明は省きますが、どのようなときにどのファイル形式を使用するかは頭に入れておきましょう。
jpgとは？
jpg（ジェイペグ）というのは、フルカラーの写真や風景写真などに使用されるファイル形式の事です。特徴は、1,677万色を表現できることです。より細かい色合いまで表現できますので、最もよく使われるファイル形式です。迷ったらjpgを使用しましょう。但し、デメリットととして多くの色を表現できることでファイルサイズが大きくなる場合があります。
gifとは？
gif（ジフ）は、最大256色までしか色を表現することができません。ですから、単色の画像や白黒、使われる色が少ない場合に使用します。その分、ファイルサイズを小さくすることができるのが特長です。
また、gifは一つの画像の中に複数の画像を保存することができるので、GIFアニメーションと呼ばれるパラパラ漫画のようなアニメーションを作成することもできます。
pngとは？
png（ピング）とは、データを復元したときに完全に元に戻すことができる（可逆性圧縮）ファイル形式です。
大きな特徴としては、イラストやロゴなどのノイズが目立たないことや、透過（半透明）を表現できることです。
jpgは透過を表現することはできません。
gifは透過は表現できますが、半透明は表現できません。一方で、ファイルサイズが非常に大きくなることがデメリットです。
結局どれを使えば良いのか？
簡単に使い分けをまとめてみました。
1.写真や色が多く使われいる画像→jpg
2.単色や白黒等の色数が少ない画像→gif
3.透過がある画像、イラスト、ロゴ等→png
理解するポイントまとめ
- imgタグは、「Image」の略で、画像を表示するための要素です。
- imgタグは、ファイル名、幅、高さ、alt属性が必要。
- 画像のファイル形式は、jpg、gif、pngの3つの形式を用途によって使い分けましょう。