Nvu1.0でホームページを作成しよう ： Nvu1.0の画像
top || Nvu1.0でホームページを作成しよう || 画像
▼Nvu1.0の画像
ここでは画像全般のご説明をして行きたいと思います。
▼Nvu1.0 画像について
画像には代表的なもので ビットマップ（bmp） ・ ジェイペグ（jpg） ・ ジフ（gif） ・ ピング（png） 等の保存形式があります。それぞれに特徴があり、同じ画像でもファイルサイズが違います。
| ビットマップ(.bmp) | 画像をそのままの形で保存し画像の劣化がない。（マイクロソフトのペイントで加工可）容量が大きい |
| ジェイペグ(.jpg) | 写真などのフルカラー画像保存に最適。（フリーソフト： 縮小専門） |
| ジフ(.gif) | ZIP形式の圧縮法を画像に応用したもの。高圧縮でほとんどのブラウザに対応済み。しかし、特許権の注意が必要。このためGIF形式で保存できるフリーソフトはない。 ロゴ画像などに最適。 |
| ピング(.png) | 最近の保存形式の為、古いバージョンのブラウザにはまだ対応していてない。 いずれは対応するであろう。 |
ＣＧエディタで有名なものは Pixia や ギンプ 等で、両者ともフリーソフト（無料配布）でありながら超高機能エディタです。
それぞれの使用方法は、ほかのサイト様でお確かめ下さい。
▼Nvu1.0 画像ファイルのサイズダウン
ホームページで使用する画像はビットマップ画像（マイクロソフト・ペイントで作った画像）ではファイルサイズが大きすぎてページを表示するのに大変時間がかかります。なるべく 縮小専門 （フリーソフト）で画像ファイルのサイズを小さくするか、市販のエディタを購入してファイルサイズの抑制につとめましょう。
縮小専門 （フリーソフト）で画像ファイルのサイズを小さくできます。
| ビットマップ(bmp) | 446.54KB |
| ジェイペグ(jpg) | 8KB |
| ジフ(gif) | 37.38KB |
| ピング(png) | 43.45KB（色数限定） 230.75KB(フルカラー) |
この結果より、写真などのフルカラー画像はジェイペグが圧倒的に高圧縮率であることが分かります。
では色数の少ないロゴ画像などはどうなるでしょうか？？
使ってもよさそうなロゴ画像がなさそうなので…下の画像を作ってみましたが、見せれるものでなかったのでデータだけで許して下さい。
| ビットマップ(bmp) | 32.25KB |
| ジェイペグ(jpg) | 13.67KB |
| ジフ(gif) | 5.87KB |
| ピング(png) | 3.41KB（色数限定） 9.49KB(フルカラー) |
色数の少ない画像ではピング8bit（256色限定）が高圧縮率となっています。
▼画像を貼り付ける
ページに画像を貼ります。タイトル画像を Pixia で作ってみました。
Pixia 初体験なんでご容赦下さい。
では作成した画像を予め作った、ホームページのフォルダに保存して下さい。
そして表示させたい場所にカーソルを置き、 画像アイコンをクリックして画像のプロパティー ダイアログボックスを表示させる。
[画像のプロパティー]で[ファイルを選択]を選択する。
表示させたい画像ファイルを選択し[開く]
画像のプロパティに戻り、[OK]
すると、下のように警告（怒られる）が出ます。
代替文字列とは、ブラウザ上で画像がなんらかの事情で表示されないときに画像の変わりに文字で説明する機能です。
これは必ず書くようにしていて下さい。
代替文字列が記入し終わると[OK]を選択して終了。
※もし画像のURIがfile:///C:/Documents%20and%20Settings/%82%B6%82%E5%82%D4254/%83f%83X%833vとなっている場合は、ファイル名のみに変更して下さい。
file:///C:/Documents〜は現在お使いのパソコン内（ローカル）でファイルを呼び出すためのルート（パス）です。
そのままだとせっかくホームページを見に来てくれた方が見たとき
←こんな感じで表示されてしまいます。
これでは、もったいないですね。
対策としてローカルのパスを削除して相対パス（googleで検索）でファイル名を記入する。
例） ../imges/title.jpg など
▼画像のサイズ変更
画像のサイズを変更してみましょう。
これをこんな風にしたり出来ます。
それでは変更手順です。
画像を右クリックして画像のプロパティを選択する。
プロパティの[大きさ]タブを押すと下記と同じものが出てくると思いますが、
ユーザー設定にチェックを入れ幅または高さのどちらかを入力するともう一方を画像比率に合わせて自動で計算してくれます。
注）縦横比を保存にチェックが入っていない場合は、ばらばらに大きさが変わってしまい画像が崩れたりします。
[OK]を選択して終了。
▼画像の配置
上記の方法では画像が全て左寄りになってしまいます。
しかし、文章レイアウトと同じ方法で左寄せ・中央揃え・右寄せが出来ます。
▼文章の折り返し
画像の横には文章が１行しか表示されません。
ここに一行しか表示できません。
そこで文章を画像に回り込ませたい方向に設定をします。
ここに文字を入れれます。
ここに文字を入れれます。
ここに文字を入れれます。
ここに文字を入れれます。
ここに文字を入れれます。
画像を右クリックして画像のプロパティを選択する。
[表示]タブを選択し、画像に対する文章の配置を文字列を画像に合わせて配置の項目を[右端で折り返す]に変更し[OK]で完了
色々な設定を試してみてください。
▼画像が表示されない場合
最終的にアップロードするわけですが（後ろのページで説明あり）、画像が表示されない場合は、以下を、一通り試してみて下さい。
- ページを保存してから画像を貼り付ける。
- 画像部分を消して、もう一度、貼り付ける。
- 画像をアップロードし直す。
※アップロードについては、後で詳しく説明しています。 初めての方は、『画像が表示されないことがあるのか・・・』という程度で、読み飛ばして下さい。
広告