|
| JPEG （ジェイペグ） |
拡張子 .jpg |
BMPを軽量化する目的で開発された形式です。
デジタルカメラもこの形式で画像が保存(設定により他形式も可能)されます。
圧縮率によって、画像データ量を変更できるのも特徴です。
高圧縮の場合、画質は若干荒れますが、データ量は小さくなります。
低圧縮の場合、画質は圧縮前とあまり変化のない状態で保持されますが、データ量は大きくなります。
ホームページでの使用は可能です。
|
27KB
 |
|
| GIF （ジフ） |
拡張子 .gif |
主に、ホームページのボタンやタイトルなどの画像等に用いられることが多いのですが、
最大２５６色までしか表示できないのが難点です。
その軽さを生かして、何枚ものGIF画像を重ね合わせるアニメーション（GIFアニメーション）
に利用できるのも特徴です。
やはり軽量化目的で、色数の少ない画像など、用途によってFLASH ムービーに用られることもあります。
ホームページでの使用は可能です。 |
18KB
 |
|
| BMP （ビットマップ） |
拡張子 .bmp |
ウインドウズのアイコン等は全てこちらです。
圧縮はしていないので、でデータ量が大きいのが特徴ですが、後々加工をするのには適しています。
ホームページでの使用は基本的に不可です。
※ サンプル画像はPNGです。 |
90KB
 |
|
| PNG （ピーエヌジー） |
拡張子 .png |
GIFの規格を拡張して、1677万色まで表示できるように改良したものです。
写真よりも画像（ホームページのボタンやロゴ、イラストなど）に多く用いられています。
圧縮してあるJPGと大きく異なる点は、拡大・縮小しても画像が荒れづらいことですが、
データ量はやや大きめです。ホームページでの使用は可能です。 |
47KB
 |
|
|
- まず、ホームページに掲載したい画像を入手しましょう。
- 画像編集ソフトなどを使用して、JPG , GIF , PNG に圧縮してみましょう。
（圧縮方法は各ソフトにより異なります）
※ 最初からJPG 形式などに圧縮してある素材を使われると便利です。
- 「フォルダの作成」 の章で作成した「image」フォルダ内にその画像を保存しておきます。
- 「HTMLの基本」の章の基本タグを書いたファイルを「index.html」と名前をつけて、「image」フォルダと同じ階層に保存しておきます。
→ 参考 ： フォルダの作成
|
画像の表示タグ
<BODY></BODY> 内に <IMG SRC="○○○"> というタグを記述します。
○○○部分に、表示させるファイル(この場合index.html)から見たその画像の相対パス（住所のようなもの）と、
画像名を入れます。
例えば、画像名を sample.gif とした場合
画像ファイルが、画像を表示させたいページと同じディレクトリにあれば
<IMG SRC="sample.gif"> となります。
今回は、「image」というフォルダの中にあるので、画像を表示させたいページ(index.html)から見れば、一つ下の階層となり、
フォルダ名/ファイル名となります。
<IMG SRC="image/sample.gif">
|
ブラウザで表示させてみましょう。
ブラウザを開いて、「ファイル」→「開く」→保存先/homepage（フォルダ名)/index.html
画像は表示されたでしょうか？
その他のタグを使用して、文字なども入れてみてください。 |
