ラスタとベクタ

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

今日のお話
 コンピューターで扱われる「画像」の
表現方法は主に
「ラスタ」と「ベクタ」
に二分されます。
 今日はそれらの違いについて
お話しします。

先に謝っとく！
 癖で技術勉強会とおんなじ感じの
発表になりそうです！
 でも知ってて損はない話だと
思うのでご査収ください！
 見覚えのある画像形式が
ベクタかラスタかだけでも
覚えてくれれば幸い！

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

2大ソフトウェア
 Photoshop （ラスタ）
 Illustrator （ベクタ）
 Adobe社が両方のスタンダードを
かっさらってます

ラスタ（Raster）とは
 ビットマップ。ドット絵。
 ディスプレイ画面に
忠実。
https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg

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

ベクタ（Vector）とは
 線画。オブジェクトを配置していく。
 文字もイラストも
くっきり。
 ベクトルともいう。

ベジェ曲線
 ベクタの最強要素
 これがないと滑らかな線を
書くのが困難
 元々は車のCAD用に開発された
「プログラマのための数学勉強会」資料を参照

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

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

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

ラスタ？ベクタ？
 BMP（ビットマップ）
画像出典: http://vishal-gupta.deviantart.com/art/Classic-MS-Paint-in-Windows-7-

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はベクタ！

ベクタの代表
 PDF
 PS
 EPS
 AI

PostScript
 PDF、PS、EPS、AI
 これらはどれも「PostScript」の
派生言語（PSはPostScriptの略）
（間違ってたらごめんなさい…。）

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

新しいベクタフォーマット
 SVG
 Webで扱いやすいベクタの超新星

新しいラスタフォーマット
 WebP（ウェッピー）
 Google発
 ラスタだけど、WebPはそもそも
Photoshopで書き出せない
 動画版のWebMはそこそこ使われ始め
ている

画像フォーマット診断
 印刷ですか ? YES → AIかPDF
 Webですか ?
YES→
◦ 透過しますか ? YES → PNG
◦ 写真ですか ? YES → JPEG
◦ 作図可能ですか ? YES → SVG

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

まとめ
 ラスタとベクタは適材適所
 JPEGとPNGとPDFの功績は大きい
 ↑どれがラスタでどれがベクタか
判断つけばとりあえずOK

自己紹介
 岩淵勇樹 ( IWABUCHI Yu(u)ki )
 金沢大学自然科学研究科修了
 博士（工学）
 面白法人カヤック HTMLファイ部・人事部
 大学院で画素配置を研究

JPEGのTips
 JPEG書き出しするとき:
◦ 解像度（ピクセル数）をできるだけ高く
◦ 圧縮率を最高に
↑こうすると画像の荒れが気になりにく
い！

GIFのTips
 256色制限があるのが最大のネック

PNGのTips
 アルファ付きの必要がなければ
PNG8を使うべし
 ImageAlphaを使って減色すべし
 透過付き写真は現状WebPしかできな
いけど、重くてもいいならPNGの現
状

レアな拡張子たち
 PNM (: PBM, PGM, PPM)
 JPEG2000
 Animated PNG
 TIFF

Recommended