／／／ 画像の圧縮と表示 ／／／ (00/04/22)
画像の圧縮について質問を頂いたので、回答を兼ねて紹介します。 一般的にホームページで使われる画像形式には JPEG,GIF などが あります。JPEG形式は約1677万色を扱えるので写真に、GIF形式は 256色までなのでイラスト、ＣＧなどに使われます。 これはあくまで画像の形式の問題なので、色数の制限を受けることを 問題としなければ、写真をGIF形式で保存することも可能です。 ホームページにアップする際には画像ファイルサイズの問題が あります。大きな画像を使えば表示するのに時間がかかってしまいます。 画像の情報は伝えながらも、いかにファイルサイズを小さくするかが 問題です。あえてサイズが大きくなるのを覚悟の上でも伝えたい 情報もある訳で、このバランスはケースバイケースですが、ファイル サイズを小さくする手法を紹介します。 画像のファイルサイズを小さくするには、画像の大きさを小さくする。 次に使う色数を減らす。最後に圧縮するです。 画像の大きさを小さくすれば、サイズが小さくなるのは説明はいらないと 思います。使う色数が減ればファイルサイズは小さくなります。 その意味では一般的にGIF形式の方が有利になります。 圧縮ですが、データを間引くと云う方法で圧縮します。ソフトによっては 圧縮と云う言葉を使わず、高画質、低画質と云う言葉を使っていることも あるかと思いますが、意味合いは同じです。最高は100分の１程度にまで 圧縮できます。低圧縮＝高画質、高圧縮＝低画質と云う関係になります。
上の画像は圧縮率を変化させた画像です。同じ大きさの画像でもファイル サイズは左から38KB、 14KB、 9KBとなります。両端の画像ではファイル サイズに４倍の格差があります。38KB程度なら表示にもさほどストレスは 感じないですが、これが100KBを越えるとダイヤルアップ回線では、 イライラ感が出てきます。100KBを圧縮して25KBにすれば表示もスムーズです。 この例では画像の大きさが小さいので、比べてもさほど画質の低下は感じない かと思いますが、大きな画像で比べるとその違いもはっきりと判ります。 でも、この例からもＨＰでの雰囲気の紹介程度で使う画像であれば、それほど 高画質の画像は必要ないことも判ります。 画質と圧縮は、どのあたりで妥協するかが問題です。そしてホームページに アップする際にはwidth、heightなどの指定をした方が若干表示速度は速く なります。そして画像の一覧としてサムネイル表示させる場合の注意として、 別途小さな画像を用意しないで、width、heightで小さく表示させるように 指定しただけでは、ブラウザは元のフルサイズ画像を一旦読み込んで、 それを縮小表示させるだけなので、表示速度という点ではマイナスです。 最後にJPEG形式は非可逆性形式です。一旦圧縮などしたファイルは 元の画質には戻せません。何度も読み込み保存などを繰り返す作業の過程では オリジナルファイルとは別のファイルで作業されることをお薦めします。