前のページへ 目次へ 次のページへ


画像の種類
 画像の種類は数限りなくあるのでしょうが、ホームページ作成に必用なものといえばBMPJPGGIFの3つ。ここではファイルサイズ(バイト数)を小さくする工夫を中心に3つの画像形式について説明します。

BMP(ビットマップ)
 Windowsではいちばん基本的な画像形式。Windowsについてくるペイントブラシ(Mspaint)というお絵描きツールで読み込めるのはこれだけです。圧縮もなにもされていないプレーンな画像なので、バイト数を食うかわりに後で加工するのに適してます。
 スキャナーによっては、取り込む時にいきなりJPG(後述)GIF形式(後述)でセーブできちゃうのがあるかもしれないんだけど、まずBMPでセーブしておいて、いろいろ加工をした後にJPGやGIFに変換したほうが仕上がりがきれいになる……はず。

 ちなみにBMPはWindows用の画像形式で、マッキントッシュOS用にはBMPにあたる別な画像形式があります。なので、BMPのままではホームページには貼れません。正確に言うと、自分でソース書けば貼れます。でも、ブラウザにはBMP画像を表示する機能がありません。ネットスケープのコンポーザー(IEのフロントページにあたるHP作成用ツールです)では、BMP画像を貼ろうとすると、JPG形式に変換していいかと聞いてきます。

 ホームページには貼れないけど、e-mailに添付すればBMPのまま人に渡すこともできます。でも、あくまでWindows専用の画像形式なので、Macを使ってるおともだちにBMP画像なんかプレゼントしちゃだめ。MacではふつうBMP画像は読めません(読ませるには工夫が必要なので、読めないと思っておいたほうが無難)。


 BMPと一口にいっても、1677万色(フルカラー、トゥルーカラー)、1万5千色(ハイカラー)、256色、128色、64色、32色、16色、8色、4色、2色……と、使ってる色の数によってセーブ形式を変えることができて、色を減らしてセーブするとファイルサイズ(バイト数)が小さくなるという特徴があります。もっとも、ツールによってはこんなに色数の形式を選べないものも多いですけどね。

 ちょっと注意が必要なのは、「2色しか使ってなくともフルカラーの形式でセーブすれば、ファイルサイズはフルカラー並になる」ってことでしょうか。実際に使っていない色も、いつでも使える状態で準備されているので、その分ちゃんとバイト数を食うのですね。
 「この色以外はもう使わないよ!」と教えてやると、ファイルサイズが小さくなるんです。

 文章で読むとわけわかんないですが、次の手順で実験してみると一目瞭然です。

  • ペイントブラシを起動して、適当にお絵描きしましょう。とりあえず白地に黒いでも描いてみましょう。この状態だと白と黒で2色しか使ってませんね?
  • 次に、この絵を「名前を付けて保存」するのですが、ファイル名を入力する欄の下にある「ファイルの種類」という場所から、最初は「24bitビットマップ(フルカラー、ture colorともいう)」という形式を選んでセーブしてください。(セーブだけして、ペイントブラシは終了させないでください!)
  • さらに、さっきと同じ絵を(まだ画面に残ってますよね?)、ふたたび「名前をつけて保存」するのですが、今度はファイルの種類のところで「16色ビットマップ」を選んでください。ファイル名もさっきのとは別の名前を付けてくださいね(同じだと上書きされちゃう!)。
  • これで同じ絵だけど2種類の形式でセーブできたはずですが、ファイルサイズを比べるとどうですか?ぜんぜん違うでしょ?(ファイルサイズ(バイト数)はエクスプローラーでも見られますし、ファイルのアイコンの上で右クリックして、プロパティーを選んでも確認できます)。
  •  ペイントブラシだと、16色以下というセーブ形式がないのですが、2色でセーブできるツールだったら、ファイルサイズはもっと小さくなります。
     BMP画像はホームページに直接貼ることはできないので、ファイルサイズを小さくする工夫は無意味な気もしますが、これを覚えておけばGIF画像(後述)を作るときに役にたちます。

     なお、24bitとか16bitとか、色数や白黒画像の階調をbitで表す方法についてはここを読んでください。


    JPGまたはJPEG(ジェイペグ)
     これは画像を圧縮するための形式のひとつです。ホームページに貼れる画像ですし、もちろんMacでも読めます。ざんねんながら、WindowsについてくるペイントブラシではJPG形式でセーブすることができません。JPG画像をつくるにはJPG形式に対応した画像加工ツールや、BMP画像をJPG画像に変換するためのツールが必用です。PhotshopやPaintshopというような代表的な市販のツールはたいていJPG形式に対応しています。もし、そういったツールを持っていない人はフリーウェア(無料)か、数千円程度のシェアウェアのツールもあるので、VECTOR窓の杜などで探してみましょう。
     また、IEのフロントページでは確認していませんが、ネットスケープのコンポーザーだとBMP画像をそのまま張り付けようとするとJPG形式に変換してくれます。

     JPG形式で画像を圧縮するためには、もとの画像はフルカラー(24bit)のBMP画像でなくてはなりません。もし16色BMPや256色BMPなどをJPGにしたい場合は、フルカラーBMPに変えてからでないとJPGには変換できません。
     JPGはフルカラーの画像を扱えるかわりに、圧縮すると画像が劣化してしまうのが欠点です。
     下の絵は同じものをJPG形式とGIF形式で圧縮したものです。JPGにするとだいぶ汚くなっているのが分かると思います。

    GIF形式で保存 GIF形式 JPG形式(標準)で保存 JPG形式
    (標準品質)

     こんなふうに、単純な絵をJPGにすると劣化がめだってしまいます。こういうときはGIF形式(後述)で圧縮したほうがいいでしょう。
     というわけで、JPGはフルカラーでセーブできるかわりに画像を劣化させてしまいます。また、バイト数を小さくすればするほど劣化が激しくなります。

     以下の写真はどれも同じフルカラーのBMP画像(46KB)でした。
     

    高品質(15.1KB)高画質
    (15.1KB)
    標準品質(3.8KB)標準品質
    (3.8KB)
    品質をちょっと落としてみる……(2.3KB)品質を落とすと... (2.3KB) 品質をもっと落としてみる……(1.8KB)もっと落とすと...
    (1.8KB)

     だんだん絵が汚くなってゆくのがわかるでしょうか?
     また、写真だとJPGにしても劣化がさほど目立たないことも確認できると思います。カラー写真は標準程度のJPG画像にするとよさそうです。
     劣化の度合いはどんな絵を圧縮するかによっても違います(見た目の、という意味ですが)。
     下の絵は、背景が点描になっています。こんな場合は標準以下の品質に落としても劣化はさほど目立たないと思います。
     

    標準品質標準品質(8.2KB) 品質を落としたもの品質を落とすと...(3.6KB)

     たいていの画像加工ツールはJPGでセーブすると「標準画質」という中位の画質でセーブしてくれるようです。でも、BMPでセーブ出来ないデジカメのなかには、なるべくきれいな状態で保存するために最高品質のJPGでファイルを作ってしまうものもあります。
     たまに、見た目の大きさ(バイト数じゃなしに画像サイズ)はやたら小さいのに、バイト数がウソーってほどでかいJPGファイルがありますが、そういうのはデジカメが吐き出したのをそのまま貼ってることが多いです。

     JPGなので高品質のまま貼っても差し支えないんですが、品質を高くしたからといって、標準のものよりきれいに見えるかというと、そんなことぜーーーーんぜんありません(^^; 厳密に言えば違うはずなんですが、人間の目ってかなりだませてしまうので、いくらか劣化していても普通の写真なら違いはほとんどわかりません(もちろん、調子にのって品質を落としすぎると、さすがに目に見えて汚くなっちゃいます)。
     見た目がたいして変わらないならバイト数は小さいほうが何かとお得です。目で見て綺麗に見えるように、バイト数も小さくするのがコツ。

     もしデジカメが吐き出した高品質のJPG画像を、標準品質に変えたいだけだったら、JPG形式に対応した画像加工ツールに読み込んで、なにもしないで上書き保存するだけでも標準品質に変換されることが多いです(JPGの画質調整のデフォルト値が「標準」に設定されているツールが多いから)。
     珍獣が使っているPhotinpactという画像加工ツールでは「名前をつけて保存」するというメニューを選んで、JPG形式での保存を選んで、オプションというボタンを押すとJPG画像の品質を指定することができます。たぶん、PhotshopやPaintshopなどの画像加工ツールにも、そういう機能がついているんじゃないかと思います(未確認……でも、高いソフトなのに、その程度できなきゃ詐欺だわよねえ)。
     また、JPG画像の品質を変えるツールはフリーウェアのものもあります。以前、珍獣が使っていたのはJDT.EXEというツールで、VECTORに登録されているフリーウェア(無料ソフト)です。上に貼った写真のように標準でも4KBくらいなら、これ以上品質を落とす必用はないでしょうが、もとの絵がもっと大きくて、そのままホームページに貼ると時間がかかってつらそうな場合などに便利かもしれません。

    JPG画像の品質(クオリティー)
     JPG画像の品質の高い低いのあらわしかたは、ツールによって言い方が違うかもしれません。珍獣が使っているPhotinkactでは、品質を100段階であらわして、70が標準ってことになっています。
     でも、JPGのファイルサイズを調整するためのJDT.EXEというツール(フリーウェア)だと、もとのJPGファイルの大きさから計算するとこのくらいが標準……と、バイト数で表示してくれます。このツールでいう標準は、Photinpactの標準とだいたい同じ程度になってるみたいです(できあがったJPGファイルのバイト数がほぼ同じなので)。
     また、ネットスケープのコンポーザーにもBMP画像をJPGに変換する機能がついていますが、この機能で「標準」を選んでも、やはりファイルサイズが同じくらいになります。
     というわけで、どんなツールを使っても「標準」といえば同じくらいの圧縮率なのでしょう。
     それから、JPGはフルカラー(1677万色)でなきゃだめと書きましたが、正確に言うと1677万階調なら白黒(グレイスケール)でも大丈夫です。

    GIF(ギフ)
     これも画像を圧縮するための形式です。ホームページに貼れる画像ですし、Macでも読めます。ざんねんながら、WindowsについてくるペイントブラシではGIF形式でセーブすることができません。GIF画像をつくるにはGIF形式に対応した画像加工ツールや、BMP画像をGIF画像に変換するためのツールが必用です。PhotshopやPaintshopというような代表的な市販のツールはたいていGIF形式に対応しています。もし、そういったツールを持っていない人はフリーもしくはのシェアウェアのツールもあるので、VECTOR窓の杜などで探してみましょう。珍獣はDPixedというGIF形式対応のお絵描きツールを使っています。

     JPGはフルカラーのBMPからしか圧縮できませんでしたが、GIFは256色以下に減色して保存したBMP画像しか圧縮できません。そのかわり絵を劣化させずに圧縮することができます。
     

    GIF形式で保存 GIF形式 JPG形式(標準)で保存 JPG形式
    (標準品質)

     こんなふうに、GIF形式は絵を汚さずに圧縮することはできますが、フルカラーのJPG画像(標準画質)と256色のGIF画像で比べると、GIF形式のほうがファイルサイズ(バイト数)が大きくなることが多いのが欠点です。
     

    JPG標準品質 JPG標準品質
    (3.8KB)
    256色GIF 256色GIF
    (12.7KB)

     左の写真は標準品質のJPG(フルカラー)で、右は256色に減色したBMP画像をGIF形式で圧縮したものです。このとおり標準品質のJPGと256色のGIFとでは、GIFのほうがファイルサイズが大きくなってしまいます。
     しかし、色数をもっともっと減らせる時はGIF形式のほうが小さくなります。

     下の絵はもとは全部同じもので、フルカラーBMPの状態で30KBありました。
     

    JPG標準品質 JPG標準品質
    (2KB)
    256色GIF 256色GIF
    (1.2KB)
    2色GIF 2色GIF
    (0.5KB)

     もともと2色しか使われていない絵なので、256色GIFでもJPGより小さくなりますね(2色しか使っていないのに256色とはなぜ?!という人はここを読むこと!)。2色のGIFならさらに小さくなります。
     つまり、GIFは使われている色の少ない単純な絵に使うと威力を発揮する圧縮形式なのです。
     とはいえ、圧縮率は絵の状態によっても多少かわるので、思った通りの結果がでるとはかぎりません。あくまで目安として覚えておきましょう。

     また、GIF形式は透明色を使えるのも特徴です。下の絵はどちらも同じ絵なのですが、左は背景の藤色を透明色に設定しました。右はピンクを透明色にしたものです。GIF形式に対応した画像加工ツールやお絵描きツールなら、たいていは透明色の設定もできると思います(DPixsedでもできます)。
     

    藤色の部分を透明に ピンクの部分を透明に

     それから、GIF形式の絵を何枚か描いて、ぱらぱら漫画のように動く絵を作ることができます。

    GIFアニメを作る機能は、ツールによってはついていない場合もあるかもしれません。そういう場合はGIFアニメを作る専用のツールもありますので、VECTORや窓の杜で探しましょう。
     

    動く珍獣様



     ここまでの話を簡単にまとめると、ファイルサイズを小さくするのが目的だったら、
    カラー写真だったらフルカラー(24bit)のままJPGの標準品質で圧縮
    白黒写真だったら24bitでJPGの標準品質で圧縮
    もともと色数が少ない画像だったら減色してGIFで圧縮
    という感じでしょうか。
     でも、アニメにしたいとか、背景を透明に抜きたいんだ、とかいう場合は多少ファイルサイズが大きくなってもGIFに芸術的な写真なんだからフルカラーで、しかも劣化を少なくしたいんだ、という場合なら、JPGの高品質で圧縮するのがいいでしょう。
     画像の形式は目的とファイルサイズのかねあいで選ぶといいです。でも、どうしても画像が大きくなってしまうときは、トップページには貼らないほうがいいです。内容がどんなにすばらしくても、トップが重いページはおしゃれじゃないです。

    前のページへ 目次へ 次のページへ