jpg-gif-png_ecmg

WEBデザイン

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

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

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

jpg-gif-png-ins1

私は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)大まかな特徴分類

jpg-gif-png-ins2

いきなりですが、先に衝撃の事実をお伝えします。今回の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)

jpg-gif-png-ins3

形式 色数 圧縮 透過
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)

jpg-gif-png-ins4

形式 色数 圧縮 透過
GIF 256色 可逆

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

長所

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

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

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

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

Logo_3sec_40f

基本的なGIFアニメの作り方

短所

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

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

例)Photoshopでの書き出し時

jpg-gif-png_05

スポンサーリンク

PNG-8(.png)

jpg-gif-png-ins5

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

読み方は「ピング」・・・なんですが、その後は「えいと」でしょうか、世界的には。ピンパチ君とか呼びたくなりますが正式には分かりませんごめんなさい。拡張子は「.png」です。

長所

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

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

jpg-gif-png-12

今回は伝わりやすいように、ちょっと下品なほどグラデーションをかけましたが・・・WEBサイトのメニューバーやアイコンなどに利用されることがありそうなパターンですね。

GIFより後発の形式なので、今では色数の少ない静止画像を扱う際にのみ、GIFの代替形式になっている存在、という印象です。例えば私の場合、こんな画像をPNG-8で書き出します。

blog-theme-mag_07

todoist-tips_24

WordPress管理画面や、スマートフォンアプリの設定画面。
これらも「使用されている色数が少なく、輪郭がはっきりしている画像」、ですよね。256色でもカバーできるんちゃう?という判断です。

もちろんGIFを利用してもいいのでしょう。これは「PNGのほうが後発」「GIFはGIFアニメ専用」という、個人的な感覚からの線引きです。こだわるチャレンジャー精神旺盛な方は、何度か両方で書き出し、画質やファイルサイズ諸々比較してみてください。

今では閲覧環境による表示不具合等は考えにくいので、好みで選んでよいと思います。

短所

短所もGIFとほぼ同じ。256色までしか表現出来ないので、色彩豊かな画像や写真には不向き。GIF同様、書き出し時に使う色数を指定し、さらにファイルサイズを減らすことは可能です。

ただし元々色数が極めて少ないのであれば、さらにファイルサイズを減らそうと詰めるべきシチュエーションは少ないでしょう。GIFのようにアニメーションを作成することも出来ません。

長所で挙げたような、「使用されている色数が少なく、文字や図形など輪郭がはっきりしている画像」を書き出す際に、JPEGやGIF、後述するPNG-24の代わりに選ぶことになるでしょう。

例)Photoshopでの書き出し時

jpg-gif-png_06

PNG-24

jpg-gif-png-ins6

形式 色数 圧縮 透過
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は書き出しの時点で色数指定は出来ません。軽量化を図る場合は、書き出し後に外部圧縮サービスや圧縮プラグインで処理を施すことになります

おすすめの圧縮方法

別の対策としては、「インターレースPNG」として書きだす方法はあります。インターレース設定が組み込まれた画像は、ページが表示された序盤では粗めの画像を速めに表示し、次第に鮮明な画像に切り替えていく、というもの。

体感的には速く感じることもありますが、ファイルサイズ自体は大きくなります。効果の程は環境や個人によって異なるように思えるため、私は利用していません。

例)Photoshopでの書き出し時

jpg-gif-png_07

スポンサーリンク

=まとめ=

jpg-gif-png-ins7

jpg、gif、pngの使い分け方

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

 輪郭がクッキリしている文字や図形が含まれ、さらに色彩が豊かな画像に対しては、PNG-24形式を選択。書き出し後は圧縮サービスなどを利用し、ファイルサイズを落とすことが望ましい。

 輪郭がクッキリしている文字や図形が含まれるが、色彩表現の少ない画像に対しては、PNG-8形式を選択。

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

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

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

画像関連記事

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

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  2. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  3. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  4. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  5. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…

関連記事

  1. meta-seo-inspector_ecmg

    マーケティング

    基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO…

    せっかく設定したなら、チェックしよう。メタタイトル、メタディスクリ…

  2. adjust-the-button_ecmg

    ワードプレス

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

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

  3. analytics-ip-filter-ecmg
  4. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  5. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

  6. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. adjust-the-button_ecmg
  3. retina_ecmg
  4. tcd-theme-selection_ecmg-ps
  5. improvement-flow_ecmg
  6. tcd-mag_ecmg-ps

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

todoist

人気記事

  1. media-setting_ec
  2. chrome-font_ecmg
  3. todoist-basic_ec-ps
  4. child-theme_ecmg
  5. screenpresso-initial-setting_ec
  6. jpg-gif-png_ecmg

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

tcd-mag

ピックアップ記事

  1. chrome-font_ecmg
  2. original-share-button_ecmg-ps
  3. annotation-image-ecmg
  4. todoist-routine_ecrt
  5. tcd-theme-options_ecmg
  6. quicktag_ecmg

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

retina-os-solution

掘り出し記事

  1. browzer-extension_ec
  2. retina-os-solution_ecmg
  3. pushbullet_ec
  4. analytics-ip-filter-ecmg
  5. todoist-design_ec
  6. mailbox-goodbye-newapp_ec

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

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. compress-jpeg-png-images-ecmg
  2. original-share-button_ecmg-ps
  3. facebook-page-plugin_ecmg-ps
  4. tcd-theme-options_ecmg
  5. lightshot_ecmg
  6. blog-theme-mag_ecmg-ps

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. todoist-tips_ecmg
  2. valuable-content-from-image_ec
  3. tcd-mag_ecmg-ps
  4. extension-tools-for-bloggers_ec
  5. adjust-the-button_ecmg
  6. display-speed_ec

人気記事

  1. media-setting_ec
  2. chrome-full-screen-capture-ecmg
  3. compress-jpeg-png-images-ecmg
  4. chrome-font_ecmg
  5. jpg-gif-png_ecmg
  6. screenpresso-initial-setting_ec
  7. todoist-basic_ec-ps

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  2. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  3. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
  5. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
PAGE TOP