拡張子 - one log https://one-time-life.net 主にガジェットやライフスタイル、サービスの紹介や実際に購入した物のレビューなど。 Thu, 25 Mar 2021 09:07:58 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://one-time-life.net/wp-content/uploads/2021/04/cropped-iconmonstr-cube-2-240-32x32.png 拡張子 - one log https://one-time-life.net 32 32 「拡張子」の種類や特徴まとめ！各拡張子の適切な使い方なども解説。 https://one-time-life.net/life/extension-jpg-png-gif-svg/ https://one-time-life.net/life/extension-jpg-png-gif-svg/#respond Fri, 19 Mar 2021 00:11:46 +0000 https://one-time-life.net/?p=2445 こんにちは！ハナノです！（@K11936151） 一度は聞いたことがある「拡張子（画像フォーマット）」。 このような方は結構いらっしゃると思います。 Webサイトに画像をアップロードする際には適したファイル形式を選ばない

The post 「拡張子」の種類や特徴まとめ！各拡張子の適切な使い方なども解説。 first appeared on one log.

]]> こんにちは！ハナノです！（@K11936151）

一度は聞いたことがある「拡張子（画像フォーマット）」。

聞いたことはあるけど種類が多くてよくわからない
画像をアップロードしたいけどどのファイル形式を選べば良いかわからない

このような方は結構いらっしゃると思います。

Webサイトに画像をアップロードする際には適したファイル形式を選ばないと画質が悪くなってしまったり、データの復元が困難になってしまったりと不具合が生じる可能性があります。

それぞれの拡張子の特徴を理解し、適した運用をすることが重要です。

今回はそのような方向けにそれぞれの拡張子の特徴や適切な使い方を解説していきます。

そもそも拡張子（画像フォーマット）ってなに？

拡張子の種類

拡張子とはファイルの種類を認識するために
ファイル名の末尾につけられる文字列のこと。

出典；Wikipedia

そんなことはわかっとんねんw

という方もいらっしゃると思いますが、ここからは特に画像拡張子について詳しく説明していきたいと思います。

拡張子（画像フォーマット）とは

「画像データを圧縮したり表示したりするファイルの種類」

で”画像フォーマット”とも呼ばれます。

代表的な画像ファイル形式

・「.jpg」　　・「.png」　　・「.gif」　　・「.svg」

などが挙げられます。

画像ファイルのファイル名を見ると「ファイル名.jpg」のように拡張子が付いていると思います。

この「ファイル名.〇〇」の「〇〇」の部分が拡張子の種類であり、

それぞれの画像ファイル形式の種類を表しています。

拡張子は「ファイル形式」を示している単なる識別情報です。

”ファイル形式”と”拡張子”の名称は異なる場合がありますので注意が必要です。

画像の種類は2つある！？

実は画像は2つの種類に分類されます。

表示方法の異なる2つの種類の特徴をしっかりと理解しましょう。

2つの画像の種類

・ピットマップ画像

・ベクトル画像

それぞれの特徴を解説していきます。

ベクトル画像

ベクトル画像の例

ベクトル画像とは「点」と「線」の情報が”数値化”された画像です。

どれだけ拡大してもぼやけないのが特徴です。

画像を”拡大”や”縮小”してもその都度コンピュータが”数値化”されたデータを再現するので劣化することがありません。

主にwebサイトのロゴやイラストは、複数箇所に様々な大きさで使用される事が多いため「ベクトル画像」です。

ピットマップ画像

ピットマップ画像の例

ピットマップ画像とは、点の集まりで構成される画像です。

”無数の点”が集まって一つの写真になります。

「Minecraft」の細かいverとイメージするとわかりやすいかもしれません。

「写真」がピットマップ画像の代表です。

点の集まりなので”拡大”すると天の細かさに限界がきて画像が荒くなってしまいます。

一般的な画像ファイル形式である「JPG」や「PNG」は全てピットマップ画像であり、webサイトに用いられる写真画像はほとんどがピットマップ画像です。

拡張子（画像フォーマット）の種類

拡張子の種類

一般的に使用される代表的な拡張子（画像フォーマット）は以下の4つです。

代表的な拡張子4つ

・JPG（JPEG）　　 ・GIF 　　　・PNG 　　　・SVG

それぞれの拡張子の特徴と用途を解説していきましょう。

「JPG」「JPEG」

「JPG」「JPEG」（ジェイペグ）とは（Joint Photographic Experts Group）の略です。

「JPG」「JPEG」の「P」はphotographic（写真）という言葉が入っている通り、写真に適した拡張子です。

「JPG」と「JPEG」の違い

実は「jpg」と「JPEG」では文字数の違い以外に違いはなく同じです。

旧WindowsOSでは拡張子の文字制限が3文字まででした。

一方で、「Mac」や「Linux」では文字制限はないため、それらのOSで保存された画像は「.jpeg」となりますがそれらの画像をWindowsで保存する場合3文字の文字制限があるために「.jpg」と省略する必要がありました。

なお、現在のWindows OSでは文字制限がなく4文字の「.jpeg」であっても使用する事ができます。

多くの人が長年Windows OSで「.jpg」としてファイルを保存するのに慣れていたため廃止されませんでした。

「JPG」「JPEG」のメリット

容量が小さい

「jpg」「JPEG」では非可逆圧縮という圧縮方法で

人間には違いがわからない程度のデータを大幅に切り捨てることで容量を小さくしています。

ファイルサイズは小さいのに写真が綺麗に映し出す事ができます。

色数が多い

「JPG」「JPEG」ではフルカラー1670万色まで扱う事が可能です。

色数の多さから写真やグラデーションであっても綺麗に表現する事が可能です。

「JPG」「JPEG」のデメリット

非可逆圧縮である

「JPG」「JPEG」では非可逆圧縮という画像の処理の仕方をしています。

非可逆圧縮では一度、圧縮してしまうと元に戻せません。またファイルを開いて上書き保存する度画像が少しずつ劣化していきます。

しかし、この非可逆圧縮のおかげでデータ容量を小さく収める事が可能になっているのも事実です。

↓画像の圧縮について詳しくまとめた記事はこちら

画像圧縮とは？画像を圧縮する重要性やメリット・デメリット。適切に「画像圧縮」できていますか？

背面を透明にできない

「JPG」「JPEG」では背面を透明にする事ができません。

ですので背面を透けさせたいロゴやイラストの加工などには向いていないので注意が必要です。

「JPG」「JPEG」の用途

以上の特徴から「JPG」「JPEG」ではこのような用途に向いていると言えます。

「JPG」「JPEG」が適した用途

・写真や色数の多いイラストを作りたい場合

・色鮮やかな写真を使用したい場合

「PNG」

「PNG」（ピング）とは（Portable Network Graphics）の略です。

主にwebサイト上での画像の表示を目的として開発されました。

それまで自由に使用できていた「GIF」が特許の問題で自由に使用できなくなってしまったため、「GIF」に替わる新しい拡張子として開発されたのが「PNG」です。

「PNG」のメリット

色数が多い

「PNG」では「JPG」と同じフルカラー1670万色まで表現する事が可能です。

可逆圧縮である

「PNG」は「JPG」の”不可逆圧縮”とは逆の”可逆圧縮”です。
可逆圧縮とは圧縮後であってもデータを完全に復元する事が可能で、何度上書き保存をしても画像が劣化しません。

↓”無料”画像圧縮ツール「Image Optim」がオススメ！

オススメの無料画像圧縮ツール「Image Optim」の使い方・メリット・デメリット

背面透過する事ができる

「JPG」とは違い「PNG」では背景を透明に加工する事が可能です。

背面を透明にしたい場合や、グラデーションを付けたい場合に適しています。

「PNG」のデメリット

「JPG」に比べ容量が大きくなる

「PNG」では可逆圧縮であることや、背面透過が可能な反面、
容量が大きくなってしまいます。

「PNG」の用途

以上の特徴から「PNG」ではこのような用途に向いていると言えます。

「PNG」に適した用途


・写真やロゴなどで、背面透過を活かした画像を使用したい場合

・何度も加工を行う場合

・元のデータに戻す可能性がある場合

「GIF」

「GIF」（ジフ）とは（Graphics Interchange Format）の略です。

ファイル容量がとても小さく軽いことやアニメーションを表示する事ができることなどが特徴です。

「GIF」のメリット

データ容量が小さい

「GIF」であればファイル容量を小さくする工夫がされている為データ容量が小さく軽いのが特徴です。

アニメーション表現が可能

「GIF」ではパラパラ漫画のような動画を作る事ができます。
表現の幅が広がったり人の注目を惹きつけることができるのが特徴です。

可逆圧縮である

「GIF」は「PNG」同様、可逆圧縮であるためデータを復元する事が可能です。

「GIF」のデメリット

色数が少ない

「GIF」では256色と表現できる色数が少ないです。

多色な画像を「GIF」で表示しようとすると細かい色使いまでは再現する事ができません。

「GIF」の用途

以上の特徴から「GIF」ではこのような用途に向いていると言えます。

「GIF」に適した用途

・色数の少ないシンプルなイラストやロゴには向いている

・動画のようなアニメーションで表示したい場合

↓筆者が使用しているオススメの「GIF」作成ツール

「GIPHY Capture」の使い方！Macの画面を簡単にGIF化できる！

「SVG」

「SVG」（エスブイジー）とは（Scalable Vector Graphics）の略です。

今まで紹介してきた3つの拡張子とは違い「SVG」は唯一「ベクトル画像」です。
データを“数値化”する事ができるのでどれだけ”拡大””縮小”しても画像がぼやけないのが特徴です。

「SVG」のメリット

数値化できるのでHTMLなどで表現する事が可能

「SVG」では他の拡張子とは違い”数値化”する事が可能であるためHTMLで表現する事が可能でありCSSやJavaScriptでアニメーションさせることも可能です。

後から色やサイズの調整が可能

「SVG」はデータを”数値化”できるため、後から色やサイズを変更したいとなった時に専用の画像編集ソフトを利用しなくてもCSS上でサイズや色を変更する事ができます。

「SVG」のデメリット

複雑なイラストやオブジェクトは表現できない

「SVG」では色や形状が複雑なオブジェクトなどは点と線の集まりでは表現しきれません。

複雑さが増すほど重たくなる

「SVG」ではHTMLの様にDOMを構築するため複雑なオブジェクトやイラストを表示させようとすると表示速度や動作が遅くなってしまう場合があります。

「DOM」とは？

「DOM」（Document Object Model） の略であり、HTMLやXML文書のためのプログラムインターフェイスです。

↓この方のブログが詳しく解説されています。

DOMとは何か？【JavaScript初心者向けにわかりやすく説明します！】

「SVG」の用途

以上の特徴から「SVG」ではこの様な用途が向いていると言えます。

「SVG」に適した用途

・後から色やサイズを変更する可能性がある場合

・同じ画像で拡大したり縮小したりする場合

・アニメーションで表示したい場合

まとめ；用途別に使い分けよう

今回は一般的に使われる事が多い主要な拡張子（画像フォーマット）について1つずつ紹介しました。

各拡張子の特徴と用途を理解していただけましたでしょうか。

それぞれの特徴をしっかりと理解し使い分けることで画像を最適な状態で使用する事ができます。

可逆圧縮と非可逆圧縮の違いや拡張子の特徴を知っておくだけでも取り返しの付かないミスを防げるのではないでしょうか。

ハナノ
ハナノ
画像や動画を「LINE」で送受信している人などいませんよね？

↓AppleユーザーならAirDropを使わない理由はありません。

「AirDrop」iPhoneやMacで超簡単に動画や写真を”画質を落とさずに”送受信可能な神機能。

The post 「拡張子」の種類や特徴まとめ！各拡張子の適切な使い方なども解説。 first appeared on one log.

]]> https://one-time-life.net/life/extension-jpg-png-gif-svg/feed/ 0