みなさんは画像ファイルやデータを開く際に
「.jpg」
「.png」
というような表示を見たことがあるのではないでしょうか。

一体これらは何を表しているのか、
そして
どう使い分けれたらいいのか

この視点で整理をしてみます。

そもそも拡張子って何？変更するとファイルが開けないかも

拡張子とは、ファイルの形式を識別するための2～4字の文字列のことです。

画像データの「sample.jpg」、「sample.png」
文章ファイルの「sample.xlsx」、「sample.doc」
などが有名です。

これらの拡張子は、パソコンやアプリに対して
「このファイルは、このアプリで開いてください」というメッセージの役割をしています。

なので、
「sample.xlsx」というファイルをクリックすると、パソコンは「あぁ、エクセル(xlsx)」で開けばいいファイルなんだ、と認識して、開いてくれます。

だからこそ、
闇雲に「sample.xlsx」を「sample.doc」に変えてしまうと、パソコンやアプリからは、中身違って開けないよ、ってなります。最悪の場合、ファイルが壊れて復元ができなくなります。

拡張子の種類

今回は画像の拡張子の使い分けについて整理してみます
保存する拡張子の選び方次第で、よりきれいな画像を使えるようになります。

JPEG(.jpg)

JPEGは、フルカラーの表示に対応したファイル形式です。

カラーは約1670万色。

写真やグラデーションを多用したグラフィックに適しています。

＊圧縮率を調整することができます。

圧縮率を高くするとファイルは小さくなりますが、画質が下がってしまいます。

GIF(.gif)

こちらはJPEGよりもファイルサイズが小さく保存できるファイル形式です。

なお、使用できるカラーは256色になります。

パラパラ漫画のようなアニメーションを作ることができます。

後述のPNG形式が生まれてからはあまり使われませんが、

荒めの透過をすることができます。

PNG(.png)

こちらは、写真のようにカラーの多い画像にも、ペタ塗りのグラフィックにも対応できるファイル形式です。

万能なファイル形式で、高品質な透過ができることがポイントです。

PNGには二種類あります。

① PNG-８

色数が256色に限定され、簡易的な透過だけができる

②PNG-24

フルカラーで、高品質な透過ができる。

SVG(.svg)

こちらは、Web上で使用できる画質を保ったまま拡大縮小が可能なファイル形式です。

JPEGやGIFなどが「ビットマップ形式」という色の情報をもつドットの集合で表現されるのに対し、SVGは「ベクターデータ」に分類され、数式で表現します。

HTMLに似た書式で書かれたデータのため、後から色やサイズの変更が生じた際に、画像専用ソフトを使わなくとも、CSSで編集したり、アニメーションを付けることが可能です。

拡張子の選び方

上ではそれぞれの特徴をご紹介いたしました。

実際に使う際に、選びやすいよう整理してみました。

JPEG

・写真の色やグラデーションが複雑なもの
・ファイルのサイズを変更することができる。

PNG

・文字や図が含まれ、色数が多く、透過させたいときに適している
・JPGよりもファイルサイズが重くなりやすい

GIF

・簡単なアニメーションを作ることができる

SVG

・ロゴやアイコンなど、拡大縮小に敏感なもの
・svgタグでデータ自体を直接HTMLに埋め込むことができる

まとめ

今回は、Webを扱ううえで代表的なファイル4つをご紹介しました。

適切なファイルことを選ぶことは、あなた自身の使い勝手や、

閲覧時の美しさ、そしてファイルの破損を防ぐことにつながります。

適切なファイル形式を使用して、きれいなサイトを作品を目指しましょう。

有限会社 キーノスロジックはホームページ制作やシステム開発を行っております。

検討中の方は下記ページよりお電話かお問合せフォームにてご連絡下さいませ。

担当者より1営業日以内にお返事を致します。

自社のシステムをオーダーメイドで作るなら信頼と実績のあるキーノスロジックでどうぞ。