<iframe src="//www.googletagmanager.com/ns.html?id=GTM-KRK26M" height="0" width="0" style="display:none;visibility:hidden"></iframe>

画像データとは? ラスター・ベクター・JPEG・PNG(ITパスポート・テクノロジ系)

画像って、「JPEG」や「PNG」って書いてあるけど、
正直、違いよくわかんない…って思ったことない?

実はこれ、「保存のしかた」や「描き方」に違いがあるんだよ!
今回は、ラスター/ベクター画像の違いと、代表的な形式の特徴をやさしく解説するね。

画像データの2つの種類

画像データは、大きく分けて2種類あるよ!

ラスターデータ(Raster)

  • 画面をドットの集まり(ピクセル)で表現するタイプ
  • 拡大するとジャギジャギしちゃうことも…
  • 写真やスクリーンショットなどに使われる!

例:JPEG、PNG、GIF、BMP、TIFF など

ベクターデータ(Vector)

  • 点と線・図形の数式データで描かれる画像
  • 拡大してもキレイなまま
  • イラストやロゴ、アイコンなどに使われる!

例:SVG、EPS など

JPEG・PNG・GIF・BMP・TIFFの違いって?

いろいろあって混乱しがちだけど、ポイントをまとめると…

形式圧縮透過特徴
JPEG非可逆圧縮×写真に最適!容量も軽い◎
PNG可逆圧縮背景透過できる!劣化なし♪
GIF可逆圧縮△(1bit)アニメ対応!色数少なめ(256色)
BMP無圧縮×古い形式でファイル超大きい
TIFF可逆 or 無圧縮高品質・印刷向け!でも重い

覚えるコツは、「写真=JPEG」「透過=PNG」「アニメ=GIF」ってイメージしておくこと!

ベクター形式の代表|SVGとEPS

SVG(Scalable Vector Graphics)

  • Webでも使えるベクター形式!
  • HTMLと一緒に使えて便利
  • ボタンやアイコン、アニメーションにも使えるよ

EPS(Encapsulated PostScript)

  • 主に印刷やDTP(出版系)で使われる形式
  • 拡大しても劣化しない!ロゴなどに最適◎
  • Illustratorなど専用ソフトで扱うことが多いよ〜

画像形式の使い分け、どう考える?

用途おすすめ形式理由
写真JPEG軽くて、そこそこキレイ
背景透過イラストPNGキレイで透過できる!
簡単なアニメGIF動きがつけられる
ロゴ・アイコンSVG(ベクター)拡大しても崩れない!
印刷用の図版EPS/TIFF高画質・プロ向け◎

写真はJPEGで、イラストはPNGを選んで…
なんかデートの服選びみたい…! まだデートしたことないけどっ🥹

画像データに関するITパスポート試験の過去問!

ペイント系ソフトウェアで用いられ、グラフィックをピクセル(ドット)の集まりとして扱う方法であるラスタ形式の説明として、最も適切なのはどれか。

ア:CADで用いられる
イ:色の種類や明るさがピクセルごとに調整できる(正解)
ウ:解像度にかかわらず容量一定
エ:拡大してもジャギーが生じない

正解は『イ』

→ ラスタ形式はピクセルごとに色情報がある形式のこと。
拡大時にはギザギザが出やすい特徴があるよ。

ITパスポート試験をスマホで手軽に勉強!

「えろ勉」も戦略的に開発&運営してるよ~!この記事が勉強になったり、ためになったよ〜って思ったら、なにかアクションをお願い!!「えろの力で勉強するゲーム:えろ勉

私の気持ちも、ベクター画像みたいにブレずに伝えられたらなぁ…🩷

関連記事

TOP