Webふぉれすと
Web制作、Webデザインのスキルアップに役立つ情報をお届けします!
みんなが癒され、元気になるWebを目指します。
サイトマップはこちら
PI-chicc,PA-chicc
うぇぶ実験室
ふぉれすとCafe
NANAKORO*BEANS
くりっくりんく
イベント・セミナーを探せ!
ふぉれすとかわらばん
がしがし通信
今日のスタッフ
スタッフプロフィール
ご意見ご感想フォーム
トップページにもどる
Webふぉれすとトップ > うぇぶ実験室

  画像表示を快適に!


【実験1】いろいろな画像をJPEGとGIFで保存。ファイルサイズと表示時間を比較。
実験条件:画質は、滑らかに見えるようなものにする。 画像サイズ:500ピクセル×500ピクセル

*記載されている表示時間はあくまでも目安時間です。今回使用した数値はPhotshop6.0で保存する際に表示されるものです。データ転送速度28.8Kbpsでの目安表示時間となります。
*画像をクリックすると実際の画像を見ることができます。

(1)カラフルな写真 (2)モノトーンの写真
(1)カラフルな写真 JPEG
(36KB、13秒)
GIF
(164KB、62秒)
(2)モノトーンの写真 JPEG
(12KB、5秒)
GIF
(64KB、23秒)

▼当然のこととは思いますが、写真を使った(1)と(2)は、JPEGが圧倒的にファイルサイズが小さくなりました。
▼(2)はモノトーンのため(1)に比べると、色数が少なくすむのでJPEGとGIFファイルサイズの差が(1)よりは小さくすみました。

(3)全体にグラデーションのある画像 (4)グラデーションのない単調な画像
(3)全体にグラデーションのある画像 JPEG
(21KB、8秒)
GIF
(81KB、29秒)
(4)グラデーションのない単調な画像 JPEG
(31KB、12秒)
GIF
(6KB、3秒)

▼実は以前(3)と同じ画像をGIFで保存して失敗したことがありました。JPEGの特徴を考えてもグラデーションの大きい画像はJPEGが最適です。
▼(4)をJPEGで保存すると、標準だと画像が荒れてしまいました。べた塗りの画像は、やはりGIFが最適なようです。

(5)繊細な色調のイラスト (6)色調が単純なイラスト
(5)繊細な色調のイラスト) JPEG
(10KB、4秒)
GIF
(31KB、12秒)
(6)色調が単純なイラスト JPEG
(21KB、8秒)
GIF
(12KB、5秒)

▼(5)のような色合いの繊細なものはJPEGがよいと思いますが、減色の方法を工夫すれはGIFでもそんなにファイルサイズが大きくならないと思います。
▼(6)は、若干グラデーションがあったのですが、やはりGIFの方が小さいサイズになりました。

(7)写真の割合が大きいもの (8)写真の割合が小さいもの
(7)写真の割合が大きいもの JPEG
(20KB、8秒)
GIF
(121KB、44秒)
(8)写真の割合が小さいもの JPEG
(10KB、4秒)
GIF
(27KB、10秒)

▼(7)と(8)は、写真なので基本的にはJPEGが最適だと思います。
▼(8)のように写真の部分が小さいとGIFでも、さほどファイルサイズは大きくならずにすみました。

▼ファイル形式が不適当だとファイルサイズはとても大きくなってしまうことがあります。ファイルサイズが大きく変わると読み込み速度も当然変わってきます。最適な形式を選ぶのは大切なことだと思いました。
▼JPEGに向いている画像、GIFに向いている画像、それぞれの特徴からなんとなくわかっていましたが、実際に両方を比較してみてとてもよくわかりました。


前のページへ
うぇぶ実験室トップ
続きを読む

Copyright(c)2002-2004 Step-First All rights reserved. [About WebForest]
E-Mail:webforest@step-first.com