ホームページ制作に関わっているとよく目にする拡張子。
まだ学生だったころ、「何が違うんだ？透明か不透明…？」とぼんやりした認識で作っていたことを思い出します。
本日はそんなホームページの制作やデザインを始めたばかりの方に向けて、よく見る画像の保存形式とその特性を簡単にまとめてみました。
ホームページ制作関連の仕事でよく目にするものは以下の3つになると思います。
（tiffやbmpなどもありますが、今回は取り扱いません。）
この３つを使い分けるときのメリットを簡潔にお答えすると、
- jpg→圧縮率の調節ができる
- png→背景の透過ができる
- gif→アニメーションが作れる
となります。
しかし、メリットがあるならば当然デメリットになる部分もあります。
以下にもう少し詳しく説明していきましょう。
jpg
これは一番目にする機会が多いのではないかと思います。
写真もjpg、イラストもjpg。
グラデーションにも強く、写真でもサイズ（＝容量）を小さく抑えられます。
その中でも特に便利なのが、自分で画像のサイズを調節できることだと思います。
そのかわり、サイズが小さくなる（圧縮率が大きい）＝画像が荒くなる、ということは覚えておかなければなりません。
なぜこのような事が起こるかというと、このjpgという形式は保存するときに情報を削っているからなんです。
あまり圧縮しなければ、画像として必要のない情報を削るだけでいいのですが、あまりにも無理な圧縮をかけようとすると画像として必要な部分からも削ろうとします。
その結果、滑らかな表現は失われ、ふちがギザギザとした、ざらっとした画像が出来上がります。
さらに、jpgは保存をする度に圧縮をかけるため、再編集に向かないという点も覚えておかなければいけません。
一度や二度ならばあまり気にすることはありませんが、何度も保存を繰りかえすとなると、最終的にできあっがった画像を見て「あれ…？この写真こんなに荒かったかな？」となる現象が起こりえます。
また、jpgには頻度は少ないですが.jpegというものも出てきます。
何が違うかというと特に大きな違いはなく、以前あった拡張子の３文字制限がなくなったから、というのが理由のようです。つまり新世代のjpgですね。
ただ先ほども書いたように、そこまで頻繁には見かけませんので、ホームページ内でどちらかに統一ができていれば良いようです。
jpgのメリット：サイズを小さく抑えられる、圧縮率を指定できる
デメリット：保存の度に圧縮される、圧縮されると元に戻せない
png
こちらは自由度の高い画像の作成が可能です。
画素数に制限がないため、jpgと同じくグラデーションに強く、完全な透過から半透明まで、多様な画像が作れます。
人物写真を切り抜いて色々な背景に合成したいというときや、キャラクター画像を作っていろんなところに置きたい、というときにはpngで保存しておけば大丈夫です。
しかしこちらはjpgと比べるとサイズがそれなりに大きくなります。
特に写真は、劣化がない代償として、びっくりするようなサイズになったりします。
これは上記のjpgの項でも書いた、保存の際に行う圧縮の仕方が違うためです。
jpgがいらない情報をどんどん削ってしまうのに対し、このpngはいらない情報もしっかりと持っています。
そのため、何度保存を繰り返しても画像が荒れず、圧縮しても元に戻るという特徴もありますが、そのぶんのサイズはどうしても大きくなるという事です。
背景画像にはまだ不向きかもしませんが、ボタンやちょっとしたバナーなどではそんなに気にする程のサイズにはなりません。
それはpngは元々web用に作られた形式だからだそうですよ。
pngのメリット：透明に加え半透明もできる、圧縮しても戻せる
デメリット：サイズが大きい
gif
最高画素数256色、透過、アニメーションが可能。
アニメが作れるのが最大の特徴ですが、画素数に制限があるため、複雑な表現やグラデーションは苦手です。
そのため、写真はもちろん、こまかなイラストも苦手だったりします。
ただし、画素数の少ない簡単なものならサイズを小さく保存できるので、企業ロゴやベタのバナーなどはgifを使用する頻度が多いです。
あまりメリットがないかな…？と感じる方もいるかと思いますが、意外な利点があります。
今ご覧になっているこの画面のキャプチャをとってみてください。
それをjpg＆gifと２種類保存してみると……！！
gifはシャープな線描写に強いんです。
ですので文章と簡単な表程度の画面をそのままキャプチャして使いたい時などはgifで保存をすると良いと思います。
gifのメリット：アニメーションがつくれる、シャープな線が出る
デメリット：画素数の制限がある
今回はよく見る画像の保存形式とその特性についてのお話でした。
次回はちょっと変わった画像の保存形式についてお話ししようと思います。
