imgタグとは
imgタグは、このように
画像を貼り付ける（埋め込む）ことが出来ます。
imgタグの使い方
imgタグは空要素と言って、閉めタグ</img>を書く必要がありません。またこのタグには重要なsrc属性（ソースぞくせい）とalt属性（オルトぞくせい）というものがあります。
src属性
src属性には、貼り付けたい画像のファイルのURLもしくはパスを指定します。（相対パスといいますが相対パスが分からない方はこちらの記事を参照ください。）
alt属性
alt属性には、何らかの理由があって画像が表示されない場合（パスの指定が間違っていたり、画像をどこか別のフォルダに移動させてしまったりして指定した先で見つからないなど）代わりに表示されるテキストのことです。また、視覚障害を抱える方が読み上げ機能を使って読み上げられるのがこのalt属性で指定した内容になりますので、SEO対策的にも書いておくほうがいいでしょう。
もしも書くことが何もないただおいてあるだけの画像の場合は””ダブルクォーテーションだけ書いておくようにしましょう。
imgタグの書き方
<img src="画像ファイルのパス" alt="読み上げさせたい文字">src=””の””の中（画像ファイルのパスのところ）には、相対パスを書くようにしましょう。
ここには画像のURLを指定することも可能ですが、画像のURLとなると一度インターネット上に載せる必要があるので（ネット上にあるものを右クリックして画像アドレスをコピーするなど）基本的には相対パスを使います。
また上の例の場合幅や高さを指定していないので、ありのままサイズ（原寸）で表示されることになります。もしも画像の大きさを調整したい場合はこんな感じに書きましょう。↓
<img src="画像ファイルのパス" alt="読み上げさせたい文字" width="幅" height="高さ">幅と高さの単位はpx（ピクセル）です。
widthに画像の幅を指定し、heightに画像の高さを指定します。ここで指定のサイズを誤るとアスペクト比が崩れたりして縦に伸びたり横に伸びたりな変な画像になってしまうので、等倍で大きさを調整するようにしましょう。また、画像は基本的に拡大しないほうがいいです。何故かというと画像が荒くなり見た目がとても汚くなるからです。
もしも画像を大きくする必要がある場合は、そもそも画像の素材自体の大きさを余裕をもって大きいものにしておく必要があります。
imgタグで使える画像の形式
imgタグで使用できる画像の形式はこのようになっています。
- JPEG（.jpg）
- PNG（.png）
- GIF（.gif）
- SVG（.svg）
- WebP（.webp）
画像形式の一長一短
画像の形式はそれぞれに一長一短があります。表にするとこんな感じ。
| 画像形式 | 長所 | 短所 |
| JPEG（.jpg） | 風景などの画素数が必要な写真だったり、 色の微妙な階調表現が得意 | パキっとしたイラストや輪郭がハッキリとした ロゴマークなどは画質が悪化したりしがち |
| PNG（.png） | 背景の透過ができる（背景が透明な画像が貼れる） 色数の少ない画像をはっきりと表現できる | 写真のように色数が多いものは 画像自体が重くなってしまいがち |
| GIF（.gif） | パラパラ漫画のようなアニメーションができる | 静止画としてはpngのほうが有能 |
| VG（.svg） | ベクターデータ。拡大しても画質が変わらない。 ロゴマークなどに使用 | 写真のようなものは不向き |
| WebP（.webp） | ウエッピーと読む。Googleが開発した形式でJPEGとPNGとGIFの 長所を兼ね備えるHPに最適な形式。 | そもそもこの形式で保存できるソフトが少ない |
あの天下のGoogle様が開発された画像形式なので、これから先の時代はWebP形式の画像が増えていくでしょう。私も時代の波に乗りたいです。
