TitleLogoTitleLogo ▼Site Map / ▼BBS
TOP | ソフトウェア | 素材集 | Begin!WebSite | おレシピ | GoodLinks | くらげこんせぷと。

かざり 画像ファイル かざり

Web上で使う画像ファイル

画像ファイルには、ビットマップやGIF、JPEGなど様々な形式のものがあります。
Windowsで最も一般的な形式はビットマップ(拡張子：bmp)ですが、Web上ではGIF、JPEGが一般的です。
この理由は、GIF、JPEGが圧縮と呼ばれる方法でファイルサイズを小さくしているためです。
ファイルサイズが大きくなると、それだけそのファイルをダウンロードする時間が増加し、 結果、表示されるまでに時間がかかってしまいます。
そこで、圧縮によりサイズが小さくなるこれらの形式がWeb上で使われるようになったのです。
ここでは、JPEG、GIFと、最近普及して来たPNG形式について簡単に解説します。

line

JPEG形式

JPEG(ジェイペグ)は、Joint Photographic coding Experts Groupという写真などに関する規格を決める団体が 規格した形式で、主に写真などの色数の多い画像に対して高い圧縮効果を発揮する形式です。
ただし、元の画像に戻せない圧縮技術(非可逆圧縮)が使われているため、多少画像の劣化が起こってしまいます。
また、色数の少ない場合は後述のGIFやPNGなどの方が効果を発揮します。
比較的古いバージョンのブラウザ、多くの種類のブラウザもこの形式に対応しているので、 ブラウザによって表示できないという事はまずありません。

line

GIF形式

GIF(Graphic Interchange Format：ジフ、ジーフ)は米CompuServeが作成した規格で、256色の画像までしか対応していないものの、 高い圧縮率とアニメーションや透過処理などの処理を行なえる点で広く普及しています。
しかし、最近はGIFで用いられている圧縮技術（LZW）の特許権を持つ米UNISYSが、 GIF形式を使用するソフトに対してライセンス料を課金すると主張し始めたため (Web上で使用される以前は、無料としていた)問題になっています。 特に、料金を取らない、いわゆるフリーウェアでもライセンスが必要としているため、 これまでGIFに対応していた多くのフリーウェアソフトが、公開中止、 または他の形式への変換を迫られています。

なお、IEやNNなどのブラウザ、市販の画像処理ソフト、ライセンス料を払っているオンラインソフトを使っていれば 特にこの件に対して気を使う必要はありません。

line

PNG形式

PNG(Portable Network Graphics：ピング)は、前述のGIFの特許が問題になったことから、 これに代わる新しい形式を作るという動きから作成された規格で、 ライセンス料などの心配は当然ながらありません。
また、48bitカラー(2の48乗色。GIFは256色)やアルファチャンネル(画像の透過度)のサポートなど GIFを上回る性能を持っており、GIFに代わる形式として注目されています。

ただし、比較的新しいバージョンのブラウザ(IE4、NN3以上)でないと 表示されないなど、普及率においてはGIFに比べて劣っています。
また、アニメーションはサポートされていませんが、 PNGのアニメーション版とも言えるMNG（Multiple-image Network Graphics：ミング)という形式が開発されています。
(Netscape6がMNG形式に対応)

line

Web上での画像使用の注意点

Web上で画像を使用する場合は以下のような点に注意が必要です。

  1. ファイルサイズは小さく
    まず、原則ファイルサイズは出来る限り小さくする必要があります。
    これは最初にも書きましたが、サイズが大きくなるとダウンロードに時間がかかり、 結果、表示されるのも遅くなってしまうからです。
    ホームページ上のアクセサリや背景などに使う場合は10kb以下、 写真やイラストなどで展示する場合は50kb以下を目安にするといいでしょう。

  2. altパラメータによる説明を入れる
    画像を表示する際、HTML中ではIMGタグを用いて画像表示を指定しますが、 この時、altパラメータで必ずその画像の簡単な説明を入れるようにします。
    これは、そのページを見に来る人の中には画像表示をOFFにしている人もいる可能性があり、 画像が表示されなくても、その画像がどのようなものかをある程度推測するできるようにするためです。
    また、画像のリンクが切れてしまった際にも(みっともないですが)同様の効果を発揮出来ます。

  3. 画像だけのリンク、メニューは避ける
    これは前項の理由と似ています。
    画像だけのリンクにしてしまうと、画像が表示されない場合にそのリンク先の内容を知ることができません。
    また、その画像が表示されるのに時間がかかってしまった場合も同様の事がいえます。
    最低限、altパラメータによる説明を入れるように、極力画像だけのリンクは避けるようにしましょう。
line

ファイルサイズを小さくするには

ファイルサイズを小さくするには、まず絶対条件として先に挙げたJPEG、GIF、PNG形式に変換する必要があります。
ビットマップなどでは圧縮がされていないので、それだけで不必要にファイルサイズが増加してしまうからです。
また、その他の方法として、画像自体のサイズを小さくする、減色するなどの方法が挙げられます。

画像自体のサイズを小さくするとは、例えば、200x100ピクセルの画像を100x50にするなどの方法です。 これだけで、1/2x1/2=1/4だけファイルサイズが小さくなります。

また減色とは、その画像ファイル中で使われている色の数を減らすという処理の事で、 これもファイルサイズ減少に効果があります。ただし、減色の処理方法や、画像の内容によっては 画質が劣化してしまうこともあるので、調節が必要です。

これらの処理には、PhotShopなどに代表されるレタッチソフトと呼ばれるソフトを使うと便利です。
PhotoShopは普通に購入すると10万円以上かかってしまいますが、 比較的安価なものや、中にはフリーウェアながら高度な機能をもっているソフトもありますので、 Vectorなどで探してみるとよいでしょう。
ちなみに僕はPaintShopProという市販ソフトを使用しています。

また、色数に合わせた形式を選ぶ事も重要です。
256色までの画像であればGIF、それ以上の色数の画像であればJPEGが高いパフォーマンスを発揮します。
ちなみにPNGは色数にかかわらず、(ただし、色数が多い場合にはJPEGに若干劣るものの)高いパフォーマンスを発揮します。

また、どうしてもファイルサイズが大きくなってしまうという場合 (減色できない、大きく表示する必要がある等)は、サムネイルという方法を使います。
これは元の画像を縮小した画像だけをあらかじめ表示して、そこから元の画像へのリンクを張るようにする方法です。
そうすれば、最初から大きいサイズの画像が表示される事がなく、 その画像が見たい人だけがみれるので親切です。
特にイラストや写真を展示するサイトではこの方法が一般的です。

←Back