ホーム > HTML > 画像表示

HTML -画像表示-

画像を挿入する

HTML文書に画像を表示したい場合は、<img>タグを使用します。

  • <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よりデータ容量が大きくなる傾向があります。