あなたは大丈夫?画像のファイル形式

こんにちは!
実習3日目を終えたツボです。

突然ですがクイズです。
「JPEG」「PNG」はなんと読むでしょう?

実習初日に、WEB業界での必須ワードを習っているときにこのクイズが出されました。
学校で習ったのは「JPEG=ジェイペグ」「PNG=ピング」だったけど、こんなクイズになるっていうことは、きっと現場ならではの特別な読み方があるってことか、、と深読みして固まるインターン2人。

迷った挙句私がひらめいたのは『ペグジェー』と『グンピー』

この大御所芸能人風の読み方(寿司=シースー的な)、WEB業界人さんたちに提案したいところですが、正解は学校で習ったとおり「JPEG=ジェイペグ」「PNG=ピング」でした。

画像形式についてのおさらい

このブログを読まれている方は、すでにご存知の方が大半かと思いますが、これから勉強される方のために少しだけ説明させていただきますね。

WEBサイトを見ていると、たくさんの画像が載っていますよね。
写真、イラスト、アイコンなど、いろいろな画像がありますが、これらはそれぞれの特性に合わせた画像形式で保存され、ホームページに配置されています。

その画像形式の種類が、大きく先ほど出てきた「JPEG(ジェイペグ)」「PNG(ピング)」と、「GIF(ジフ)」です!

デザインファイルから、各パーツを最適な画像形式で書き出すことを「スライス」と言うのですが、この作業がメッチャ重要なんです。

ぜんぶ一緒じゃだめなの?

私も習った頃、「なんでそんな種類があるんやろー、ややこしいし全部一緒でもいいんちゃうん」と思っていました。
現に課題でスライスが出た時、「全部JPEGでスライスしてん」というツワモノもいました。笑

ところが画像形式を甘くみていると、ホームページの読み込みにすごく時間がかかってしまったり、せっかく作った画像が荒れてしまったり、といった悲劇が起こります。

スライスしてみよう!

こちらに美味しそうなケーキがあります。3種類見比べて見てください。

【JPEG】
画像最適化_r1_c1

【PING】
画像最適化_r3_c1

【GIF】
画像最適化_r1_c7

よーく見ると、それぞれ見た目に差があります。
GIFは、スポンジの部分や背景が潰れてしまっています。
JPEGとPINGは見た目はそこまで変わりませんが、ファイルの大きさがかなり違ってきます。

JPEG  67k
PING 367k

この写真の場合、なんとPINGはJPEGの約5倍ほどファイルサイズが大きくなっているため、その分、読み込みに時間がかかってしまいます。

次に下記のようなボタンの場合を見てみましょう。それぞれの画像形式でスライスした後、背景がグレーのページに配置してみます。

【JPEG】
jpeg

【PING】
ping

【GIF】
gif

角を丸くしたデザインのボタンですが、JPEGの場合はスライスするときに不要な部分まで書き出されてしまいます。

それに比べ、GIFとPINGは、不要な部分を透明にして書き出すことができます。次に、この2つだと見た目はほぼ変わらないので、画像サイズが小さいGIFでスライスするのがベストということになります。

最適な画像形式で保存しよう!

それでは、これまでお伝えしたポイントを含め、簡単におさらいします。

【JPEG】
・写真に適している
・PINGに比べ、ファイルサイズが小さい
・不可逆圧縮を行うため、上書き保存を繰り返すと画質が劣化してしまう

【PING】
・何度も加工を繰り返す画像に適している
・イラストやロゴなどに適している
・単色のグラデーションを使用しているボタンなどにもおすすめ
・画像の一部を完全な透明、半透明の状態で保存できる
・ファイルサイズが大きく、読み込みに時間がかかってしまう

【GIF】
・画像の一部に完全な透明を使用できる(半透明は不可)
・色数の少ないイラストやボタンに適している
・ファイルサイズが小さく、読み込みが早い
・写真など多彩な画像には不向き

いかがでしたか?
WEBデザインを習い始めたころ、私自身がつまづいた画像形式について、簡単にご紹介してみました。

今回はご紹介出来ませんでしたが、それぞれの画像形式のなかでさらに細かく種類が分かれています。私ももっと勉強して、画像を見た瞬間に「これはPING-8で」と、スマートに言えるようになりたいと思います。

ちなみに、ケーキのイチゴは中盤に半分食べて、最後に残り半分を食べる派です。
ではまた次回のブログで。

by ツボ

コメントを残す