伝道師になろう 第4弾
ラスタとベクタ
2016-09-18
岩淵勇樹@butchi_y
今日のお話
 コンピューターで扱われる「画像」の
表現方法は主に
「ラスタ」と「ベクタ」
に二分されます。
 今日はそれらの違いについて
お話しします。
先に謝っとく!
 癖で技術勉強会とおんなじ感じの
発表になりそうです!
 でも知ってて損はない話だと
思うのでご査収ください!
 見覚えのある画像形式が
ベクタかラスタかだけでも
覚えてくれれば幸い!
ラスタ・ベクタの違いとは
2大ソフトウェア
 Photoshop (ラスタ)
 Illustrator (ベクタ)
 Adobe社が両方のスタンダードを
かっさらってます
ラスタ(Raster)とは
 ビットマップ。ドット絵。
 ディスプレイ画面に
忠実。
https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg
ラスタスキャン
 ブラウン管テレビ時代の表示方式
 左から右へ、そして上から下へ
 ラスタ画像の語源
ベクタ(Vector)とは
 線画。オブジェクトを配置していく。
 文字もイラストも
くっきり。
 ベクトルともいう。
https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg
ベジェ曲線
 ベクタの最強要素
 これがないと滑らかな線を
書くのが困難
 元々は車のCAD用に開発された
「プログラマのための数学勉強会」資料を参照
Illustratorで挫折した人へ
 The Bézier Game
http://bezier.method.ac/
一旦まとめ
 ラスタはドット絵
 ベクタは線画
https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg
ラスタ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

More Related Content

PDF
次世代セキュリティを牽引する画像解析技術の最新動向 - 距離情報を用いた物体認識技術 -
PPTX
音楽にまつわる数学 〜「倍音」で理解する和音と音色〜
PPTX
明日機械学習に役立つかもしれない数学
PDF
IFSを使ったフラクタルの描画
PPTX
フラクタル音楽 〜可視化と可聴化の世界〜
PPTX
ワイソフ配列について
PPTX
名のあるフラクタルたち
PPTX
自己紹介とパズル紹介
次世代セキュリティを牽引する画像解析技術の最新動向 - 距離情報を用いた物体認識技術 -
音楽にまつわる数学 〜「倍音」で理解する和音と音色〜
明日機械学習に役立つかもしれない数学
IFSを使ったフラクタルの描画
フラクタル音楽 〜可視化と可聴化の世界〜
ワイソフ配列について
名のあるフラクタルたち
自己紹介とパズル紹介

More from Yu(u)ki IWABUCHI (9)

PPTX
かんたんベジェ曲線
PPTX
Mathematicaで 機械学習してみた
PPTX
加法よりも低レベルな演算を考える
PPTX
グラフィックエンジニア必見!イージングの数学
PDF
サイエンスアゴラ研究100連発 〜目に見えて楽しい数学〜
PPTX
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
PDF
コンピュータで全く使われない数表現
PPTX
いただきます。
PPTX
フラクタル概説
かんたんベジェ曲線
Mathematicaで 機械学習してみた
加法よりも低レベルな演算を考える
グラフィックエンジニア必見!イージングの数学
サイエンスアゴラ研究100連発 〜目に見えて楽しい数学〜
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
コンピュータで全く使われない数表現
いただきます。
フラクタル概説
Ad

Recently uploaded (17)

PPTX
PPT KANJI IRODORI SHOKYUU 1 BAB 9 (FURIGANA)
PDF
12_星の杜中学校小倉ももこ『家族ってなに』inspirehigh発表物.pdf
PDF
6_「老いることは不幸なこと?」植草学園大学附属高等学校森 珠貴さんinspirehigh.pdf
PDF
共同売店から考える沖縄の新しい流通のしくみ2025琉球大学流通原論講義資料.pdf
PDF
12_「家族とは何か」星の杜中学校小倉ももこ『家族ってなに』inspirehigh.pdf
PDF
10_「孤独は敵なのか?」 桜花学園高等学校堀川愛可さんinspirehigh.pdf
PDF
9_前田音葉さん:「Yakushima Islandってなんか変じゃない?」.pdf
PDF
14_「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」公文国際学園高等部古澤琴子.pdf
PDF
11_「なぜ議会への関心が低いのか?」長野県長野西高等学校 片桐 菜々美さん.pdf
PDF
3_「本当の『悪者』って何?」鷗友学園女子中学校_福島 雪乃さんinspirehigh.pdf
PDF
My Inspire High Award 2024(岡田秀幸).pptx.pdf
PDF
8_「世の中の流行はどのようにして生まれるのか」学校法人聖ドミニコ学園竹野はるいpptx.pdf
PDF
「なぜ、好きなことにいつかは飽きるの?」大塚莉子 - My Inspire High Award 2024.pdf
PDF
13_「他者と自分、対立を防ぐには?」市原中央高等学校 大野リリinspirehigh.pdf
PDF
外国人が日本のテーブルマナーに驚く理由は?_公文国際学園高等部 角田 恵梨佳さん
PDF
7_「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」明治大学付属中野八王子中学校宮本ゆりかさん.pdf
PDF
5_「AIと仲良くなるには?」日本大学東北高等学校南梨夢乃さんinspirehigh.pdf
PPT KANJI IRODORI SHOKYUU 1 BAB 9 (FURIGANA)
12_星の杜中学校小倉ももこ『家族ってなに』inspirehigh発表物.pdf
6_「老いることは不幸なこと?」植草学園大学附属高等学校森 珠貴さんinspirehigh.pdf
共同売店から考える沖縄の新しい流通のしくみ2025琉球大学流通原論講義資料.pdf
12_「家族とは何か」星の杜中学校小倉ももこ『家族ってなに』inspirehigh.pdf
10_「孤独は敵なのか?」 桜花学園高等学校堀川愛可さんinspirehigh.pdf
9_前田音葉さん:「Yakushima Islandってなんか変じゃない?」.pdf
14_「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」公文国際学園高等部古澤琴子.pdf
11_「なぜ議会への関心が低いのか?」長野県長野西高等学校 片桐 菜々美さん.pdf
3_「本当の『悪者』って何?」鷗友学園女子中学校_福島 雪乃さんinspirehigh.pdf
My Inspire High Award 2024(岡田秀幸).pptx.pdf
8_「世の中の流行はどのようにして生まれるのか」学校法人聖ドミニコ学園竹野はるいpptx.pdf
「なぜ、好きなことにいつかは飽きるの?」大塚莉子 - My Inspire High Award 2024.pdf
13_「他者と自分、対立を防ぐには?」市原中央高等学校 大野リリinspirehigh.pdf
外国人が日本のテーブルマナーに驚く理由は?_公文国際学園高等部 角田 恵梨佳さん
7_「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」明治大学付属中野八王子中学校宮本ゆりかさん.pdf
5_「AIと仲良くなるには?」日本大学東北高等学校南梨夢乃さんinspirehigh.pdf
Ad

ラスタとベクタ

Editor's Notes

  • #3: 聞いたことある方挙手。 ラスターとベクター、の方が一般的 ほんとはベクタの素晴らしさを伝えたい
  • #7: スキャナも。
  • #9: ベクタ最強!を伝えておきたい
  • #18: Lenaの色が荒れてますよね。
  • #32: SlideShareにアップします!