jpg-gif-png_ecmg

WEBデザイン

”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、ブログでの使い分け方

WEBサイトで使う画像の拡張子、何にしてますか?基本的に目にするのは「.jpg」「.gif」「.png」ですよね。その中でも一番よく見かけるのが「.jpg」です。

じゃあ全部「.jpg」にしたらいいんでしょうか。それとも使い分けが必要?ちょっと調べたら色々と情報は出てきますが、さらに調べていくとそのうちどんどん…深みにはまっていきそうなほど、奥が深い話でもあるようです。

私はWEBデザイナーではありませんし、WEBで画像を扱うとすればブログレベル。ここではそんな“ブログレベラー”な私とあなたに必要な画像形式による違いと特徴、使い分け方だけをまとめます。

使い分けの判断基準は、画質とファイルサイズ。ファイルサイズも基準とする理由は、画質にこだわりたい反面、WEBサイトでのページ表示が “モッサリ” としてしまう原因となり得るからです。

まず知っておきたいこと
(1)ピクセルの話

まず画像形式としては、.jpgは「JPEG」、.gifは「GIF」、.pngは「PNG-8」と「PNG-24」の2つが存在し、全部で4つに分けられます

そしてどの形式も【ピクセル】(px)というすごく小さな正方形で構成されています。目を凝らして “どアップ” で見ると、色がついた正方形が並んでいるのが見え….見えませんね。よっぽど画像が粗くない限り肉眼では見えません。では実際に “どアップ” してみましょう 

jpg-gif-png_02

jpg-gif-png_01

こんな感じで、1ピクセルごとに色が割り当てられて画像は表現されています。同じような色の中にも、微妙に違う色が使い分けられていることが分かります。ということは、ピクセルごとに使える色の種類が多ければ多いほど、綺麗な画像を表現できるということです。

余談ですが、よくカメラの宣伝で●●万画素という表現を目にします。画素数とは、一定の範囲内にピクセル君たちがどれだけギュッ!と詰まっているか、ということ。つまり画素数が高いほど解像度が高くなるわけですね。

まず知っておきたいこと
(2)大まかな特徴分類

いきなりですが、先に衝撃の事実をお伝えします。今回の4つの形式は全て、自分が何も処理をしていなくても既に圧縮変換されている状態の形式です。

・・・ハイ、すみません。衝撃なんか感じませんよね。そんなこと私たちには関係ないです。WEB上に表示されたとき、自分も訪問者も満足のいく結果が得られればいいんです

私たちが目指すところは、【今の状態からできるだけ綺麗なまま、できるだけ重たーくならないようにバランスをとる】ことです。ではまず特徴的な性質でざっくり分類します。

  色数 圧縮 透過
JPEG 1670万色 非可逆 ×
GIF 256色 可逆
PNG-8 256色 可逆
PNG-24 1670万色 可逆

【色数】⇒1pxにおいてどれだけの色の選択肢があるか、ということ。

【圧縮】⇒非可逆の場合、保存しなおすだけで劣化します。

【透過】⇒背景を透明にして保存できるかどうか、ということ。

つまり、JPEGは保存のたびに劣化し、背景を透明にすることも出来ません
一方、GIFとPNGは何度保存しなおしても劣化せず、背景を透明にすることも出来ます

「えぇ…JPEG、意外とイマイチ…じゃあ、PNG-24だけでOKね。」

なんて思ってしまいそうですが、一概にそうとも言えません。画像にもよりますが多くの場合、PNG-24はJPEGよりファイルサイズがガツンと大きくなります。というわけで、やはり使い分けが大事になってきます。

彼らをもうちょっとだけ知りましょう。どうやらみんな、長所と短所があるようです。

JPEG(.jpg)

  色数 圧縮 透過
JPEG 1670万色 非可逆 ×

読み方は「ジェイペグ」または「ジェーペグ」。拡張子は「.jpg」です。たまに「.jpeg」という寝ぐせのついた姿も見かけますが、同一人物です。

長所

1670万色の色を表現することができるため、たくさんの色を必要とする写真などに向いています。別の言い方をすると、輪郭がクッキリしていない、連続して色が変化する画像に適しています。そのような画像を対象とした場合、ファイルサイズも他の形式と比べ一番小さくなります。

スマートフォンで撮った写真がデフォルトでJPEG形式にされているのもうなずけます 

jpg-gif-png_11

また、画質を指定して保存できるのもJPEGの強み。画質指定で上手く不要な色を排除できれば、見た目のクオリティーをほとんど落とさずに期待以上のファイルサイズ圧縮が可能です。上の画像も下記のような圧縮を施しています。

例)Photoshopでの書き出し時 

jpg-gif-png_03

jpg-gif-png_04

ただしあまり圧縮しすぎると、ブロックノイズというものが発生し、劣化が顕著に現れます。高画質であるほどファイルサイズは大きくなりますが、風景写真のような色彩豊かなものであれば、最高画質で書き出してもPNG-24より概して小さくなります。

短所

逆に、輪郭のクッキリしている文字や図形などが含まれている画像には向いていません。先に説明したように、JPEGは非可逆圧縮。ピクセルごとの境目を目立たなくさせるアンチエイリアスという処理が施されるため、クッキリしていたラインがぼやけたりするのです。

保存し直すだけでも改めて元画像を”再現”しようとするため、リサイズ保存だけでも劣化(変化)は起こります。

また、色数の少ないロゴやアイコンなどを保存すると、他の形式と比べファイルサイズが大きくなりがちです。色彩表現力が高く、綺麗にグラデーションを再現する力があることが、かえって太っちょ画像にしてしまうのです。

GIF(.gif)

  色数 圧縮 透過
GIF 256色 可逆

読み方は「ジフ」。拡張子は「.gif」です。
今では主にGIFアニメーションとして使われることが多い形式です。

長所

線・文字や図形など輪郭のはっきりしたものや、色変化の少ない画像の保存に適しています。

が、画像保存する場合の長所としては少なく、強いて言えば単色や2色ほどのイラストやアイコンなど、色数が極端に少ない画像であれば非常に軽くなる恩恵ぐらいでしょうか。

インターレース設定をして書き出せたり(後述)、背景の透過処理ができたり、可逆圧縮のため劣化も起こりませんが、一番の使いどころとしてはやはり、GIFアニメ-ションが作成できる点でしょう。

GIFアニメーションの例はこんな感じ 。この例ではじわじわと色を変化させています。

Requ.log_logo

基本的なGIFアニメーションの作り方はこちら 

ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

短所

256色までしか表現出来ないので、色彩豊かな画像や写真には完全に不向き。写真などを書き出す場合、256色の内の近い色に置き換えられて再現されることになります。

また書き出し時に、使う色数を指定し、ファイルサイズを減らして保存することも出来ますが、元々少ない256色の中からあえて減らすシチュエーションは少ないでしょう。とは言っても….やはりGIFアニメーションとしては重宝する、無くてはならない形式です。

例)Photoshopでの書き出し時 

jpg-gif-png_05

PNG-8(.png)

  色数 圧縮 透過
PNG-8 256色 可逆

読み方は「ピング…えいと」?でしょうか。分かりません。拡張子は「.png」です。

長所

GIFと同じように、線・文字や図形など輪郭のはっきりしたものや、色変化の少ない画像の保存に適しています。インターレース設定をして書き出せたり(後述)、背景の透過処理ができたり、可逆圧縮のため何度保存しなしても劣化は起こりません。

つまり基本的にはGIFとほぼ同じ扱いになります。その中でもGIFと比べた上で長所を挙げるとすると、グラデーションなどを含む単色系の画像に対しては、GIFよりもサイズが小さくなる場合が多いことです。例えばこんな場合です 

jpg-gif-png_08

WEBサイトのメニューバーやアイコンなどに利用されることがあるかな、といった感じです。GIFより後発の形式なので、今では単色系の静止画像を扱う際にのみ、GIFの代替形式になっている存在、という印象です。

短所

短所もGIFとほぼ同じ。256色までしか表現出来ないので、色彩豊かな画像や写真には完全に不向きです。GIF同様、書き出し時に、使う色数を指定し、ファイルサイズを減らして保存することが出来ますが、上の画像のように元々色数が極めて少ない場合、あえてファイルサイズを減らそうとするシチュエーションは少ないでしょう。GIFのようにアニメーションを作成することも出来ません。

長所で挙げたような、「グラデーションなどを含む単色系の静止画像」を書き出す際に、JPEGやGIFの代わりにチョイスする場合が多いでしょう。

例)Photoshopでの書き出し時 

jpg-gif-png_06

PNG-24

  色数 圧縮 透過
PNG-24 1670万色 可逆

読み方は…ピング…トゥエニィ…分かりません。拡張子はPNG-8同様「.png」です。

長所

PNG-8の長所に加え、JPEGの長所を併せ持った最強形式です。そのため、たくさんの色を必要とする写真などにも向いており、線・文字や図形など輪郭のクッキリしたものや、色変化の少ない画像の保存にも適しています。

加えて背景の透過処理も可能で、可逆圧縮のため劣化も起こりません。画像のクオリティーを考えた場合、この形式を選んでおけばまず間違いありません。ところが…

短所

ご想像通り、基本的にはどんな素材でもファイルサイズが肥大化します。特に差が顕著なのは、「輪郭がクッキリしていない、連続して色が変化する画像」。つまりJPEGの得意とする写真のような素材です。

そんな素材を対象とした場合、JPEGとのファイルサイズの差は数倍になり得ます。例えば手元の画像で試してみましょう。

PNG-24 | JPEG画質60% 

jpg-gif-png_09

jpg-gif-png_10

左がPNG-24、右が画質指定で60%まで落としたJPEGです。942kbと156kb。ファイルサイズの差はおよそ6倍になります。では画質の差はどうでしょう。パソコン環境であれば、それぞれクリックで拡大して左右キーで見比べられます。6倍もの違いを感じることができますか?

環境や目の肥え具合によって異なる意見もあると思いますが…私はRetinaディスプレイでも6倍の差を感じることは出来ません。全く違いを感じられない場合もあると思います。

また、PNG-24は書き出しの時点で色数指定は出来ません。軽量化を図る場合は、書き出し後に外部圧縮サービスや圧縮プラグインで処理を施すことになります。

おすすめの圧縮方法はこちら 

きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG imagesの設定と使い方

別の対策としては、「インターレースPNG」として書きだす方法はあります。インターレース設定が組み込まれた画像は、ページが表示された序盤では粗めの画像を速めに表示し、次第に鮮明な画像に切り替えていく、というもの。体感的には速く感じることもありますが、ファイルサイズ自体は大きくなります。効果の程は、環境や個人によって異なるように思えます。

例)Photoshopでの書き出し時 

jpg-gif-png_07

【結論】

jpg、gif、pngの使い分け方

 輪郭がクッキリしていない、連続して色が変化する画像、つまり写真のような画像に対しては、JPEG形式を選択。そして好みにより、ある程度画質を落として書き出す。

 輪郭のクッキリしている文字や図形などが含まる画像に対しては、PNG-24形式を選択。

 グラデーションなどを含む単色系の静止画像に対しては、PNG-8形式を選択。

 短いチュートリアルに使用するようなアニメーション作成には、GIF形式を選択。

 背景を透明にしたい場合は対象画像に応じてPNG-24、PNG-8、GIF形式から選択。

以上です。環境やサイト運営の意図により価値観は異なってくるかもしれませんが、今回は冒頭で宣言したように、“ブログレベラー”における基準としてまとめました。

ここで紹介した知識や使い分け方は、MacのRetinaをはじめとする高解像度ディスプレイ対応においても非常に有効に活用できます。WEBサイトをMacでも見栄え良くしたい人は、こちらもあわせて覗いてみてください 

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

それにしても細かい話題を長々と綴りました。最後までご覧いただきありがとうございました!

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  2. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  3. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  4. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  5. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!

関連記事

  1. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点

    TCDテーマからTCDテーマへ!魅了されてしまった。ついに乗り換え…

  2. tcd-theme-selection_ecmg-ps
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  4. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

  6. retina-weight-saving_ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. todoist-extension_ecmg
  2. display-speed_ec
  3. business-books_ecmg
  4. adjust-the-button_ecmg
  5. todoist-tips_ecmg
  6. valuable-content-from-image_ec
  7. tcd-theme-selection_ecmg-ps
  8. tcd-theme-user-review_ecmg

ピックアップ記事

  1. intuitive-custom-post-order_ec
  2. like-button-card_ecmg-ps
  3. tcd-css-customize_ecmg
  4. original-share-button_ecmg-ps
  5. compress-jpeg-png-images_ecrt
  6. blog-theme-mag_ecmg-ps
  7. tcd-theme-options_ecmg
  8. todoist-advanced_ec

強みを見つけて、活かしていこう。

business-books

タスク管理で、自己管理。

todoist

掘り出し記事

  1. todoist-design_ec
  2. analytics-ip-filter_ecmg
  3. mailbox-goodbye-newapp_ec

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. tcd-theme-widget_ecmg
  2. lightshot_ecmg
  3. widgetoon-js-count-jsoon_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. reset-button_ecrt
  2. blog-contents_ecrt
  3. restriction_ecmg-ps
  1. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  4. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
PAGE TOP