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

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

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

– 沖野直人

関連記事

  • 弊社がWordPressを使ってホームページを制作する理由 いつも週刊メルマガをご覧頂き、誠にありがとうございます。 今週は、CMSproサポート担当の沖野が担当させていただきます。 ********************************************************** […]
  • 集客用サイトは見た目が何割? 今週は、CMSpro制作担当の沖野が担当させていただきます。 集客用サイトは見た目が何割? 制作担当: […]
  • 細かいことを大切に こんばんは。 谷口です。   9月までにCMSproのホームページをフルリニューアルすることに 決めました。   それにともない、少しずつホームページを変更をしています。   今週の頭に、スライドショーを導入しました。   各スライドのキャッチコピーがいまい […]
  • 組織作り おはようございます。 谷口です。 学校に馴染めず、就職もしなかった自分が、 今、組織作り一生懸命になっています。 なんだか不思議だな~と思いながらも これが、うまくいかないとこれ以上会社が、大きくならないので […]
  • 行動経済学で顧客心理を探る! いつもCMSproのメルマガをご覧いただき有難うございます。 今週は、制作担当の石束が担当します。 本日のテーマは 『行動経済学から探る顧客心理』 です! いきなりですが、皆さまは行動経済学のことをご存知でしょうか。 2017年、米シカゴ大学のリチャード・セイラー教授がノーベル経済学賞を受賞し 研 […]
  • ターゲティング入門!幅広く応用できる”MECE”の切り口 いつもメルマガをご覧頂き、ありがとうございます。 今週は西が担当させて頂きます。 弊社がお送りさせていただいたヒアリングシートの内容を覚えていらっしゃいますか? ヒアリングシートの中で「何を書いたら良いのか思いつかない」という箇所はございませんでしたか? […]

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