HTML -画像表示-
画像を挿入する
構文
<img src="画像ファイルパス" alt="説明" width="横幅" height="高さ" />
通常、<img>タグは、<p>タグ等で囲んで使用します。
例:<p><img ~ /></p>
- alt属性
- 画像が表示できない場合に、画像に変わって表示する文字列を記述します。
(記述は必須です。) - 画像サイズ
- 指定は、必須ではありませんが、画像が表示されない場合、サイズが指定してあるとサイズ分の外枠が、 表示されるのでレイアウトがくずれません。
例:<img src="top.jpg" alt="説明" width="400" height="200" />
単位は、ピクセル(px)と%で、pxは省略します。
画像フォーマット
Webサイト作成には、主に、JPEG/GIF/PNGの3種類の画像フォーマットが使われます。
形式 | 拡張子 | 特徴 |
---|---|---|
JPEG | .jpg | JPEG形式は、フルカラーに対応し、色数を減らさずファイル容量が圧縮できるため、写真の扱いに適しています。 圧縮方式は、非可逆(一度圧縮したものは、元に戻らない)です。 |
GIF | .gif | GIF形式は、表示する色数を256色以下に減色して圧縮するため、データ容量を小さくすることができます。 ボタンやナビゲーションなどのページのデザインパーツやイラストなどの表示に適しています。 |
PNG | .png | PNG形式は、Web用画像フォーマットとして開発されたもので、現在ではほとんどのブラウザがサポートしています。 8bit(PNG-8)と24bit(PNG-24)があり、8bitは、GIFと同様に256色での保存、24bitでは、フルカラーの写真が保存ができ透過色を持たせることができます。 PNGは可逆圧縮のため、JEPGよりデータ容量が大きくなる傾向があります。 |