有限会社キーノスロジックのロゴ

有限会社キーノスロジックのロゴマーク

Column

【サクッと解決】実は重要!拡張子の違いと選び方(それってjpg?png?)

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

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

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

Point

選び方を間違えるだけで、
パソコンやクラウドの容量を必要以上にとったり
画質が悪くなったり
ファイルが開けないなどのトラブルが生じます。

 

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

拡張子とはファイルの形式を識別するための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-8

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

 

②PNG-24

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

 

 

SVG(.svg)

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

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

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

 

 

拡張子の選び方

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

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

 

 

JPEG

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

PNG

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

GIF

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

SVG

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

 

まとめ

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

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

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

 

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

 

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

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

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

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

 

この記事はお役に立ちましたか?
キーノスロジックでは、「測量CADシステム開発」、「受託システム開発」、「ホームページ制作」のサービスを展開しています。各サービスの詳細は以下のリンクからご確認ください。