Web製作ラボ 13 5/30, 6/13, 2012 hayashiLabo 素材について 画像 ムービー 音 について 画像 まずは、少し画像の基礎 画像のXとY スキャン グレースケールとRGB グレースケールとRGB ピクセル グレースケール（白黒） RGB（カラー） RGBに加えてαというのもある。αは透明度 画像のサイズとデプス 画像のサイズとデプス ■サイズ →解像度 ピクセル 320 x 240 640 x 480 800 x 600 1920 x 1080 ...... Yサイズ ■デプス →色数 デプス Xサイズ 8ビット (256個のレベル・1677万色） 10ビット以上のものもある アスペクト比 640 256 1:1 4:3 480 （一昔前のTV) 256 1920 16 : 9 （ハイビジョン） 正方ピクセルが基本 1080 画像の性質のまとめ ■ サイズ （解像度） 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などを利用するのが無難
© Copyright 2024 ExpyDoc
