網頁介面設計的基礎理論 講師：鄭靜怡 本教材內容出自於網頁界面設計藝術教程，人民郵電出版社

大綱 網頁介面設計發展的概況 網頁介面的構成要素 基本要素 多媒體網頁

網頁介面設計發展的概況 設計研究的中心內容：美與技術的結合 介面（Interface)：是一種由色彩、文字、圖像、符號等視覺元素以及多媒體元素為主構成的，傳達特定信息，以方便人機交流為目的的中間媒介。 介面設計應屬於視覺傳達設計的一種。

網頁介面設計發展的概況 網路的發展 1968 ARPA 美國國防部高級研究計劃署 （1969啟用） 1983 TCP/IP 奠定Internet 的基礎 1991年底美國簽署了高效能計算法案，預定以五年的時間 (1992-1996) 來建 立 NREN (National Research and Education Network) 高速網路，預 計其傳輸速度將超過 1 Gbps，且涵蓋範圍並及於中小學 1968年ARPA的決策者決定資助一個可以連接遠距離電腦的網路開發，他們希望該網路可以做到資源的共享，在其一部份被毀的情況下，其他部分依舊照常運轉。1969年完成了四台電腦連接在一起，形成了人類歷史上第一個廣域計算機網路。這四台電腦成為最初的ARPANET網路，其後逐步發展成為了網際網路Internet 因為Internet 上所使用的通訊協定Transmission Control Protocol / Internet Protocol 使得網路擴充十分方便，所以全世界陸續加入網際網路的行列。 目前 Internet 大約是以每個月15% 的速度快速成長中， 其應用也逐漸 不再侷限於學術研究發展上， 商業上的網路應用也急遽的增加中。截至 1994 年 6 月止，其涵蓋範圍已經超過 90 個國家， 所連結的網路群大 約為 24000個，而串接在上面的各式各樣電腦 更高達 22,000,000 部。

網頁介面設計發展的概況 網頁設計的發展初期 伴隨著Arpanet的出現而出現：文字符號組成 功能性為第一指導原則 基本的信息傳達 技術要求相對較低 易於實現且有較好的穩定性 做為人機交流的媒介，網頁介面伴隨著Arpanet的出現而出現。最早的網頁介面可不像現在Internet上看到得那樣五光十色、圖文並茂，早期的網頁介面無一例外都是由文字符號所組成。就很像在DOS環境底下的操作，或者是BBS上那大段大段的純文本 在網頁出現的早期，和設計發展的早期階段一樣，網頁設設計以功能性為第一指導原則，以技術因素為主要考慮現象以完成或實現必要的功能為目標。

網頁介面設計發展的概況 網頁設計的發展中期 1991年，World Wide Web 全球資訊網的發佈，但全部信息仍是文字。 1992年美國國家超級計算機服務中心開發出一種可以顯示圖形且能在超連結間漫遊的程式，所有的操作只要靠滑鼠游標即可完成。即是用於Windows系統中的Mosaic，配合上美國高速網路計畫，受到公眾及媒體的廣泛矚目。 網頁設計於是有了圖形化的介面 從技術設計為主轉而走上了技術設計與藝術設計相集合的道路。 全球資訊系統可讓全世界的電子文件包括任何個人獨自所提供的各種多媒體資料，藉由網路自然地整合起來，讀者可透過此系統擷取許多線上的資訊。全球資訊網能支援由HTML（超文件標示語言）寫成的文件，包括語音、動畫、圖片等數位式的檔案型態，都可透過超連結，作線上檢索功能，讓使用者在全球資訊網上可以跳躍式讀取所需要的資訊，而不必依循傳統需一頁一頁的閱讀。 Mosaic 　　NCSA 發展出來的 Mosaic 是目前最受歡迎的 WWW 瀏覽工具。一個重要的原因是，它可以支援各式各樣的系統，例如，大部份的 Unix 系統、SGIs、PCs、Macs 等。此外它亦具有下列許多功能： 能顯示超文字及超媒體文件 提供多種語言 提供多種字型 提供聲音功能 提供圖片功能 可讀取 Internet 上其它資訊系統的資料。例如 gopher 、ftp、nntp等 資訊系統。 提供交談式的資料查詢。 提供下註解功能。 自設熱門資訊的選取清單（ hotlist ）。使用者可依自己的興趣把常讀取的資訊之 位置，放在此清單，以便於下次讀取。當下次讀時，可直接從此清單取出，而不需 經過許多超鏈結來讀取。

網頁介面設計發展的概況 網頁設計的發展近期 隨著視覺化專業網頁設計及開發工具的出現（Microsoft FrontPage, Macromedia Dreamweaver, Macromedia Flash)，網頁設計不再侷限電腦專業人士 各種媒體的混合應用 許多網頁設計人員並未認識到技術與藝術結合的重要性，或片面地理解了藝術設計的含意。因此載往上看到更多的是佈局千篇一律、色彩搭配混亂、版式繁雜紛亂，表面五光十色十則空洞無誤的設計。

網頁介面的構成要素 網頁基本構成要素： 多媒體網頁： 網頁中包含兩種以上的媒體： 文字、圖片、聲音、視訊、動畫 文字、圖形、超連結 不論網頁的風格為何，基本的構成要素都是一致的。

網頁介面的構成要素 - 文字 是網頁介面的主體。 優勢： 主要形式： 以文字傳達信息符合一般人的習慣。 文字所佔的儲存空間極小。 標題：用以告知瀏覽者該網站的名稱或該文章的題目。 文字信息：是標題的內容展開，傳達信息的主體。 文字連結：網頁中最常見的超連結，他能直關地呈現連結的相關主題信息。 文字是網頁介面的主體，是用以傳達信息的主要元素。雖然利用網路多媒體的影音效果也可以達到同樣的目的，但網頁中文字的優勢很難被取代。 因為文字傳達信息符合一般人的習慣，且文字所佔的儲存空間極小（一個中文字占兩個字元組）利於瀏覽及下載，許多網頁也都提供純文字頁面形式以節省瀏覽者的時間與費用。 標題不一定是一個完整的句子。詞組或詞作為網頁的標題非常頻繁，文字標題要盡量簡單明瞭、引人注目，這樣才能得到瀏覽者的青睞。通常標題應安排在醒目的位置，使用較大的字體，在版面中作點或線的編排，為了保證標題的顯示效果，大部分設計者都將其設置為圖形格式。

標題 文字連結 標題 文字信息

網頁介面的構成要素 – 圖形 俗話說：「圖片會說話」 , 有時一張圖片的效果勝過千言萬語。在視覺順序上，圖形往往能先吸引到人們的注意力。 圖形必須完全符合網頁的主題，並具有創新的構思和強烈的個性。

網頁介面的構成要素 – 圖形 標題：用圖形作標題可以避免千篇一律的文字標題所給人的單調感和枯燥感，使標題更鮮明，給人深刻印象。

網頁介面的構成要素 – 圖形 背景：以圖形為背景來襯托主題，可以增加層次感，使網頁變得生動活潑不再單調枯燥

網頁介面的構成要素 – 圖形 主圖：網頁上篇幅較大的圖片來突顯網頁主題。是整個頁面的視覺中心，具有直觀性強的特點，能瞬間給人印象。 主圖與背景不同，背景圖形式用以襯托主題，而主圖則是突出主題、表現主題

網頁介面的構成要素 – 圖形 超連結按鈕：用小圖形取代文字作為超連結按鈕，可以使網頁更美觀、增添活力。

什麼是多媒體 「多媒體」一詞是由「MultiMedia」單字所翻譯而來。「MultiMedia」則是由「Multi (Multiple)」 跟「Media」所組合而成的英文單字, 字面上的意思為「以二種以上的媒體形式所呈現的資訊」。更進一步則可解釋為：在電腦上以文字 (text)、影像 (image)、聲音 (audio) 及視訊 (video) 等多種媒體方式呈現的資訊, 而不再侷限於傳統只以文字及靜態圖像的方式展示。

什麼是多媒體 因此多媒體意味著能呈現更多聲光效果, 讓使用者有更好的視覺及聽覺等感官享受。 多媒體會在最近幾年興起, 也是拜科技發展所賜。早些年, 電腦能力不佳的時候, 根本無法處理音效、動畫的即時播放, 只能觀看純文字的文件檔, 或是靜態圖檔。

多媒體的資料型態 影像資料型態 聲音資料型態 視訊資料型態

影像資料型態 影像是目前應用最廣的多媒體資料型態之一, 而這裡講的 「影像」 , 是指所有能直接出現在電腦裡的圖片, 並不包含一般的照片、書本裡的圖片、或畫在紙上的塗鴉等。

影像資料型態 影像常見名詞 像素 解析度 影像尺寸 影像類型 影像類型與影像資料量大小的關係 常見的影像格式

影像常見名詞 要瞭解影像之前, 有 3 個相關的名詞是您必須了解的：像素、解析度與影像尺寸。

像素 我們在電腦螢幕上看到的圖片, 其實是由許多細微的小格點所組成, 這些小格點稱之為像素 (Pixel)。像素裡面僅包含了顏色的資訊, 換言之, 像素只是一個填滿顏色的小點而已！每個像素都有一個明確的顏色, 許多不同顏色的像素排列後就構成了一張圖片。這就像拼圖一樣, 由一堆小圖塊拼成一大張圖, 只不過像素比單一拼圖塊小太多了, 除非將影像放到很大, 否則很難用肉眼辨別這些小格點：

像素

像素 一張 640× 480 的圖片, 表示水平方向有 640 個像素, 垂直方向有 480 個像素, 而這張圖片所包含的像素數量一共有：640 × 480 = 307,200 點。

解析度 解析度是指在單位長度內的像素數目, 一般是以每英吋所含的像素數目計算。同一長度內所含的像素越多, 解析度就越高, 而圖片的品質也就越細緻。 反之, 解析度越低, 影像的品質也就越粗糙。 想想看, 同樣一公分的長度, 甲圖片有 300 個像素, 而乙圖片只有 30 個像素, 甲圖片的影像品質當然比乙圖細緻許多！

解析度 因為它有更多的像素可以做變化, 也就是可以容納更多的顏色, 而乙圖片的像素較少, 顏色變化就無法太多, 而且為了填滿一公分的長度, 像素與像素之間將不能很緊密的排列, 這樣圖片的品質當然比較差。

影像尺寸 當您要跟別人說一張圖片有多大時, 會怎麼表達？「3 × 5 公分」、「大約半個螢幕寬」 , 問題是在螢幕上怎麼量尺寸呢？而且依據每個人螢幕的大小、顯示器解析度設定的不同, 同一張圖片在不同螢幕上所呈現的大小也不一樣。「那有沒有統一的度量單位呢？」 有的, 就是用像素來當影像的尺寸單位, 例如 300 × 200、95 × 43(水平方向像素數目× 垂直方向像素數目), 用這種方式才能確實表達影像的大小。

影像類型 在一般常見的影像中, 主要分成了以下 6 種類型。 接下來為了方便大家比較, 我們用同一張圖片來當例子, 讓您能清楚辨別各種影像類型：

影像類型 黑白：黑白影像的特色就是 「非黑即白」 , 也就是一張圖片裡只能有純黑及純白兩種顏色而已。除非拿來做一些特殊的視覺效果, 一般人很少會用到真正黑白的圖片；或者將文字稿件掃描進電腦時, 也可以掃成黑白影像, 以減少檔案大小。黑白圖片看起來好像有深淺的灰色分別, 其實是像素疏密排列所造成的錯覺, 實際上每個像素仍然只有黑色及白色。

影像類型 黑白影像的每個像素只有 1 bit 的空間能表現顏色。因為以 1 個位元記錄 0 或 1 兩種數值, 所以只能有兩種變化：最亮 (白色) 或最暗 (黑色)。

影像類型 灰階：灰階影像除了純黑和純白之外, 還可以包含深淺不同的灰色, 說穿了就是在黑色與白色之間加上不同的明暗度 (把黑色調亮一點, 不就變成灰色嗎？)。所以嚴格來說, 黑白影像也算是灰階影像的一種。由於每個像素佔有 8 bits 的空間, 所以明暗度也就有 28=256 種變化, 但也僅止於由黑到白的亮度變化而已, 無法出現紅色、綠色等其他色彩。

影像類型 一般我們說的「黑白照片」或「黑白電視」, 其實應該是灰階的才對！

影像類型 16 色：16 色影像是屬於索引式色彩, 一張圖片都搭配著一個 16 色的色盤, 就好像我們在畫畫時用的調色盤一樣。不過這個色盤只有 16 個格子, 所以圖片裡的顏色最多只能有16 種, 至於要放哪 16 種顏色, 則可由使用者自行決定, 總之不能超過 16色。如果我們把原本色彩豐富的圖片轉換成 16 色, 那麼有些顏色就會表現不出來, 而變成圖表 5-4 那樣。

影像類型 在索引式色彩中, 每個像素並不是記錄著顏色的亮度、色彩等資訊, 而是儲存該顏色在色盤中的編號；例如儲存著 「005」, 表示要顯示色盤中的第 5 號顏色 (假設是紅色), 如果您把色盤中的第 5 號顏色變成綠色, 那麼所有記錄著 「005」的像素就會統統變成綠色。

影像類型 在 16 色影像中, 每個像素佔有 4bits 的空間, 所以有 24=16 種顏色變化。

影像類型 256 色：和 16 色影像一樣, 也是一種索引式色彩。但因為每個像素佔有 8 bits 空間, 所以最多可以有28=256 種顏色。256 色聽起來不多,不過大多數影像用 256 色來表現就很足夠了。因為人的眼睛也不是厲害到能辨別出每種顏色的不同, 除非是很細膩的影像, 否則從螢幕上看起來, 大部分的影像用全彩或 256 色並不容易看出明顯的差別。

影像類型 圖表 5-5 的 256 色圖片和下一頁圖表 5-6 的全彩圖片看起來是不是差不多呢？可是全彩圖片最多可以使用 1, 677 萬種顏色, 但由於像素太小了, 太相近的顏色, 我們已分辨不出來, 所以看起來幾乎一模一樣。

影像類型 高彩：每個像素由 R (紅)、G (綠) 及 B (藍) 三種顏色混合而成, 其中紅色及藍色是以 5 bits 表示, 綠色則是用 6 bits 表示, 因此每個像素佔用了 16 bits 的空間, 能呈現的顏色變化數則為 216=65,536 種顏色。雖然目前的作業系統 (如 Windows 及 Linux)都能以高彩模式顯示, 不過, 大部分的影像格式並不支援此影像類型。

影像類型 全彩：每個像素也是由 R (紅)、G (綠) 及 B (藍) 三種顏色混合而成, 紅、綠及藍各分別佔 8 bits 空間, 所以一個像素就佔了 24 bits, 也就是有 224=16,777,216 種顏色變化, 這已經超過肉眼所能辨識的極限了, 所以被稱為全彩影像。由於全彩影像可以含有豐富的色彩, 所以最常拿來做影像處理之用。

影像類型 有些作業系統或影像處理軟體會用更高的 32 bits 或 48 bits 來表示全彩影像, 這樣的影像將具有更好的品質。

影像類型與影像資料量 大小的關係 一張圖片的資料量大小 (也就是用了幾個位元組), 與像素數目及影像類型成正比。例如要計算一張800X600、全彩類型影像的資料量, 首先我們知道全彩類型是 1 個像素佔了 24 bits, 也就是 3 bytes(1 byte = 8 bits), 而這張圖片共有 800X600 個像素, 所以用掉的資料量就是：

影像類型與影像資料量 大小的關係 如果這張圖片在存檔時完全沒有經過壓縮, 檔案大小就大約是 1.4 MB 左右。不過, 實際上儲存檔案時, 除了儲存每個像素的顏色之外, 還會記錄此張圖的長寬、影像類型等資訊；而且大部分的圖檔格式在存檔時都會壓縮, 依據存檔格式的不同, 其壓縮的方法及比率也有所差異, 所以實際的圖檔大小要等到存檔完成之後才會知道。

常見的影像格式 BMP 影像格式：這是微軟公司所提出的點陣圖格式, 原本是專門用在 Windows作業系統上, 讓各軟體的圖檔能彼此相容。BMP 檔雖然普遍, 但有個壞處是無法壓縮全彩圖檔, 所以存檔後會變得很大 (影像佔用多少資料量, 存檔後就有多大)。而 256 色、16 色和灰階圖片則可使用 RLE (Run-Length Encoding) 技術壓縮, 壓縮後圖片不會失真, 但儲存和開啟的速度會比較慢。

常見的影像格式 GIF 影像格式：GIF 是網頁上最常用的圖檔格式, 原因是它可存成透明圖 (把其中一種顏色變透明)、交錯圖 (在瀏覽器中交錯顯示) 和動畫 (把多張 GIF 圖片連續重疊成一個檔案), 而且提供 「非破壞性壓縮」 , 存檔後的體積比原來小, 圖片也不會失真。但 GIF 最多只能儲存 256 色, 所以在儲存之前, 必須將圖片轉為 256 色、16色、灰階或黑白的影像類型, 才能存成 GIF 檔。

常見的影像格式 JPG 影像格式：這也是網頁常用的圖形格式, 它的壓縮率非常驚人, 原本 1 MB 的圖片存成 JPG 檔後, 可能只剩幾十 KB 而已 (視影像的顏色相似程度, 及設定的壓縮率而異)。由於 JPG 格式屬於破壞性壓縮, 存檔時會捨棄一些不必要的像素 (捨棄後, 就再也救不回來了), 因此可能造成圖片失真。不過一般而言, 在平常的壓縮比率之下, 肉眼很難看出壓縮前後品質的差異。

常見的影像格式 儲存 JPG 檔時, 一般可在影像處理軟體中調整壓縮率, 壓縮率設的越高, 影像的品質越低。壓縮率越低, 則影像越接近原來的品質, 但檔案也相對地較大。JPG 格式支援全彩、灰階等影像類型, 但 256 色、16 色、黑白圖片則無法存成 JPG 檔。

常見的影像格式 PNG 影像格式：近年來由於 GIF 格式引發的權利金問題, 所以 PNG 格式就成為 GIF 的另一種選擇, 在網際網路上作為非破壞性壓縮的影像格式。其與 GIF 不同之處在於：PNG 支援全彩影像, 並能製作出透明背景的效果, 但目前無法儲存動畫。PNG 支援的影像類型有：全彩、256 色、16 色、灰階及黑白影像類型。

常見的影像格式 PNG 格式是 W3C 建議的網路圖檔格式, 目前 IE6 和 Netscape 6.2 都有支援 PNG 格式。 若想知道某個應用程式是否有支援, 您可參考http：//www .libpng. org/pub/png/ pngapps .html 。

常見的影像格式 TIF 影像格式：TIF 是影像處理界最普遍支援的圖檔格式, 這是因為它可以跨平台、提供非破壞性壓縮, 並支援印刷成品輸出用的 CMYK 色彩模式, 所以大多數的影像處理軟體及排版軟體都會支援 TIF 圖檔。如果您有較專業的圖庫光碟, 會發現它的圖片檔也都存成 TIF 格式, 以方便排版及印刷的需求。

常見的影像格式 TIF 支援全彩、256 色、16 色、灰階及黑白影像類型, 目前也唯有 TIF 檔能存成 16 bits 灰階及 48 bits 的全彩類型, 如果您有圖片想要做為印刷用途, 那麼存成 TIF 檔是最好的方式。

聲音資料型態 數位聲音的形成原理 宇宙中發出轟然巨響？ 聲音的資料量 常見的聲音格式

宇宙中發出轟然巨響？ 聲音需要有介質才能傳播, 因此在真空的環境裏是無法傳遞聲波的。 如果我們身處外太空的真空環境中, 實際上, 根本無法聽見聲音。 有些太空大戰的影片, 常會演出宇宙的物體發生爆炸, 而發出轟然巨響, 其只是為了達到聲光效果, 並沒有學理上的依據。

聲音資料型態 聲音的形成是先由發聲源發出聲波之後, 經由氣體、液體或固體介質的傳播, 逐漸擴散出去。而隨著聲波傳播的距離越遠, 單位面積的能量也越少, 使得聲音越來越小。 除了以肢體語言溝通之外, 聲音是人類能彼此傳達訊息的重要媒介之一。而電腦在加上了聲音之後, 也使得人類的感受更加地身歷其境。底下, 我們介紹電腦中數位聲音的重要技術, 及常見的聲音格式。

數位聲音的形成原理 要把空中傳播的類比聲音轉換成電腦的數位聲音, 需先經由麥克風收音之後, 再由電腦進行類比/數位聲音的轉換, 轉換之後才能儲存在電腦中。

數位聲音的形成原理 而將類比聲音轉換成數位聲音時, 決定轉換後聲音品質好壞的因素, 主要有以下 2 點： 取樣頻率：每秒鐘聲音取樣的次數, 單位為赫次 (Hz, 每秒鐘幾次)。例如取樣頻率為 96 K 赫次, 即表示每秒鐘取樣為 96 × 1024 次。取樣的頻率越高, 聲音的品質就會越好, 缺點則是需要越多的儲存空間, 及更多的電腦運算時間。目前音樂 CD的取樣頻率為 44.1 K 赫次, AM 收音機為 11.025 K 赫次。

數位聲音的形成原理 取樣大小：當對聲波取樣時, 每個取樣樣本要用幾個位元表示。例如取樣大小為8 bits, 即表示每個樣本以 8 bits 表示, 因此其聲音大小可用 0 到 255 之間的數字來表示 (2 的 8 次方為 256)。取樣的位元數越高, 聲音的品質也會越好, 但需要更多的儲存空間, 及更多的電腦運算時間。目前一般音樂 CD 的取樣大小為 16 bits, AM收音機則為 8 bits。

聲音的資料量 一段聲音資料量的大小, 是由取樣頻率及取樣大小所決定。如剛剛所述, 音樂 CD的取樣頻率是 44.1 K 赫次, 而取樣位元數為 16 bits。 所以如果錄一段長度為 10 秒鐘, 且具 CD 品質的聲音, 則其所用掉的資料量如下 (請先將 16 bits 換算為 2 bytes)：

聲音的資料量 不過, 現在有些聲音格式在儲存時會進行壓縮, 並會加上其他有關此聲音的資訊, 因此實際聲音檔案的大小要等到存檔之後才會知道。

常見的聲音格式 MIDI 聲音格式：MIDI 檔採用的是電腦的合成音效。實際上, MIDI 格式並不是一段錄好的聲音, 而是一連串要求音效卡發出內建音源所組成的聲音。檔案特別小,一段 30 秒長度的 MIDI 音樂, 大約只有 4 K ~ 5 Kbytes 而已, 相當適合於網路上的傳輸, 不過若用來錄製真實的聲音, 其效果就不甚理想。

常見的聲音格式 WAV 聲音格式：此種檔案的原理與 MIDI 檔不同, 它是透過取樣的方式, 將聲音記錄下來, 因此所需佔用的空間量相當大。若取樣頻率越高, 所產生的資料量也越大,但也越能接近不失真的效果。

常見的聲音格式 MP3 聲音格式（Mpeg Audio layer 3) ：有鑑於 WAV 聲音所佔用的空間實在太大, 因此就產生了 MP3 的聲音格式。其利用 MPEG 壓縮法將音樂進行失真性壓縮, 一段 50 MB 左右的 WAV 檔轉成 MP3 格式之後, 往往只剩下 4、5 MB。雖然 MP3 是採用失真性壓縮的演算法, 但其聲音的品質還是很高, 一般人並無法聽出轉換前後的細微差別。同時也因為儲存空間的大幅減少而廣受歡迎。

常見的聲音格式 RealAudio 聲音格式：這是由 Progressive Networks 公司所發展出來的。它是一種壓縮的音效檔, 可經由 Real Player 提供即時解壓縮, 將聲音還原後加以播放。它可以一邊傳輸檔案一邊播放聲音, 不像以上的 3 種檔案格式, 必須將檔案完整下載後, 才能播放。

常見的聲音格式 WMA 聲音格式：WMA 是微軟公司所推出的音樂格式。相較於 MP3, 它有更好的壓縮率及聲音品質, 同時也具有線上播放的能力, 是目前相當看好的音樂格式。

視訊資料型態 隨著科技文明的進步, 單只有影像或聲音已經不能滿足一般人的渴望, 同時結合影像及聲音的視訊已成為電腦視聽娛樂的必然趨勢。 視訊的形成原理 常見的視訊格式

視訊的形成原理 視訊是指聲音及連續影像以同步的方式播放。 就視覺而言, 要看到如動畫的效果, 是利用眼睛 “視覺暫留” 的特性, 在短時間內, 播放連續的畫面, 看來就會如同連續動作一般。 至於每秒鐘要播放幾張畫面, 才會達到動畫的效果, 則依播放的畫面數量而異。

視訊的形成原理 一般而言, 每秒只要播放 12 張以上, 就會有動畫的感覺。 而目前世界的電視訊號主要分成北美地區為主的 NTSC 及歐洲的 PAL 等 2 種規格, 其中 NTSC 每秒鐘需播放 30 張的畫面,PAL 則規定每秒 25 張。此外電影則為每秒 24 張。

視訊的形成原理 而決定視訊播放品質的好壞至少有以下幾點：每張影像的解析度、每秒播放的畫面數及聲音的品質。因此想要有更好的視訊畫面, 就需要有更好的解析度、每秒更多的畫面數及更理想的聲音品質。然而根據前兩節的資料量分析, 每秒鐘 24 ~ 30 張的影像將需要相當大的儲存空間。如果想更進一步利用網路進行線上播放, 非得要有相當高的頻寬才行。

常見的視訊格式 AVI 視訊格式：這是微軟公司於 1992 年針對 Video for Windows 軟體所推出的視訊格式, 由於其能妥善處理影像與聲音同步的問題, 在早期頗受到歡迎。不過, 其檔案大小相當地龐大, 比較不適合在 Internet 上使用。

常見的視訊格式 QuickTime 視訊格式：這是由 Apple 公司所發展出來的一種跨平台的多媒體格式(副檔名為 .mov 或 .qt), 在影音同步的效果也相當地不錯。由於各種作業平台都有支援 QuickTime 的播放軟體, 所以是 Internet 上常見的視訊檔格式之一。

常見的視訊格式 MPEG 視訊格式：這是由 Moving Picture Experts Group 組織所發展的視訊格式(副檔名為 .mpg 或 .mpeg), 在影片壓縮率方面最高可達 200：1, 而使得檔案大小大幅減少, 因此廣受歡迎。

常見的視訊格式 RealVideo 視訊格式：由 Progressive Networks 公司所研發, 也是目前 Internet 頗為普及的視訊格式 (副檔名為 .rm)。其壓縮率也相當好, 可以做到即時解壓縮與播放, 適合用於線上轉播的場合。

常見的視訊格式 WMV 視訊格式：WMV 是微軟公司所推出的視訊格式, 有相當好的壓縮比, 也可以用於線上轉播。當進行線上轉播時, 若有良好的頻寬, 將可達到接近 DVD 品質的視訊效果, 是最近頗受歡迎的視訊格式。

常見的視訊格式 SWF：副檔名為 .swf 的檔案是目前相當風行的網頁動畫格式, 由 FLASH 等軟體所製作而成, 大多以嵌入在網頁的方式呈現, 有時也會製作成 .exe 格式的執行檔, 讓Windows 作業系統的電腦能夠直接執行。