ホームページを制作するうえで欠かせないのが画像加工や画像処理です。
会社ロゴからおすすめ商品のバナー、背景画像やはたまたスライドショーまでホームページにはありとあらゆる画像がちりばめられています。

この画像形式、いろいろ選ぶことができるのですが、それぞれの画像形式はどれを選ぶべきなのでしょうか。
その特徴をおさらいしてみましょう。

【1】jpg / jpeg ジェイペグ

デジカメなどで撮った写真を保存すると、特殊な設定をしていない限りはまずこの保存形式になります。
主な特徴として、不可逆圧縮形式を採用しています。

そもそも画像ファイルは撮影した画像をそのまま保存するととんでもない容量になってしまうため、一般的にはサイズを圧縮して保存しています。
不可逆圧縮（非可逆圧縮）とは、一方通行の圧縮のことを指します。

例えば、1000px×1000pxの画像を300px×300pxに縮小してjpgで保存したとします。
その後、300px×300pxの画像を引き伸ばし、1000px×1000pxに戻したとしても元の画像には戻りません。
引き伸ばされた荒い画像が残ってしまうだけです。

001 002

ちなみに上記が1/10への圧縮→拡大を3回ほど繰り返した場合の劣化です。
jpgの加工をする場合は、必ず元のファイルをバックアップするようにしましょう。

 

【2】gif ジフ

昔はよく見かけましたが、最近は見ることが少なくなったgif。
jpgと違い可逆圧縮形式のファイル形式です。（引き伸ばし、拡大で劣化しない）また、256色しかサポートされておらず色表現は弱い特徴をもっています。
インターネット黎明期はそのファイルの軽さや、256色（セーフティーカラー）しか表示できないPCが多かったので、gifがよく使われていました。
また、
・透過処理が可能（背景が透ける）
・パラパラ漫画のようなアニメーション表現が可能
という特徴があります。
稀に見る3枚の画像が切り替わるようなバナーはgifが多く使用されています。

現在はアニメーションを除いたほぼすべてがpngに置き換えられているため、あまり使用する機会はないでしょう。

Rotating_earth_(large)

【3】png ピン

pngはjpegとgifのいいところを両どりした新しめの画像フォーマットです。
現在ではほぼすべてのブラウザが対応しているため、主流となっています。

可逆圧縮形式を採用しており、画像劣化もなく、またjpeg同様48ビットカラーに対応。
透過画像処理にも対応と、ホームページに最適の形式です。

が、インターネットエクスプローラ6以下では、透過pngをサポートしていないため、透過処理をしたpngを利用すると正しく表示されません。
既にインターネットエクスプローラ6のシェアは1%以下ですのでほとんど意識する必要はありませんが、pngの普及が遅れた大きな理由と考えられています。

また、gifは透明か不透明かの2択だったのですが、pngは半透明など透明レベルも指定できます。
アニメーション分野以外でgifの上位互換となっています。
ただ、可逆圧縮な分同じ解像度の写真をjpgと比較した場合、5倍～10倍程度のファイルサイズとなってしまいます。

—-

以上の点から、大きめな画像ファイルは容量の観点からjpg、透過を利用したりするケースが多いロゴやバナーはpngを利用するのがセオリーとなります。

新しくホームページなどを作成する際の参考になればと思います。

Written by 中島