訪客 您好!
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, 資訊流, 圖, 流, 資料,
|
圖 相關字詞解釋: 
