Ⅴ-２　Ｗｅｂページに画像を表示する

１）グラフィックソフトで画像を作成し、保存します

①デジタルカメラで撮った写真などを用意します。

②Ｐｉｘｉａを立ち上げて、「ファイル」→「開く」画像を選択します。

③デジタルカメラなどで撮った写真等の場合、
　そのままＷｅｂページに載せるには大きすぎますので、画像サイズを小さくします。

④「画像」→「大きさを変えて複製」
　変更後の幅を「322ピクセル」「縦横比維持」にチェックをしておきますと、画像は縦横の比率を維持します。

⑤画像の一部を選択します。
　ここでは画像の一部を切り出して使います。
　「領域」ー長方形の□のボタンを選択して画像上をドラッグして選択します

⑥選択した部分を切り出します。
　「領域」→「トリミング」で選択した部分だけを切り出した画像が作成されます。

⑦色を補正します
　「画像」→「明るさとコントラスト」で設定画面が開きますので、補正します。

⑧Ｗｅｂページで使えるように保存します。
　「ファイル」→「保存」を選択し、保存場所とファイル名を指定します。
　場所はＷｅｂページを保存している「マイドキュメント」の「webpage」
　次にファイルの種類を「JPEG」を選択して、ファイル名を「sora.jpg」と指定して保存します。
　画像フォーマットをJPEGを選択した場合、ファイル名の拡張子には「jpg」を付けなければなりません。
　保存をクリックすると、JPEGのが表示されます。
　これは、JPEGフォーマットの圧縮設定で、
　クオリティを高くするほど画質は良くなりますが、ファイルのデーター容量が大きくなります。
　ひとまず標準の設定（値は「８０」）にしておけば問題ないでしょう。

⑨画像サイズを確認します
　Ｗｅｂページに画像を表示するには、画像サイズの指定も必要になります。
　画像サイズは、画面下にバー表示されます。ここでは322×283ピクセルであることが分かります。

２）トップページを編集します

第４章６で作ったトップページの続きを編集します。トップページのファイル（index.htm）を開きます

３）Ｗｅｂページに画像を表示します

画像を表示したい場所に、<img src="～">を追加し、srcで画像ファイルを指定します
ここでは先ほど作った「sora.jpg」を表示させるため「src="sora.jpg"」とします。

４）画像サイズを指定します

<img >にwidth、heightの設定を追加し、画像サイズを指定します。
これはブラウザのページ表示を早くするためです。
<img src="sora.jpg"width="322" height="283">と書きます　

５）画像に説明文を付けます

<img>にaltの設定を追加し、画像の内容を説明する文章を書いておきます。
画像表示できない環境では、画像の代わりにaltで書かれた説明文が表示されます。
ここでは<img alt="空">と書くことにします。

<html>
<head>
<title>色探しの旅</title>
<style type="text/css"></style>
</head>

<body>
<div align="center">
<img src="sora.jpg"width="322" height="283" alt="空">
<h1>色探しの旅『Sky&Water』</h1>
<p>日本の四季には色が満ちています。<span class="sora">空</span>そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p>

<div class="menu">
<a href="contents-h.htm">春の色</a>*
<a href="contents-n.htm">夏の色</a>*
<a href="contents-a.htm">秋の色</a>*
<a href="contents-f.htm">冬の色</a>
</div>
<div class="copy">copyright(c)sora<br>
E-MAIL：<a href="mailto:sora@free.japandesign.ne.jp"class="mail">sora@free.japandesign.ne.jp</a></div>
</div>
</body>
</html>

６）<img>のaltの設定

<img alt=～">で指定する情報は、画像表示出来ない環境で利用さる意外に、
イメージ検索のキーワードとしての情報に使われます。
キーワードとaltが一致すると検索結果として検出されると言う仕組みです。
そのため、「マイナーな環境に対応する」と言うだけでなく、
「検索エンジンに見つけてもらいやすくする」ためにもaltには的確な情報を書いておきましょう

７） <img>のwidth、heightの設定

古いブラウザでは、画像サイズがわかるまで、ページの読み込みが完了しないと
ページを表示することは出来ませんでした。
そこで<img>のwidth、heightで画像サイズの指定をすることで、
ブラウザに画像サイズを知らせ、読み込み完了前にもページを表示出来るようにしました。

今は画像サイズがわかなくても、Ｗｅｂページを表示できるようになりました。
でも画像サイズが読み込まれたと同時に、レイアウトがずれてしまいます。
一方画像サイズを指定している場合は、
画像データーの読み込み中でも画像分のスペースを空けた状態でページを表示します。
ですから読み込み完了後もレイアウトがずれることはありません。

８）widthとheightによる画像サイズの拡大と縮小

widthとheightで元の画像と異なるサイズを指定すると、画像を拡大したり、縮小して表示させることが出来ます。
しかし、ブラウザによって拡大・縮小が行われるため、表示結果は汚くなってしまします。
又画像を縮小しても、元のサイズは大きいままであるため、読み込みに時間がかかってしまします。
そこで、サイズを変えて表示させたい場合は、グラフィックソフトで拡大・縮小をした方が良いでしょう。

Ⅴ-２ Ｗｅｂページに画像を表示する