ホーム > Netscape Composer講座 >

2004.08.04 追記

画像

画像全般について説明します。

画像について  ★★

画像には代表的なもので ビットマップ(bmp) ・ ジェイペグ(jpg) ・ ジフ(gif) ・ ピング(png) 等の保存形式があります。それぞれに特徴があり、同じ画像でもファイルサイズが違います。

CGエディタで有名なものはPixiaギンプ等で、両者ともフリーソフト(無料配布)でありながら超高機能エディタです。

ビットマップ
(bmp)
画像をそのままの形で保存し画像の劣化はありません。(MSペイント)
ジェイペグ
(jpg)
写真などのフルカラー画像保存に効果的です。縮小専門(フリーソフト)
ジフ
(gif)
ZIP形式の圧縮法を画像に応用したもの。高圧縮でほとんどのブラウザに対応している。しかし特許権の注意が必要。このためGIF形式で保存出来るフリーソフトはありません。
ピング
(png)
最近の保存形式の為、古いバージョンのブラウザには対応していない。あと1〜2年待ちといったところか。

画像ファイルのサイズダウン  ★★

 ホームページで使用する画像はビットマップ画像(MSペイントで作った画像)ではファイルサイズが大きすぎてページを表示するのに大変時間がかかります。なるべく縮小専門(フリーソフト)で画像ファイルのサイズを小さくするか、市販のエディタを購入してファイルサイズの抑制につとめましょう。

縮小専門(フリーソフト)で画像ファイルのサイズを小さくできます。

★ファイルサイズの例★
この東京タワーの写真ですが前述の保存形式でファイルサイズがどうなるか検証してみました。
ビットマップ(bmp) 678KB
ジェイペグ(jpg) 5KB
ジフ(gif) 20KB
ピング(png) フルカラー 100KB
色数限定 13KB
*画像が崩れない程度に圧縮した結果です.(え、崩れてる?)

この結果より、写真などのフルカラー画像はジェイペグが圧倒的に高圧縮率であることが分かります。
では色数の少ない画像はどうなるでしょう?キャプチャー画像で検証してみます
ビットマップ(bmp) 131.0KB
ジェイペグ(jpg) 15.6KB
ジフ(gif) 4.7KB
ピング(png) フルカラー 5.3KB
色数限定 3.0KB
*画像が崩れない程度に圧縮した結果です.

色数の少ない画像ではピング8bit(256色限定)が高圧縮率となっています。

画像を貼り付ける  ★★★

ページに画像を貼ります。タイトル画像をPixiaで作ってみました。Pixia初体験なんでご容赦下さい(笑)

手順1:では作成した画像を予め作った、ホームページのフォルダに保存して下さい。

手順2:表示させたい場所にカーソルを置きを押し画像のプロパティー ダイアログボックスを表示させる。

手順3:[画像のプロパティー]で[ファイルを選択]を押し...

手順4:先ほど作成した画像ファイルを選択し[OK]。又は、ダブルクリック.....

手順5:しかし、手順3[画像のプロパティー]に戻るのでそのまま[OK]を押してしまうと以下のように怒られます

代替テキストとは目の不自由な方は音声読み上げソフトを使いますがこれに対応するためや、ブラウザで画像形式が理解できない場合などに表示されます。出来るだけ入力しましょう。

手順6:■重要■リンクを設定したら「画像のURL」に表示されている

file:///C|/WINDOWS/MyHomePage/title.jpg
これは自分のパソコン内(ローカル)でファイルを呼び出すためのルート(パス)です。
そのままだとネット上で他人が見たとき
←こんな感じで表示されてしまいます。
対策としてローカルのパスを削除してファイル名のみにします。


file:///C|/WINDOWS/My%20Documents/MyHomePage/title.jpg

title.jpg

以上を変更したら[OK]を押して完了です。

画像のサイズ変更  

画像のサイズを変更してみます。

こんな事や

こんな事が出来ます

手順1:画像を右クリックし[画像のプロパティー]を選択

手順2:サイズの項目で[ユーザー定義のサイズ]を選択し 幅または高さのどちらかを入力するともう一方を画像比率に合わせて自動で計算してくれます。

元のサイズ比率にこだわらない場合は[制限]のチェックを外して下さい。幅や高さが自由に設定できます。

手順3:[OK]をクリック

画像の配置  ★★★

上記の方法では画像が左寄りになってしまいます。文字と同じ方法で左寄せ・中央揃え・右寄せが出来ます。

文章の折り返し  ★★

画像の横には文章が1列しか表示されません。

ここに1行しか入力できない。

そこで折り返しを使います。

ここに何行でも入力出来ます。
ここに何行でも入力出来ます。
ここに何行でも入力出来ます。
ここに何行でも入力出来ます。
ここに何行でも入力出来ます。

手順1:画像を右クリックし[画像のプロパティー]を選択

手順2:文字列を画像に合わせて配置の項目を[右端で折り返す]に変更し[OK]で完了

ヒント:画像にくっついて見にくい文章対策

↓にも隙間(5ピクセルを指定)
←にも隙間(10ピクセルを指定)。
画像に
くっついていません
ここに何行でも入力出来ます。
ここに何行でも入力出来ます。
ここに何行でも入力出来ます。

と言うわけで、上の[画像のプロパティー]で余白をピクセルで設定します。


枠線を指定すると画像に枠を表示させれます。(↓は3ピクセル)

画像が表示されない場合

最終的にアップロードするわけですが(後ろのページで説明あり)、画像が表示されない場合は、以下を、一通り、試してみて下さい。

※アップロードについては、後で詳しく説明しています。 初めての方は、『画像が表示されないことがあるのか・・・』という程度で、読み飛ばして下さい。


ホーム > Netscape Composer講座 >