Web製作ラボ 5/30, 6/13, 2012 hayashiLabo 13

素材について 画像 ムービー 音 について

画像 まずは、少し画像の基礎

画像のXとY

スキャン

グレースケールとRGB ピクセル グレースケール（白黒） RGB（カラー） RGBに加えてαというのもある。αは透明度

画像のサイズとデプス ピクセル 320 x 240 640 x 480 800 x 600 1920 x 1080 ...... Yサイズ ■サイズ　→解像度 320 x 240 640 x 480 800 x 600 1920 x 1080 ...... Yサイズ ■デプス　→色数 8ビット (256個のレベル・1677万色） デプス Xサイズ 10ビット以上のものもある

アスペクト比 4 : 3 （一昔前のTV) 1 : 1 16 : 9 （ハイビジョン） 640 256 480 256 1920 1080 正方ピクセルが基本

画像の性質のまとめ ■ サイズ （解像度） 360X240、640X480（4:3）、1920X1080(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を入れること 　　　alt（HP読み上げなどで重要） 自然画はJPEG、色数の少ない画像はGIF,PNG 　　　自然画→風景、人物などリアルもの 色数少ない→ロゴ、フォント、セル画 ブラウザ上で拡大縮小しない 　　　絵が汚くなる

画像のサイズ変更について 基本はピクセル等倍でブラウザ上に表示されるように作る 大きすぎるとブラウザ上で縮小がかかり汚くなる。ロードに時間がかかる. 当然だが、拡大はボケる 縮小することが多いと思うがちゃんとした画像加工ソフトを使うこと 　　　→折り返し歪（エイリアス）が出て絵が汚くなる 　　　　　ことあり アイコンなどで画像を極端に縮小したときはボケるのでシャープをかける

画像のフォーマット 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タグが無い (Flush player, Windows media player, Quicktime player...) （HTML5では搭載される）

音声 MP3 WAV WMA ・Windows ・基本非圧縮 ・マックではAIFF フォーマットにはいくつかある ・MPEGの音規格 フォーマットにはいくつかある　 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 WMV F4V フォーマットにはいくつかある ・MPEG1, MPEG2, MPEG4など ・一般的 フォーマットにはいくつかある　 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などを利用するのが無難