0364352835
メールでお問合せ

代表的な画像ファイルの形式とそれぞれの特徴

2020年12月22日(火)メルマガサービス

今週は、CMSpro制作担当の沖野が担当させていただきます。

代表的な画像ファイルの形式とそれぞれの特徴
制作担当: 沖野直人

今回は、いくつかある画像ファイルの形式とそれぞれの特徴をご紹介していきたいと思います。

みなさんは、撮影されたお写真をパソコンへ保存するときにどのような形式で保存されてますか?
大半の方が形式といっても、あまり気にしたことがないのではないでしょうか?

ホームページを作る際に使う形式は主に、【JPEG・PNG・GIF】の3つの形式を使用します。
以下では、それぞれの形式の基本的な内容と特徴をまとめました。

JPEG形式の基礎

JPEGとは、今回ご紹介する3つの形式の中でも最も、代表的な形式です。
正式名称は、Joint Photographic Experts Groupといい、規格を制定した組織の略称が名称に使用されており、約1,677万色もの画像を扱えるため、スマホやデジカメ写真の記録用に使用されているケースが多い形式です。

JPEG形式の特徴

・拡張子が複数ある

JPEG形式には、「.jpg」や「.jpeg」などの他に「pjpeg」「jpe」「pjp」「jfif」などの様々な拡張子がありますが、すべて同じものなので、違いは特にありません。
大抵の場合は、「.jpg」や「.jpeg」を使っておけば全く問題ありません。

その中でもその昔、拡張子の文字数が3文字までという制限があったため、
「.jpg」を一般的に使用することが多いように思います。

・上書き保存すると劣化するケースがある

JPEGは不可逆圧縮を行う影響上、画質が劣化してしまうのがデメリットの一つです。
※不可逆圧縮とは、1回圧縮すると元のデータ通りに戻せない仕組み

JPEGでは、画像を8×8ドット区切りのブロックとして近い色に置き換えて表示させていますが、
圧縮した際に、データを切り捨てているため、それゆえに完全に元の状態に戻すことができません。

ただ、劣化するといっても1回や2回の圧縮の場合は、人間の目で確認ができないぐらいの劣化なので、そこまで神経質になる必要はありません。

PNG形式の基礎

PNG形式とは、Portable Network Graphicsといい、Webで画像を扱うファイルフォーマットとして、1996年に登場した比較的新しいファイル形式です。

8bitと24bitのどちらで保存するかを選択でき、
8bitの場合は256色でのグラフィックスに適した保存ができます。
24bitでは、約1,677万色の写真が保存でき、さらに透過色をもたせることができます。

ただし、上記のとおり新しい形式のため、古いPCやブラウザをはじめ、
携帯電話ではPNGに未対応の場合もあるため、画像データが表示されないことが問題点としてあります。

PNG形式の特徴

圧縮してもデータを完全に復元できる

先程の、JPEGとは異なり、PNG形式は圧縮してもデータを完全に復元できる可逆性圧縮という特性をもっています。

ただし、その分、不可逆圧縮とは違い、容量が数倍程度大きくなってしまうのが欠点の一つとも言えるでしょう。

透過処理をもたせることができる

透過処理とは、指定色に対して透過情報を加えることができる機能で具体的には、背景を透明にすることが可能です。
WEBの場合は、ロゴの箇所に使用するケースが多い形式です。

GIF形式は、Graphics Interchange Formatといい、
容量を可能なかぎり減らしつつ、Webページによる表示もできるように開発された画像形式です。

使用の場合は特許料が一時期に要求されたことがあるため、それを境にしてPNG形式が生まれたことによって、使用が激減した経緯があります。

GIF形式の特徴

アニメーションで動く画像が実現できる

GIF形式の最大のメリットといえば、GIFファイル内に
複数の画像を挿入することで、パラパラ漫画のような動きを実現させることができます。
ただ、色数が256色までと少ないため、簡易的なアニメーションとなります。
簡単なイラストを簡易的に動かしたいという要望の場合は、GIF形式が最適だといえます。

データ容量が小さい

GIF形式の場合は、オリジナルの圧縮方法をつかっているのと、上記でご紹介したとおり色数が256色までという制限があるため、比較的データ容量が小さく負荷が少なく表示させることができます。

いかがでしたでしょうか?

普段あまり意識することが少ない画像形式ですが、大きくわけて【JPEG・PNG・GIF】の3つの形式があります。
基本的には、
「写真=JPEG形式、イラスト=GIFまたはPNG形式」とおぼえておけば問題ないかと思います。

その中でもそれぞれ、一長一短はありますので、目的に応じて色々と試行錯誤して試してみるのもいいかもしれません。

最後までお読みいただき、ありがとうございました。

– 沖野直人

関連記事

  • モバイルフレンドリーアップデート導入開始!スマホSEOまとめ CMSpro週刊メルマガをご覧頂き、ありがとうございます。 毎月第4週は、SEO・リスティングを担当している長谷川がお送りいたします。 「モバイルフレンドリーアップデート」が4月21日よりついに開始いたしました。 […]
  • 必要とされる制作会社とは いつもCMSpro週刊メルマガをご覧頂き、誠にありがとうございます。 今週は制作の秦野が担当させていただきます。 弊社はほぼ100%、お客様から直受けでHPを制作させていただいています。 そのため、どういった事を制作会社(弊社)に求めているか?直接、要望を伺えるのはありがたい事です。 […]
  • 意外と知られていないGoogleドライブ いつも週刊メルマガをご覧頂き、誠にありがとうございます。 今週は、池田が担当させていただきます。 最近はクラウドに写真やファイル、データの保管ができる時代です。 みなさんはクラウドストレージなどは使用されていますでしょうか? 本日は、そんなクラウド代表ともいえる【Googleドライブ】についてご紹 […]
  • 成功するウェブサービス3つのポイント ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┃CMSproのメルマガでしか言えない話┃【 CMSpro公式メルマガ】 […]
  • 【はじめまして】新スタッフの島田です はじめまして、11月半ばから新しく一緒に働かせていただくことになりました、島田です。 以前は映像系の制作会社で演劇の撮影や編集等していました。 今後はウェブまわりの知識を増やしながら、自分のできることを増やしていきたいと思っています。 温かく見守っていただければ幸いです。 それでは、よろしくお願い […]
  • 最近のSEO対策 – 内部被リンク数 こんばんわ。 谷口です。 内部被リンク数も大切じゃないかという点に最近、SEO対策をしていて気がつきました。 内部被リンク数とはSEO対策していページに、同じサイトの他のページから どれだけリンクが貼られているのかという数のことです。 CMSproのサイトの場合、SEO対策をしているトップページ […]

CMSpro Youtubeチャンネル
補助金・助成金
契約書のコスト削減!簡単に使える中小企業専用/電子契約サービス

東京都港区芝浦3-14-8芝浦ワンハンドレッドビル2F運営:リンヤ株式会社
© 2021 CMSpro All Rights Reserved.