画像形式の特徴・用途【GIF/JPEG/PNG】

どん
おはこんばんちは、どんちゃんです。
背中がたくましいお母さんと言われました。

今回もweb関係の内容です。
画像の形式、特徴、用途に関して説明します。

画像の形式によって、得意・不得意があるので、
用途によって使い分けましょう!

画像を表示させるデータの種類

 

画像を表示させるデータには大きく分けて2つのデータがあります。

「ベクターデータ」

「ビットマップデータ(ラスターデータ)」

です。

「ベクターデータ」とは、
画像を点とそれを結ぶ線や面で計算処理して表現したデータです。
主に扱うソフトはIllustratorです。

<特徴>
印刷物全般、イタストやロゴ、図面などに適している。
・表示する度に計算を行って画像を表現するので、
拡大・縮小しても画像は劣化しない



こんなアイコンなら、ベクターデータとしてIllustratorで作成・編集・保存をします。

「ビットマップデータ(ラスターデータ)」とは、
画像を色のついた点(ピクセル)を並べて細かなニュアンスを表現したデータです。

<特徴>
写真、webサイト、アプリなどに適している。
・点(ピクセル)の羅列で表現されているので、画像の拡大・縮小すると劣化が起こる

写真はビットマップデータ!
Photoshopで編集・保存をするよー。

webで使用される画像の形式

GIF

最大256色の情報を含めて保存ができます。
色数が少ないので写真などの細やかな表現はできません。
データとしては軽くできます。
アニメーションGIFもあり、動く画像も保存できます。
透明部分も表現できますが、半透明をもたないので、背景になじませると白いノイズが見えてしまいます。

<向いている用途>
単純なイラスト。線画・アイコン・ロゴ・ボタン・文字要素

JPEG

webの画像素材として最も多く使われている形式です。
デジカメやスマホの画像保存などにも使われます。
1677万色フルカラーの表示が可能です。
陰影やグラデーションなど緻密な表現に長けています。
画質を落とすと、ブロックノイズが発生し、
特に文字部分などは判断しづらくなります。
透明には対応していません。
PhotoshopなどでJPEG形式で保存した場合、透明部分は白くなります。

<向いている用途>
写真・グラデーションや陰影を多用したイラストなど

画質を落とすと、文字のまわりがもにょもにょする。

PNG

GIFにかわる形式として開発されて形式です。
劣化なしの保存が可能です。
透明以外に「半透明」情報を保存できます。
背景に画像をなじませたりするのに向いています。

<向いている用途>
高品質で表現したい画像

JPEGだと透明部分が白になってしまう。。。

PNGなら透明で背景にもなじみます。

まとめ

画像形式によって、向いているものがあるので、
用途を考えながら作成、保存をするのが大切です。

ここ、違うよ!
これはこんな注意点があるよ!
などあれば、教えて頂きたいです。笑

参考になれば幸いです。
以上どんちゃんでした~。

Mitってなに??
Mitは明日がもっと楽しくなるような情報を発信するエンターテイメントパラレルメディアです。

最新の情報から、ちょっと変わった視点の情報まで!

イラストレイター、アーティスト、起業家、エンジニアetc…といった様々なジャンルを本業とするメンバーが、独自の切り口、キャラクターで情報を発信しています。

ぜひ、そんなクリエイターたちの作る記事を見て「明日をもっと面白く」する話題を見つけてみてくださいね!

ABOUTこの記事をかいた人

どん

三度の飯より四度の飯。 (と書けと言われました。) お酒を覚えてしまってから10キロ増えました。 基本的に毎日飲んでいます。 最近のフリーのアルバイターデビューしました。 人生にさ迷っています。 よろしくお願いします。