サービス

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

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形式」とおぼえておけば問題ないかと思います。

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

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

– 沖野直人

関連記事

  • グロースハックをしてみよう いつもCMSpro週刊メルマガをご覧頂き、誠にありがとうございます。 今週は制作担当の秦野が担当させていただきます。 今回はホームページの運用「グロースハック」について書いていきたいと思います。 そもそもグロースハックとはなにか? 調べると 「ユーザーから得た製品やサービスについてのデータを分 […]
  • YouTubeから簡単にGIFアニメーションを作成できる方法 いつも週刊メルマガをご覧頂き、誠にありがとうございます。 今週は、CMSproサポート担当の沖野が担当させていただきます。 今回は、写真でもなく動画とも少し違う不思議なGIF(アニメーション) […]
  • 聞く力 こんばんは。 谷口です。 最近、読んだ本でおもしろかったのが、 「バカ田大学講義録なのだ!」 という本です。 基本的にくだらない内容なのですが、 「物事の見え方が、変わる」 […]
  • 電子契約サービス<操作方法編> いつもCMSpro週刊メルマガをご覧頂き、ありがとうございます。 今週は、池田が担当させて頂きます! じわじわと利用者が増えている電子契約サービス。 CMSproでもクラウドコントラクトhttps://cloudcontract.jp/ を使用している中で使うのが難しそう・・・といわれることも多 […]
  • 【3月9日】最終章◆検索エンジン上位表示の効果!! こんにちは!CMSproの山田です。 冬も終わりつつありますね!スノボにいけなくなるのが残念ですが、 春は新しいことがたくさんはじまる季節ですし、暖かくなるのでワクワクしますね! 「売れてるサイト」の秘訣ブログ、今回が最終章です! ハンコヤドットコム!を参考に、  『なぜ売れているのか? […]
  • 組織化に玉砕 こんばんは。 谷口です。 自分の下に社員がぶら下がっている 鍋蓋型組織からの脱却にかなり苦戦しています。 自分は、かなりのイライラとそれを克服するために考えつつ そのストレスをかなりお酒の力で癒やしながらマネジメントのスキルを身につけました。 実体験からもマネージメント能力を身につけるのは、 とて […]

WEBマーケティング情報一覧
補助金・助成金
契約書のコスト削減!簡単に使える中小企業専用/電子契約サービス

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