■標準フォーマットのGIF
WWW ページに表示する画像ファイルは、GIF（ジフ、Graphics Intercharge Format）という形式のものです。
GIF は、もともとはCompuServe という米国のパソコン通信ホスト局で使われてきたファイル形式で、通信で画像を送るために画像連載を圧縮してファイル化しているという特徴があります。
GIF の形式にも、インターレースとそうでないものの2 種類があります（図 1）。インターレースでないGIF は、画像の上からそのままの順番でデータが格納されていますが、インターレースGIF では、画像の上から下までをある一定の間隔で区切って、順番を入れ替えて格納しています。最終的に得られる画像は同じものになりますが、通信で受け取りながら表示する際の表示の仕方が異なります。
インターレースでないGIF では、上から順番に表示するため、画像の下の方までこないと画像の全体像が把握できないのに対し、インターレースGIF では下までの画像が間引かれながらもすぐに表示されるために、ファイル全体を受け取る前に画像の全体像がだいたい分かるという利点があります。
Netscape で、表示のしはじめはモザイクのかかったような画像だったのが、だんだんはっきりとしてくる場合がありますが、あれがインターレースGIF です。
また、GIF には、背景の色を透明化するオプションもあります（図 2）。背景を透明化す

川添 歩 （かわぞえあゆむ）
アクセス株式会社

http://www.axes.co.jp/

第4回
ホームページの画像ファイル形式
ホームページによって画像の出る速度や画像の表示方法が違ったりしますが、それはファイル形式によるところが大きいのです。前回は、画像を表示するためのタグをご紹介しましたが、今回はその画像を実際に制作するにあたってのファイル形式について解説しましょう。

272 INTERNET magazine 1996/5

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

図 2 ： GIF の背景の透明化
背景の白い部分を透明化することで、ページ上での表示が自然になる

図 1 ：インターレースGIF とそうでないもの
上がインターレースにしたGIF を表示している最中の状態。グラフィックファイルの転送がすすむほどに精細な表示になってくる
下はインターレースにしていないGIF。上から順にしか画像が表示されないることで、四角い枠のない画像をWWW ペー

いる画面のモードがフルカラーであれば、そ画像によっては、フルカラーで作成する必ジ上に配置することができます。

れぞれの画像は元のままきれいに表示されま要がない、あるいは256 色も使う必要のないインターレースにするかどうか、また背景をす。画面のモードが256 色である場合には、場合もあります。そのような画像であれば、透明化するかどうかは、その画像の内容や大WWW ブラウザーが自動的に近い色を選んだ

ファイルサイズを小さくして高速に表示させきさ、ページの内容やデザインによって選択り、ディザリングという手法を使って元の画るために、初めから256 色か、それよりも少します。

像にできるだけ近い形で表示してくれます。

ない色を使って画像を作成します。GIF 形式

したがって画像を作成する場合にはフルカの圧縮方法の特徴によって、同じ色を連続し■ 256 色のパレット

ラーで作成し、最終的にGIF で保存するときた領域に使っていると、ファイルのサイズがに最もその画像にふさわしい256 色に変換す小さくなります。

GIF で扱える色数は256 色までです。しかし、256 色といってもいろいろな256 色があるのがいいでしょう。

多くの人がダイアルアップでそれほど速くないります。フルカラーの膨大な色数の中から、256 の色を選ぶことができるのですから。選

現在の日本のインターネットの状況では、●ディザリング

転送速度によってアクセスしていますから、よんだ256 色のことをパレットといいます。たモノクロでグレースケールイメージを表現しり快適に見てもらうためにはグラフィックのフくさんの絵の具から、必要な色だけを出してたり、256 色でフルカラーイメージを表示すァイルサイズを考慮に入れてページを作成すくる、まさにパレットです。

るときに、複数のドットを混在させることでる必要があります。

WWW ページのための256 色は、基本的にのページに、異なるパレットをもつ複数の画像を配置することもできます。のような画像にしたいのかを考えたうえで、フ■大きくても小さい画像
ただし、どのような場合でもフルカラーで作

WWW ページを表示したときに、表示してファイルサイズを気にしつつ、最終的にど近いイメージを表示するための方法です。

はどのようなパレットでもかまいません。1 つルカラーで作成するか、限定した色で作成するかをまず決定してください。

るのがいいとは限りません。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/5273

■圧縮に優れているJPEG
Netscape など一部のWWW ブラウザーは、GIF と同様にJPEG（ジェイペグ）形式の画ーレースGIF と同様、ファイルを受信する経256 色に落としてGIF にしたのがB になりま過に従って荒い画像から精細な画像になってす。C はフルカラーのJPEG にしたもので、Dゆく表示がなされます。

はもとの画像からイラスト化してGIF にしたも像ファイルも扱うことができます。JPEG 形

JPEG は写真のような画像を扱うには非常

式は写真のような画像を非常に小さく圧縮すに優れたファイル形式ですが、ページの中にB のGIF は色数を減らしたために微妙に色ることのできる形式ですが、GIF の圧縮とはJPEG 画像を表示できるブラウザーは一部のが変化している部分が失われていますが、サ異なり、圧縮の際に元のデータを変更します。

ものに限定されるので、誰にでもちゃんと見イズは3 分の1 程度になっています。

人間の目にはぱっと見ただけではわからないよて欲しい画像はGIF にしておくべきです。たC のJPEG では、画像を圧縮しているためにうな部分を変更して圧縮しやすくすることにだし、ブラウザーがJPEG に対応していなくもとの画像よりも粗くなっていますが、見た目よって、非常に小さなサイズにします。JPEGても、JPEG を表示することのできるアプリケにはほとんどその粗さはめだちません。そしてで保存する際には圧縮率を選択することがでーションがあれば、JPEG 非対応のブラウザファイルサイズは約 10 分の1 になっています。

きますが、圧縮率が高いほどサイズが小さくーのユーザーでも画像をファイルとして保存す

D はB と同じ大きさのGIF 画像であるにもなる一方、画像は荒くなります。

ることで、画像を見ることはできます。

した。この形式のJPEG ファイルは、インタかかわらず、サイズは4 分の1 以下で、C よりも小さくなっています。このように色数があま

また、Netscape 2.0 では、Progressive
JPEG と呼ばれるファイル形式をサポートしまのです。

●画像ファイルの種類とサイズり多くないイラスト的な画像では、GIF の圧

A はもとのフルカラーの画像です。これをA:フルカラーファイル。
サイズは219,148 バイト

B : 256 色のGIF ファイル。
サイズは65,264 バイト

C :JPEG ファイル。
サイズは22,300 バイト

72dpi 原寸表示

72dpi 原寸表示

72dpi 原寸表示

縮効率がよくなります。

D :色数の少ないGIF ファイル。
サイズは14,764 バイト

72dpi 原寸表示

（バイト）

250,000
200,000150,000
100,000
50,0000A

B

図 3 ：画像ファイルの種類とファイルサイズ種類を横軸に、サイズを縦軸にとってグラフ化したもの。元のサイズから比べると格段にサイズが小さくなっていることがわかる

274 INTERNET magazine 1996/5

C

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DD

図 4 ：「女の子アンケート」をまとめた個人のホームページ

図 5 ：街 角 アンケートを実 施 している「 W E B ＋JAPAN」のホームページ

他人の意見も料理次第で自己表現に文章を書くこと、絵を描くこと、曲を作るこすることになるだろう。

それに「あなたの発言は世界の人が読むんでと、そういった創造的な作業に長けていれば、あるいは、もっと気楽にアンケート的にして、すよ」なんて言えば相手も面白がって答えて自分を表現するのにどうやっていいか迷うこ「最近かかさず見ているテレビ番組は？」「ブくれることだろう。とはないだろう。しかし多くの人は、「自分をリーフ派？

トランクス派？」「インプレスっ聞いた内容をページにするには、いろいろな表現しろって言ったって、どうすりゃいいんて知ってます？」「バーチャファイター2 をやバリエーションが考えられる。他人から得ただ？」と困ってしまうのではないだろうか。そるときのあなたのキャラクターは？」というよ

情報をどうやって面白く見せるかという点でうはいっても表現欲は誰にでもあるものだ。

うな、簡単で、回答を得やすい質問を複数のは、テレビの手法がかなり参考になるだろう

ただその能力がないように思え、方法が分か人にしてみて、それを分析してみるというの（これはすなわち、テレビ番組がいかに「他人らないことが多いのだ。

も手だ。なるべく大勢の人に聞いて、統計とのフンドシで相撲をとる」ことに腐心してい自分がどうすればいいのか分からなければ、他して意味をなすものにしてもいいが、数人だるかということの証明でもある）。

人の手を借りよう。インタビューとか、アンけに聞いて、それにあなたのコメントをおもし「○○についてどう思いますか？」と聞くニュ

ケートをしてみるのはどうだろう。

ろおかしくつけるだけでも、それはそれで楽しース番組の街頭インタビューのようにしても例えば、自己紹介を書くというのは何となくい（もちろんコメント次第だけれど）。

いいし、ゲストを招いたトーク番組調にして、照れくさいものだし、どこまで自分を出して聞く相手は、誰でもいい。身近にいる人に片あなたとの掛け合い会話調で話を展開していいいのかという点で迷うことは多い。だからっ端から聞けばいいのだ。親兄弟や配偶者、くこともできる。また、「クイズ100 人に聞き他人にインタビューして、「ぼくってどんな人恋人、友人に聞くのなら簡単だし、取引先ました」式に、聞いて得たデータをさらにクだと思いますか？」と聞いてみる。メモするの人との商談の際に、雰囲気作りや話題作イズ形式にして、読者にも楽しんでもらうとなりテープにとってあとで文字におこすなりしりとして聞くこともできるだろう。

いう手もある。て、それをページにしてみる。複数の人に聞聞いた意見は、インターネットのホームペー

他人から得た情報をもとにすれば、あとは料くことができればもちろんそのほうが面白い。

ジに載せたい、ということを言っておいたほ理をするだけだ。どのように料理して見せる

当然共通した意見もあるだろうが、人によっうがいい。OK が出れば名前入りで発言を載かというところに、あなたならではの色が自然てはあなたの性格を正反対に考えているかもせて、情報の信頼性を高めることができるに出てくるはずだ。そうして作られたページしれない。ページが作れ、自分を紹介できる（まあそれほどのもんではない、と言えばそうは、あなたの表現の1 つにほかならない。と同時に、あなたは新たにあなた自身を発見だけれど、名前があった方が面白いでしょ？）。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/5275

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.