画像形式 [ JPEG, PNG, GIF, BMP, WebP ] について調べてみた

ことはじめ

サイト高速化のための手段をいろいろと考えていたのですが、 今自分が関わっているサイトだと、画像をいっぱい使っているということもあり、画像圧縮が一つの選択肢になりそうでした。

とはいえ画像の種類もそんなに知らないし特徴の理解も怪しいので、まずは基本的な画像形式について調べてみよう、というのがこの記事の趣旨です。

意外と画像形式を横並びに見る機会って少ない気がするので、よかったら見てみてください。

目次

• JPEG
• PNG
• GIF
• BMP
• WebP

各形式の紹介

JPEG

名称

• JPEG（ジェイペグ）
  • Joint Photograph Experts Group
    • この規格を作った組織の名前
    • 画像符号化の標準化を行なう事を目的として設立された組織らしい

拡張子

.jpg/.jpeg

特徴

• 圧縮画像(不可逆)のため、画質が劣化する
  • 画像を8×8ピクセルの正方形ブロックに分割して画像の変化の情報を抽出して、その一部を捨てている
  • http://funini.com/kei/math/jpeg.shtml

• 比較的データが軽い

• 1677万色対応

  • 圧縮方法の観点から、色種類の多い画像に適している
  • デジカメの写真のほとんどはこのファイル形式

PNG

名称

• PNG（ピング）
  • Portable Network Graphics
    • 特許使用の解釈に不安のあったGIFに替わるライセンス・フリーの画像形式として開発

拡張子

.png

特徴

• 圧縮画像(可逆)のため、画質が劣化しない
  • zip圧縮と似たアルゴリズム
    • http://www.webtech.co.jp/blog/optpix_labs/format/6657/
• 1677万色対応
• 比較的データ容量が大きい

GIF

名称

• GIF（ジフ）
  • Graphics Interchange Format
    • 以前 Unisys 社が特許を持っていたことにより、ライセンス権などの特許問題があったが、現在では特許の有効期限は切れている

拡張子

.gif

特徴

• アニメーションを設定できる
  • パラパラ漫画の要領
    • http://matome.naver.jp/odai/2140430611035542601
• 圧縮画像(不可逆)のため、画質が劣化する
  • LZW圧縮
    • http://nodamushi.hatenablog.com/entry/20090531/1243775161
• 256色対応
  • 写真には不向きで、ロゴマークやイラストのように境界がはっきりとしている画像に適する

BMP

名称

• BMP（ビットマップ）
  • ピクセルを用いた画像表現広汎を指す
  • より狭義な技術用語としては、「ビットマップ」の用法をモノクロ2値画像に限定し、カラーやグレースケール階調画像を含める場合はピクセルマップ、ピクスマップ（pixmap）と呼ぶこともある。

拡張子

.bmp

特徴

• 非圧縮画像のため、画質が劣化しない
  • RLE（Run Length Encoding）
    • http://www.wdic.org/w/TECH/BMP
• データが重い
  • 古典的かつ単純なデータ圧縮を用いているため、圧縮率はそれほど期待できない
• 1677万色対応で高画質
• Windows標準の画像形式

WebP

名称

• WebP（ウェッピー）
  • 米Googleが開発しているオープンな静止画フォーマット
  • GooglePlay の画像とか
    • https://lh3.ggpht.com/PmqMQXUSxvLjiUc82xI-cnvhclrlLoIExL2TC4ZiUHdgv2KE8mMo7tkrxLuk-ig7j0k=w300-rw
  • 詳しくは下記
    • https://html5experts.jp/jxck/2550/

拡張子

.webp

特徴

• 独自の圧縮技術
  • http://blog.chromium.org/2013/02/using-webp-to-improve-speed.html
• 一通りの基本機能を持つ
  • 可逆 / 非可逆圧縮が可能
  • 透過 (アルファチャネル) が可能
  • 写真の圧縮にも向いている
  • アニメーションが可能
  • カラープロファイル対応
    • https://howto.clip-studio.com/library/page/view/clipstudiopaint_tora_001_004
  • メタデータを持たせることができる
• 未対応のブラウザ多し
  • safari 未対応
  • Firefox 議論中

おわりに

圧縮方法の可逆/非可逆の違いくらいは知っていましたが、その方法により向き不向きな画像があるとか、カバーしている色の数が違うなどは初耳で新鮮でした。

上記は本当に基本的なもの+αですが、他にも JPEGmini など新しいフォーマットも普及しつつあるらしいので、また別の機会で整理してみたいと思います。

参考サイト

• 画像拡張子一覧！軽いファイルや画質の違いは？PNG・JPG・BMPなど | サラリーマンの副業はインターネットビジネスのアフィリエイト＠アフィ活のすすめ
• WEB画像について−GIF・JPEG・PNGの特徴
• 最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか (その画像形式でいいですか？)｜Web Design KOJIKA17
• WebP – Webを速くするためにGoogleがやっていること Make the Web Faster 01 – | HTML5Experts.jp

追記 2015/07/09

拡張フォーマットとかで、可逆圧縮の JPEG とかもあったりするらしいです。
あとは PNG をあえて非可逆圧縮したりとか...いろいろあるんですね。

• Lossless JPEG
  • Lossless JPEG - Lossless JPEGの概要 - Weblio辞書
• TinyPNG
  • PNG画像の圧縮率が高すぎる可逆圧縮、そして非可逆圧縮との違いについて | TREVOスタッフblog