Web 製作ラボ

5/30, 6/13, 2012 hayashiLabo

13

画像 ムービー 音について

素材について

画像

まずは、少し画像の基礎

画像の X と Y

スキャン

グレースケールと RGB

ピクセル

グレースケール（白黒） RGB （カラー）

RGB に加えて α というのもある。 α は透明度

グレースケールと RGB

画像のサイズとデプス

ピクセル

■ デプス　→色数

X サイズ

Y サイズ

8 ビット (256 個のレベル・ 1677 万色）

320 x 240640 x 480800 x 6001920 x 1080......

■ サイズ　→解像度

10 ビット以上のものもある

デプス

画像のサイズとデプス

256

256

1080

1920

480

640

1 : 1

4 : 3（一昔前の TV)

16 : 9（ハイビジョン）

正方ピクセルが基本

アスペクト比

画像の性質のまとめ

■ 　サイズ　（解像度）　　 360X240 、 640X480 （ 4:3 ）、 1920X1080(16:9) など

■ 　ビット数　（色数）　　 RGB8 ビット（ 24 ビット）が一般的　→ 1677 万色

■ 　アスペクト比　　 1:1 、 4:3 、 16:9 など

■ 　圧縮率　　 JPEG 、 GIF など圧縮フォーマットで重要

Web の画像

img タグには、 height, width, alt を入れること

　　　 height 、 width を入れた方が表示が速い（といわれている）

　　　 alt （ HP 読み上げなどで重要）

自然画は JPEG 、色数の少ない画像は GIF,PNG　　　　　自然画→風景、人物などリアルもの

色数少ない→ロゴ、フォント、セル画

ブラウザ上で拡大縮小しない　　　　　絵が汚くなる

画像のサイズ変更について

基本はピクセル等倍でブラウザ上に表示されるように作る

大きすぎるとブラウザ上で縮小がかかり汚くなる。ロードに時間がかかる .

当然だが、拡大はボケる 縮小することが多いと思うがちゃんとした

画像加工ソフトを使うこと　　　→折り返し歪（エイリアス）が出て絵が

汚くなる　　　　　ことあり

アイコンなどで画像を極端に縮小したときはボケるのでシャープをかける

画像のフォーマット

フォーマットにはいくつかある　（ほんとはたくさん）

JPEG　・もっとも一般的　・圧縮率に気を付ける。ブロック歪やモスキートノイズに注意　・ロゴやアニメなどベタ塗りには適さない

GIF　・昔は大人気。モーション GIF もある。　・ 256 色しかない。ベタ塗りに適している

PNG　・ GIF の後継。今ではこっちの方が一般的　・色数制限なし。ベタ塗りも自然画も OK

BMP・ビットマップ　圧縮してない　サイズでかい　 Microsoft

画像の圧縮率とサイズ

JPEG では

　・ JPEG で、「画質：高」ぐらいでよい　・ 1 枚の絵のサイズは 100kB 以下（ぐらい）　・１ページの画像総量に注意　　 1MB あると、ちょっとつらい　・フル解像度も見せたいときは簡単には以下

<a href="FULLSIZE.jpg" target="_blank"><img src="SMALL.jpg" width="360" height="240"></a>

画像の加工ツール

” 画像加工ツール”で Google る

たとえば・・・

■ オンラインツール（インストールせずに Web で使える）　・ pixer.us (http://pixer.us/)

■PC ソフト（インストールして使う）　・ PhotoScape 　（ Windows のみ）　・ Seashore 　（ Macのみ）　・ Gimp 　（ Photoshop のフリー版っぽい　一応Macあり）

■Photoshop （業界ではこれ）

Web で音とムービー

音声とムービーには、画像のような img タグが無い

既存のあれこれのプレイヤーを Web ブラウザにプラグインして再生することになる(Flush player, Windows media player, Quicktime player...)

（ HTML5では搭載される）

音声

フォーマットにはいくつかある　

MP3　・ MPEG の音規格　・音楽で一般的　・圧縮率（ビットレート）に気を付ける。

WAV　・ Windows　・基本非圧縮　・マックでは AIFF

WMA　・ Windows Media Audio

意外と midi もいい

音声を Web に載せる

■a タグで単に貼る

<a href="http://niz237gt.sakura.ne.jp/samples/winter.mp3">再生</a> 　ブラウザなり OS なりが適当なプレイヤーで鳴らそうとしてくれる

■Flash を使う

DVDVideoSoft.com がよくできてる（ http://www.dvdvideosoft.com/ ）「 Free Audio to Flash Converter 」をダウンロード・インストール言われる通りにやるとできる（サンプルを hayashiLabo の DL ページにつけました）

■その他、 Windows Media Player や QuickTime Player を使う方法あり。あるいは将来は HTML5

（ IE には bgsound という凶悪タグあり）

ムービー

フォーマットにはいくつかある　

MPG　・ MPEG1, MPEG2, MPEG4 など　・一般的　・ビットレートに気を付ける

WMV　・ Windows Media Video　・ MOV　（ Quicktime movie ）

F4V　・ FLASH の規格

ムービーを Web に載せる

■a タグで単に貼る

<a href="http://niz237gt.sakura.ne.jp/samples/BB.ｗｍｖ ">再生</a> 　ブラウザなり OS なりが適当なプレイヤーで再生してくれる

■YouTube にアップして YouTube のリンクをページに貼る

・アップしたビデオの「共有」の「埋め込みコード」をコピペ

■Flash を使う

DVDVideoSoft.com （ http://www.dvdvideosoft.com/ ）「 Free Video to Flash Converter 」をダウンロード・インストール言われる通りにやるとできる

■その他、 Windows Media Player や QuickTime Player を使う方法あり。あるいは将来は HTML5

ムービーや音

ムービーや音はサイズが大きいので、サーバーに負担がかかる

・自前の安いレンタルサーバーなどにムービーを載せると複数同時アクセスですぐに動かなくなる可能性あり・ストリーミングサーバーと呼ばれる専用サーバーを用意し回線速度を確保する（ライブ配信もできる）・でなければ、 Youtube などを利用するのが無難