今回は
「サイトで使用する画像の種類」
についてお話します。
重要度：★★★★
難易度：★★★
サイト制作で使用する画像は大きく別けて、GIF・JPG・PNGの3種類があります。
当然3種類とも特徴があり、それぞれに適した使用目的があります。
詳しく話せば、小一時間は話が出来るほど、実は奥が深い話ですが面倒なので、ざっくり判りやすくお話します。
後ほどサンプル画像をよく見ていただければ、判ると思いますので、簡単に説明します。
GIF画像
主に画像変化の少ないイラストなどに用いる。(グラデーションが多用されていると、問題あり）
短所
表示色数が最高で256色しかないために、写真などの保存にはあまり向かない。
またデータ保存の方法により、グラデーションの表現が弱く、綺麗に表示できない。
JPG画像
主に写真などの色数の多いものや、グラデーションが多用された画像に用いる。
短所
JPGは保存を繰り返すと、データの劣化が進み画像が荒れる特性を持つので、可能な限り保存を繰り返さないようにする。また、広い面に単一色（バックグラウンド等）が適用された画像などでは、極所的に画像の荒れが起きてしまうので、注意が必要。
PNG画像
イラスト・写真など特にデザインを選ばない。また画像の透過※1も出来るので、WEBには非常に向いている形式。
短所
JPG のように画像劣化が起きない分、綺麗な画像を制作できるが、その反面ファイルサイズが肥大化してしまうので、使用する場合は注意が必要。
ざっくり説明すると以上のようになります。
実際、私の場合は複数の保存データを作って、どれが最適か？という作業をします。
まずは、画像の劣化を確認して、その上でファイル容量の軽い（少ない）画像を選びます。
1.複数のフォーマットを見比べて、劣化の少ない画像を選ぶ。
2.選んだ画像のファイル容量の少ない画像を選ぶ。
特殊な使用目的、またはどうしてもその画像フォーマットでなければならない場合以外は、上記の方法で、画像を選定しています。
まぁ、基本的に綺麗であれば、良いとは思いますが、あまり画像容量の多き画像は、表示に時間がかかったりするので、気を付けてください。
サンプル画像 どの画像も 画像サイズ 横400 縦300px で制作してあります。
写真をベースとした各種フォーマット画像
容量：38.2 KB
解りにくいかもしれませんが、おでこ付近の色がグラデーションでは無く、段階的にトーンを配置している様になっています。
容量：9.15 KB
WEBで使用する一般的な圧縮率60％の画像。
全体的にシャープ感に欠けるぼやけた感じ。
しかし、画像容量としては非常に軽くなっている。
PNG-24
容量：163 KB
JPGに比べて約16倍という非常に容量のあるデータ。
しかし、画像の劣化は少なく非常に綺麗な仕上がり。
イラストをベースとした、各種フォーマット画像
GIF 128色
容量：45.6 KB
赤のグラデーション部分が段階的なトーンに変更されている。
また画像容量も、肥大化している。
JPG 60%圧縮
容量：28.1 KB
写真同様、全体にぼやけた感じでの仕上がり、また【JPG】と書かれた文字の脇付近で画像の劣化によるバターンが確認できる。
PNG-24
容量：163 KB
写真の時と同様、綺麗な画像だがやはり容量はかなり大きい。
それぞれの、画像の中から、使用する画像を選ぶとすれば、ここはやはりJPGの圧縮率を上げた画像（80％圧縮）程度を使用する事がベターだと思う。
もちろん、画像の綺麗さを強調する必要なサイトであれば、やはりPNGを選択するだろう。
また、今回のサンプルはグラデーションのキツイモノを選んだので、GIFの出番はありませんでしたが、シンプルなイラストの場合は、やはりGIFが一番良いです。
このように、使用する画像の構成によって、フォーマットを変える事で、より快適で綺麗なサイト制作が出来ます。
透過※1
PNGは、画像そのものを透過させる事が可能な形式で、特殊な効果を使いたい時に、重宝する形式です。ただし。透過PNGはファイル容量も大きくなるので、扱いは十分に検討してかが良いでしょう。
