サービス

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

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?注目の「VSO」とは いつも週刊メルマガをご覧頂き、誠にありがとうございます。 今週は、CMSproマーケティングの下地が担当させていただきます。 最近は蒸し暑い日々が続いてますね。。。 皆さんいかがお過ごしでしょうか? そんな暑苦しぃぃ夏を乗り切るには・・・ 外の暑さに負けない仕事への熱いハートが大事で […]
  • ぞくぞくと導入されている!?ビジネス向けチャットツールのご紹介 こんにちは、CMSpro(シーエムエスプロ)の細川です。 先日、39県で緊急事態宣言が解除されましたが みなさまのお住まいの地域は、解除後なにか変化はございましたでしょうか? 都内は、各企業のテレワークが緩和されてきたのか 以前よりも電車にビジネスマンの方々が多く乗車されていらっし […]
  • 【4月20日】そんな装備で大丈夫か? 大丈夫だ、問題ない。 こんにちは。久保田です。 タイトルと一行目は、2010年のネット流行語大賞ですが、内容と関係は無いです。 唐突ですが、私は茨城から会社まで電車で通っております。 通勤ラッシュ、思っていたより壮絶で驚きました。 でも今週からは通勤時間をずらしていただいたので、ずっと立ち […]
  • まず、お客様の利益を考える こんばんは。 谷口です。 たくさん面接をしてきましたが、 「私はこういう能力があり、こういう形で御社の発展に貢献できます。」 という雇用者に私を雇うことのメリットを訴求する発言を […]
  • 条件交渉の基本 こんばんは!CMSproスタッフの山田です。 東京は、夏を感じる気候になってきました。 会社が移転してから、山田は片道15kmもの自転車通勤です笑。 花が咲く遊歩道を抜け、木々に囲まれた目黒川を下り・・・ なかなか健康的です笑。 さて、今日は「条件交渉術」をお伝えします! 目次━━━━━ […]
  • ホームページ集客成功3つのフレーム 一週間お疲れさまです。 最近、採用活動をしていて改めて ・顧客ターゲット明確にすること ・定義した顧客に提供できるメリットを明確にすること ・メリットを裏付ける実積を明確にすること の大切さを痛感しました。 採用であれば、 まず、どんな人に来て欲しいのかを明らかにしないと 「楽しく働けます!」 […]

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

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