あなたは画像を何で保存していますか？
WEBサイトで使われている画像はJPG、PNG、GIFがだいたい60％を占めていると言われています。特にグラデーションや写真といった画像を保存するのに適しているファイル形式がJPGです。
JPGとは
JPGは静止画像のデータを圧縮する方法で、ピクセルという正方形の点を並べて表示する画像形式で、ピクセルを塗りつぶすことで画像が構成されます。色は1677万色のフルカラーで表現でき、複雑で繊細なグラデーションや様々な色が使われる写真に適した形式です。
一方で画像は正方形の点の集合であるため、画像を拡大していくと、構成したピクセルのより細かいところが表示されず、曲線や斜線に角ができてしまう欠点があり、アニメ風のイラストやアイコンといった色の境界がはっきりした画像とは相性がよくありません。
JPGは1677万色で写真データ画像に向いており、デジタルカメラやその他のデジタル画像撮影機器でもっとも使われているファイル形式です。またJPGは画像データから不要な情報を削除することで容量を圧縮することができますが、削除してしまうため元に戻すことはできません。
保存を繰り返すことで徐々にデータが劣化していきます。
GIFについて
GIFは256色までの対応が可能でアイコンや図形など色数を必要としない画像に適しています。GIFには透過機能があり、指定した色を透明にすることから、ロゴやボタン画像など背景がいらない画像に利用することができます。
また、GIFには複数の画像を重ねてアニメーションを表現することができ、短い動画などがGIF形式で保存されていることも多々あります。
特にGIFファイルの動画は容量が軽く、自動で動いてくれるため、スマホユーザーに対し、短時間で完結に伝えられるとして、SNSなどで広告を出すのに利便性がよいと注目されています。
PNGとは
PNGは他の画像形式より比較的最近に作られた拡張子なので様々な点で他の拡張子より利便性が高いとされています。
扱える色によって規格が複数あり、JPG/JPEGと同じく1677万色のフルカラーが扱える規格や、アニメーションの作れないGIFファイルのような規格もあり、複雑な写真から輪郭のはっきりしたイラストなど幅広い画像を保存できる画像形式です。
また、JPG/JPEGが非可逆圧縮方式で画像劣化を起こすのに対し、PNGは可逆圧縮方式のため、画像のサイズを変更しても劣化を起こすことなく画質を維持することができます。
万能の画像のように思えますが、画像容量が大きくなってしまうデメリットがあります。特に写真のような多くの色が使用されるJPG画像に対しては数十キロバイトの画像と同じクオリティをPNGでは数百キロバイトを超えてしまうこともよくあります。
ですからインターネットで送受信したりするのには不向きな画像形式と言えます。
WEBサイトに画像をアップする際はJPG
写真の場合は画質容量の観点からJPG、その他イラストやかんたんなアニメーションなどの場合はGIFと覚えておくと画像を保存する際迷わなくなります。
JPGとJPEG
JPGは「ジェイペグ」と読みます。「ジェイペグ」と聞いてWEBサイトの構築やの経験がある人ならJPEGではと思う方もいると思います。
こちらも「ジェイペグ」で拡張子では「.jpeg」と表現されます。この2つの形式は何が違うのでしょうか？WEBサイトではどの様に使い分ければいいのでしょうか？
JPGとJPEGの共通点・相違点
JPGとJPEGには以下のような共通点があります。
- JPEGとJPGはどちらもラスタ画像という形式の画像
- 大容量の写真情報を圧縮し、比較的高品質でもファイル容量を抑えることができる
- 画像調整ソフトなどで写真を保存する度に写真が劣化する
- 圧縮方法が非可逆圧縮なので後から小さい写真を大きくしたり、圧縮率を変更したりすることができない
JPGとJPEGの相違点
２つの違いですが実はJPEGとJPGには文字数以外にほぼ違いはありません。
もともと「ジェイペグ」はLinuxやMacでのOSでの画像の拡張子は「.jpeg」でした。
しかし、古いWINDOWS系のOSでの拡張子は3文字しか入力できなかったため、4文字の「Jpeg」では文字制限に引っかかるため省略して「jpg」となりました。
そして現在Windows系のOSは4文字の拡張子も使用できるようになりました。当然「jpeg」も使用できるようになりましたが、長年Windows系のOSを使っていた人々は「.jpg」で保存することになれていたため「jpg」の拡張子は廃止されず残すことになりました。
JPGとJPEGどちらが正しい？
本来ジェイペグはJoint Photographic Experts Groupの略であることや、jpgの拡張子が生まれた経緯からするとJPEGが正しい表記になります。
しかし、JPGに慣れ親しんだ人が多いために.jpgが残っており使用率はjpgが多く利用されています。有名なAdobeではこの2つの拡張子表記による混乱を避けるため、PhotoshopやGIMPといった画像編集ソフトでのJPEG画像はWindowsでもMacでもデフォルトを.jpgに統一しています。
Adobe のことを知らない人はいないかと思いますが Photoshop を含め Adobe では多くのツールを提供していますのでこちらで再度確認していただくのも良いかと思います。
WEBデザインの制作では、コードをかく前に、WEBサイトで使用する素材（写真やロゴ、イラストなどの各パーツ）を決めてから、「ワイヤーフレーム」と呼ばれる設計図を制作します。 [sitecard subtitle=あわせて読みたい u[…]
話を戻しますが、JPG か JPEG については特にこだわらないようであればjpgを拡張子にした方が一般的で効率がいいのです。
まとめ
今回はJPGの特徴とPNGやGIF、JPEGとの違いを紹介しました。
WEBサイトに使われる画像には様々な形式があり、それを理解し効果的に変えることは、閲覧者にとっても無駄な時間を省き、閲覧体験の改善に繋がります。今までなんとなくで使っていた画像の拡張子を見直してみませんか？