ラスタとベクタ

伝道師になろう第 4 弾ラスタとベクタ2016-09-18岩淵勇樹 @butchi_y

今日のお話コンピューターで扱われる「画像」

の表現方法は主に「ラスタ」と「ベクタ」に二分されます。

今日はそれらの違いについてお話しします。

先に謝っとく！癖で技術勉強会とおんなじ感じの

発表になりそうです！

でも知ってて損はない話だと思うのでご査収ください！

見覚えのある画像形式がベクタかラスタかだけでも覚えてくれれば幸い！

ラスタ・ベクタの違いとは

2 大ソフトウェア

Photoshop （ラスタ）Illustrator （ベクタ）

Adobe 社が両方のスタンダードをかっさらってます

ラスタ（ Raster ）とはビットマップ。ドット絵。

ディスプレイ画面に忠実。

https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg

ラスタスキャンブラウン管テレビ時代の表示方式左から右へ、そして上から下へラスタ画像の語源

ベクタ（ Vector ）とは線画。オブジェクトを配置していく。

文字もイラストもくっきり。

ベクトルともいう。


ベジェ曲線ベクタの最強要素これがないと滑らかな線を

書くのが困難元々は車の CAD 用に開発された

「プログラマのための数学勉強会」資料を参照

http://www.slideshare.net/yuukiiwabuchi9/ss-59756703

Illustrator で挫折した人へThe Bézier Gamehttp://bezier.method.ac/

http://bezier.method.ac/

http://bezier.method.ac/

一旦まとめラスタはドット絵ベクタは線画


ラスタ OR ベクタクイズ！

よく見る拡張子（画像フォーマット）がベクタかラスタか当てるクイズ！

ラスタ？ベクタ？BMP （ビットマップ）

画像出典 : http://vishal-gupta.deviantart.com/art/Classic-MS-Paint-in-Windows-7-190779683

ラスタ？ベクタ？

BMP はラスタ！

ラスタ？ベクタ？JPEG （ジェイペグ）

https://ja.wikipedia.org/wiki/JPEG


JPEG はラスタ！

ラスタ？ベクタ？GIF （ジフ）


GIF はラスタ！

ラスタ？ベクタ？PNG （ピング）

https://ja.wikipedia.org/wiki/Portable_Network_Graphics


PNG はラスタ！

ラスタ？ベクタ？ラスタばっかやん！

ラスタ？ベクタ？PDF

画像出典 : http://www.computerhope.com/jargon/p/pdf.htm


PDF はベクタ！

ベクタの代表PDFPSEPSAI

PostScriptPDF 、 PS 、 EPS 、 AIこれらはどれも「 PostScript 」の

派生言語（ PS は PostScript の略）（間違ってたらごめんなさい…。）

最近の画像フォーマットと使い分け方

新しいベクタフォーマットSVG

Web で扱いやすいベクタの超新星

新しいラスタフォーマットWebP （ウェッピー）

Google 発ラスタだけど、 WebP はそもそも

Photoshop で書き出せない動画版の WebM はそこそこ使われ始

めている

画像フォーマット診断印刷ですか ? YES → AI か PDFWeb ですか ?

YES→◦透過しますか ? YES → PNG◦写真ですか ? YES → JPEG◦作図可能ですか ? YES → SVG

画像ファイル共有診断友達に写真を送りたい → JPEG印刷物を送りたい → PDFどの形式で送ったらいいかわからな

い→ PNG

まとめラスタとベクタは適材適所JPEG と PNG と PDF の功績は大きい↑ どれがラスタでどれがベクタか

　判断つけばとりあえず OK

自己紹介岩淵勇樹 ( IWABUCHI Yu(u)ki )

金沢大学自然科学研究科修了博士（工学）面白法人カヤック HTML ファイ部・人事

部

大学院で画素配置を研究

JPEG の TipsJPEG 書き出しするとき :

◦解像度（ピクセル数）をできるだけ高く◦圧縮率を最高に

↑ こうすると画像の荒れが気になりにくい！

GIF の Tips256 色制限があるのが最大のネック

PNG の Tipsアルファ付きの必要がなければ

PNG8 を使うべしImageAlpha を使って減色すべし透過付き写真は現状 WebP しかでき

ないけど、重くてもいいなら PNG の現状

レアな拡張子たちPNM (: PBM, PGM, PPM)JPEG2000Animated PNGTIFF

Education