訪客 您好!
 1 解析度 (resolution) 2 圖檔大小與流量 3 控制圖檔大小 4 圖片規格建議 5 Free Blogger與商業網站在用圖上的差異 6 IMDB用圖策略為例
| | | 檢視方式: 簡易 | 標準  | |
|
| i Explain |
2009-06-02 16:57 |
|
|
 |
|
照片或插圖,輔助作者表達,協助讀者理解、認識該主題。 |
| |
 | 數位化的圖檔,(寬的格點數X高的格點數=像素)與圖檔容量大小(KByte),以一個檔名(Filename)儲存在自己的硬碟,透過後端上傳到自己網站的圖片上載區(Upload area),提供網頁引用其所在位址(URL)。
圖片處理軟體 下載 XnView | |
 |
目錄相關字詞
| |
圖 | → |
|
目錄
1 解析度 (resolution) 2 圖檔大小與流量 3 控制圖檔大小 4 圖片規格建議 5 Free Blogger與商業網站在用圖上的差異 6 IMDB用圖策略為例
|
|
| → |
| |
| → |
圖片
|
章節說明1 解析度 (resolution)
像素(Pixel)=寬的格點數X高的格點數,解析度 DPI:像素/面積 每平方英吋有多少像素,解析度 PPI:像素/長度 每英吋有多少像素,(Pixel Per Inch)。
| |
2 圖檔大小與流量
圖的檔案佔用儲存量的大小。在網路上的圖片與出版物不同,除了有儲存空間的考量外,更要重視的是,它將佔用交通流量(Traffic)。一般原圖如果使用較高解畫質的輸出,圖雖然可以有更好、更經緻的呈現,但是也會用到更多的頻寬。
只要跟頻寬有關,就會直接影響等待時間的長短。 例如當使用者頻寬是512k時,即每秒 Loading 64k的環境條件下 同樣一張圖,A一張20K,等它Loading要 0.3 sec,B另一張200K,則需要 3.1 sec,B比A慢 2.8sec; 當一頁裡有5張的圖時,A 需1.6sec Loading 完成,B需要15.6sec,B比A慢 14sec; 當5張圖同時有10人瀏覽時,A可以維持在16sec內完成,B可能就會超過兩分鐘 (156sec)將近3min的時間,像是在考驗讀者的耐心。
即時我是全世界最無聊的人,當我上網時,我也會與一般人一樣,認為時間是寶貴的。 當然上述的計算值是以靜態網頁的情形下,只有考慮到圖的Loading,也沒考慮文字的Loading及基本的HTML程式碼,要是動態網頁資料庫的設計,則還會多出程式的執行時間,所以除了還需要考慮圖文的數位量,也要留一滴滴的時間給程式。
| |
3 控制圖檔大小
執行圖片的大小減裁與壓縮。 訂定自己的圖片規格,讓圖片儘量有一致的大小,加上圖文 Layout 設計(圖文區塊)的格式運用,這樣比較能夠累積經驗,也有助於整體的視覺表現,更能方便讀者瀏覽習慣的建立。
| |
4 圖片規格建議
寬高的建議 方形規格:最方便建立圖文區塊,是最容易安排的規格。 定寬規格:適合數個圖文區塊,以垂直排列。 定高規格:適合數個圖文區塊,以水平排列。
圖檔大小的建議 以50k為上限。 以400x400的圖為例,約在10k~25k最佳。使用美工應用軟體,學會有技巧地壓縮而不失真的操作技術。 如果特別要求畫質的圖而且數量多時,建議以Zip或Rar將檔案打包成一個檔案,以下載的方式提供給讀者。 有圖比沒圖好,如果品質可以接受的程度下,犧牲一些畫質是可以接受的,因為圖多比圖少好。 ( 圖的數量x圖檔大小=固定的常數)
| |
5 Free Blogger與商業網站在用圖上的差異
申請免費空間的個人blog,一般都不會去考量Traffic與規格,因為頻寬與他無關,是Host的問題,Host因為要對廣告商交代,所以有可能使用兩個不同的頻寬的Host,一個給人免費放blog,另一個放贊助商的廣告,也就是最優先出現的是廣告,然後是blog的文字,最後才是笨重的圖片。如果大多數blog的站長不去考慮這點,若秉持著高畫質大圖不失真,結果當然 Loading 會很重,會讓使用者等很久。
很有趣的現象,用圖來表現同樣的東西時,商業網站上反而比Free Blogger上的少、小,真正讓他們「不慷慨」的原因是: 商業網站則必須為站內整體的輸出效能負責,所有的資訊內容必需要有較一致的規格。要考量輸出效率,要配合商務機制的應用,所以反而會設定較嚴謹的規格,包括圖片大小、容量、圖文區塊的數目、整個單位文件的數位量等,為的是讓網站能有效管理並能永續經營,來讓網站同時服務消費者與讀者,發揮商務與資訊的最大效益。
| |
6 IMDB用圖策略為例
IMDB IMDB
- 全球電視電影資料庫(資訊),賣DVD(商務),也賣院線電影票的網站(聯合商務),一般找電影資訊常會來到此站。
- Chuck這頁:
- 裡面電影海報(94X139)5K,1張
- 劇照(90X90)約4.8K,8張
- 演員(23X32)0.9K,12張
- 相關電影(93x109)3.8k,5張
- 水平與垂直選單列的link約有70個
- 主要內容裡的link約有80個
- 特色:圖小、圖檔小、連結(link)多
URL
- 若圖檔大且精緻,Loading要更久,容易被引用也會吃掉自己的流量,防他站引用要花自己研發的時間,不防的話讓別人佔用太大的資源。
- 圖檔夠輕,輸出等待的時間才能短,使用者選擇的機會才多。
- 省下越多時間,網站資料庫才可以越大。
- 資料庫越大被搜尋到的機會才會增加,users才能增加。
- 想像一下,同質競爭對手如果採用一樣的網站作業方式,但卻沒有圖檔規格與上限,那麼會怎樣?
- 想一下,IMDB文字連結(link)為什麼會這麼多?
- 資料庫與資料庫間產生索引化的關聯性,創造出更多資訊流節點,導引讀者快速地到達所要閱讀的網頁。
- SEO策略,將資料主從關係的從屬性相對化,每一則都可以獨立在最高點。
| |
| |  | 相關字: 網路, 管理, 服務, areA, 設計, 程式, 資料庫, 時間, upload, 效率, 應用, 搜尋, LOG, 上傳, 圖片, 站長, 效能, 研發, 軟體, 機制, 花, 後端, 下載, user, 效益, 電視, 資訊流節點, SEO, 資訊流, 圖, 流, 資料,
|