伝道師になろう 第4弾 発表資料です。 画像フォーマットには主に「ラスタ」と「ベクタ（ベクトル）」に大別されます。 いつも使っている画像編集ソフトが扱っているのは「ラスタ」なのか「ベクタ」なのか、どういったときに「ベクタ」を使うべきかなど、博士エンジニアが熱弁します。

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

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

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

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

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

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

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

8. ベクタ（Vector）とは
 線画。オブジェクトを配置していく。
 文字もイラストも
くっきり。
 ベクトルともいう。
https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg

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

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

11. 一旦まとめ
 ラスタはドット絵
 ベクタは線画
https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg

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

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

14. ラスタ？ベクタ？
BMPはラスタ！

15. ラスタ？ベクタ？
 JPEG（ジェイペグ）
https://ja.wikipedia.org/wiki/JPEG

16. ラスタ？ベクタ？
JPEGはラスタ！

17. ラスタ？ベクタ？
 GIF（ジフ）

18. ラスタ？ベクタ？
GIFはラスタ！

19. ラスタ？ベクタ？
 PNG（ピング）
https://ja.wikipedia.org/wiki/Portable_Network_Graphics

20. ラスタ？ベクタ？
PNGはラスタ！

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

22. ラスタ？ベクタ？
 PDF
画像出典: http://www.computerhope.com/jargon/p/pdf.htm

23. ラスタ？ベクタ？
PDFはベクタ！

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

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

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

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

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

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

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

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

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

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

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

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

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