ネバー・ネバー・ランドはパソコン教室です
WWWアドバイス
◎ インターネット一般 ◎
□ セキュリティ
□ インターネットマナー
□ 検索エンジン
□ メール形式
□ メーリングリスト
□ メールマガジン
 
◎ ホームページ作成補助 ◎
□ 色見本
□ 著作権
□ HTMLタグリファレンス
WEBで扱う画像
BMP(ビーエムピー) □
GIF(ジフ) □
JPEG(ジェイペグ) □
PNG(ピング) □
比較 □
□ 機種依存文字
□ スタイルシート
□ JavaScript
□ CGI
□ ブログパーツ
■ WEBで扱う画像について知ろう

 ホームページでは、主に GIFJPEG という形式の画像が使われています。
 そして、最近では PNG という形式の画像もでてきました。

 ここでは画像の作り方ではなく、 それぞれの形式の違いにスポットをあててみたいと思っています。

 せっかくの写真やイラストですから、適切な形式で公開しましょう!

 

びっとまっぷ
 Windowsのペイントで描いた絵は bmp (ビットマップ)形式で保存されます。(Macな人は通常PICTね) でも、そのまま(bmp)ではホームページ上では扱えない画像の種類なのです。

 そのため、 bmp の画像をホームページ上で扱える画像のフォーマットである、 gif や jpeg や png に変換して使います。

 gif や jpg や png に変換するためには、ソフトが必要になります。
 ペイントでも gif形式 jpg形式 png形式 に対応してることもあります。確認してみましょう。

 デジカメで撮った写真の加工をしたい! ...とお思いなら、フォトレタッチソフトがあるといいと思います。

例えば...

★ Photo shop Elements (Adobe)
★ Paint shop pro JASC(P&A)
★ デジカメの達人 (IBM )
★ 花子フォトレタッチ (Justsystem )

などです

あらかじめ、パソコンに何らかのソフトウェアが付いてることもあります。
ソフトを買いに出かける前に、一度ご自分のパソコンにどのようなソフトウェアがインストールされているかチェックして下さいね。

▲ Top
 “ ジフ ”とか“ ギフ ”と読みます
 gifは表現できる色数を最大256色に減色します。
 Windowsでは、固定色という定められた色(必ず使わなければならない色:VGAカラーという)があるので、任意になるのは240色だけどね...

 イラストやマークなど色数が限られている画像や「透明」「アニメーション」など特殊効果を必要とするものには向いていますが、グラデーションなど微妙な階調(滑らかな色の変化)を表現することは苦手です。

  色数が少ないと、それだけ画像サイズも小さくなります。
   例えば...

256色で保存
1,240バイト
8色で保存
431バイト

...ですが、むやみやたらに減色するのは避けましょう。
 最終的には、いろいろと試してみて決めて下さい。


* 最近の問題 *

 GIFは、LZWというデータ圧縮技術で他の形式の画像をGIFに変換されています。
この圧縮技術のLZWは、米国Unisys社の特許というわけで、「使うのならライセンス料を払ってね」ということらしいです。
 フリーウェアソフトのほとんどが、ライセンスを結んでいないため、フリーのソフトを使って...という手が使えなくなってきました。
 どうしても、GIF画像を作成したいっ!なら、ライセンスのあるソフトウェアを使いましょう!!
 アニメーションができるのは今のところGIFだけですし...   (2004.11.01現在)

▲ Top
じぇいぺぐ
 Windowsでは、拡張子が “ .jpg ”の3文字です。

 jpegはデータを圧縮しファイルサイズを小さくする形式です。

 フルカラー(約1,600万色)で表現されるため、微妙な階調のある写真やグラデーションなどの画像に向いています。  透明化はできません。  同じ画像でもjpeg形式で保存するときに、画質を選ぶことができます。
高画質
5,043バイト
標準画質
3,449バイト
低画質
2,806バイト


 上のサンプルを見てあなたならどれを選びますか?
 画面で見て画質があまり変わらなければ、ファイルサイズを優先します。
▲ Top
“ ぴんぐ”と読みます。
 gif形式にかわってこれからWeb上で主流となるであろうといわれている画像の形式です。

--★ メリット ★--
 1.gifよりも圧縮率が高い
 2.gifよりファイルサイズが小さい (注1)
 3.圧縮しても画像は劣化しない
 4.280兆色(48ビット)までの色数を表現可能 (注2)
 5.透明色の指定を複数色できる (注3)

  注1:画像や作成ソフトによっても差があり、必ずgifよりも小さくなるとはいえません。
  注2:現実的には、フルカラー1,600万色でしょう。
  注3:Netscape Navigator 4.7は透明化に対応してません。


☆ 同じbmpファイル(8,694バイト.53×54ピクセル)をそれぞれのソフトにてpngに変換してみました。
(256色・透過なし)

Photo Shop 5.5
1,521バイト
デジカメの達人
1,310バイト
花子フォトレタッチ
1,624バイト
Paint Shop pro
1,859バイト


--★ デメリット ★--
 1.対応しているブラウザが限られている (注4)
 2.アニメーションができない(開発中らしい)
 3.作成ソフトによって表示できない場合も?
  注4:IE 4.x for Macは表示できませんが、プラグインを使うようにすれば○...らしい

  透明化 GIF 透明化 PNG
サンプル
106ピクセル×108ピクセル
Internet Exprorer5
Internet Exprorer6.0
Netscape Navigator4.7 表示 ○
透過 ×
Netscape Navigator7.1

 ※ アニメーションができないことなど、まだまだ課題は残っているようで、
   今すぐにpngへ移行というのは考えにくいようです。

▲ Top
★ 画像を比較してみましょう!(画像の大きさ:150ピクセル×40ピクセル)

gif
1,706バイト
png
1,091バイト
jpeg
2,506バイト

 上のような画像だとサイズ的にも、見た目にも gif や png のほうが
 向いているとわかりますよね。
 jpegは、画像(特に文字のまわり)がまだらで、美しくないですね。


 それでは、次のような写真の場合はどうでしょう。(画像の大きさ:150ピクセル×200ピクセル)

gif:14,848バイト jpeg:12,489バイト png:27,007バイト

左のgif形式の画像は、花びらの右下の方がガジガジです。
jpeg形式の方が、なめらかでサイズも小さくなります。

png形式は、256色に減色してこのサイズですから、まだ課題は残りそうです。
(フルカラーで保存すると画像はきれいですが、サイズが70,000バイトにもなります。)

--------------------------------------------------------------------------------

上の比較で、解っていただけたでしょうか?
「GIFは容量が少なくてすむ。」と思われていますが、画像のタイプによっては逆転することもある。ということですね。

あと、画像の処理の仕方などによって、写真でも GIF の方が容量が小さくて、画像のきれいさにも差がでないこともあります。

実際にいろいろ加工をしてみて、どのフォーマットに適しているのかを判断して下さい。
よくわからなければ、3つのフォーマットで保存して比べてみるといいですね。

あまり画像のサイズが大きすぎると、表示されるまでに時間がかかり、見ている人をイライラさせます。
1つのページのサイズが、テキストと画像をあわせて、50KB(50,000バイト)くらいになるようにホームページを作成してみてください。

 
▲ Top
Home受講案内GalleryParkWebパソコン環境LinkMember's
Copyright (C) 1997- Never Never LAND All Rights Reserved.
パソコンの環境 Webお役立ち情報 ネバー・ネバー・ランド広場 受講案内 Homeへ