HTMLタグ3（img）とパス(PATH)

imgタグ
iframeタグ
画像形式
パス
1. 相対指定
2. 絶対指定

imgタグ

alt属性には代替テキストを入れておく。ファイルが壊れてたり、通信環境により読み込めなくても、そこに何の画像があったか知らせることができて、ユーザーと検索エンジンに親切。

更に視覚障害のある方たちはブラウザを音声で読み上げるアプリを使う。それらのアプリは画像はalt属性を読み上げる。デザイン装飾の為の意味を持たない画像は、alt 属性を用いて値は空にする。

<img src="spacer.gif" alt="">

iframeタグ

外のサイトを埋め込むことができる。知らない他人のサイトを勝手に読み込むと問題になることがあるので注意！

画像形式

JPG

JPGは不可逆圧縮でフルカラー（約1677万色）。圧縮率を選べる。圧縮するときはどこか捨ててる。人間の目は明るさの変化に敏感だが、色の変化には鈍感。よって、色を一部捨ててるらしい。
写真ならJPEGと覚えててよし。

PNG

PNGは可逆圧縮。

形式	扱える色数	透過の対応
PNG-8	256色	対応
PNG-24	約1677万色	非対応
PNG-32	約1677万色	対応

PNGの3つの形式の比較

8bitは、その画像の最適な256色を選んで使ってくれる。24bitはフルカラーだが圧縮率が悪い。
通常PNGとだけ言った場合は、フルカラーで透過情報をもったPNG-32を指す。
透過のあるイラスト・アイコン・ロゴなどはPNGがおすすめ。半透明は32のみ、PNG-32は「24bitカラー＋8bitのアルファ値」。

イラレの保存形式でPNGを選んだ時に、透過で出力してもなじまないときは、背景色を設定してしまってることがあるので注意！
詳しくはこちらを参照

Web用の保存形式、きちんと使い分けてますか？
https://www.vanfu-vts.jp/blog/2017/03/save_for_web/

GIF

GIFはビットマップ形式で可逆圧縮。256色。GIFはアニメーションできる。透過はOKだが、半透明はNG！

SVG

SVGはベクター画像なので、いくら拡大・縮小してもボケない。そして軽い。写真のような複雑な画像を表現するのには向いておらず、ロゴやアイコン、複雑でないイラストなど、単純な図形の描画に向いている。CSSやJavaScriptでの操作で動きを見せることも可能。透過。スマホでのピンチアウトやRetinaディスプレイでも綺麗なまま。

WEBサイトに最適な画像とは？

一般的には、ウェブページの全体的なページの重さは1～2 MB未満であることが最適。
PNGなどのシンプルな画像は、最高のパフォーマンスを得るために100 KB以下が好ましい。
そこから考えて、1枚の重い画像があるなどは好ましくないので、アップロード前にサイズを抑える（最適な形式か？目的から鑑みて高画質である必要があるか？など）。その上でWPならプラグインを用いて最適化するのもよい。

画像の圧縮にはおなじみtinyPNGなどもおすすめ！