areA 商務工作平台

建站服務館 | KM知識庫 | 客戶支援
  前線網路科技
營業項目   基礎 5 主機 3 系統 6 設計 4 企業 3 門市 7 專業人士 3 組織 3 程序管控 3 市場行銷 5 管理 7
部門    業務服務 11 技術支援 8 系統管理 17 研究發展 6 營運管理 7
   areA 商務工作平台
  
首頁
e化專欄
建站服務
合作
留言
工具書
員工
更多
 客戶專區
   Welcome 使用者 訪客   





1 解析度 (resolution)
2 圖檔大小與流量
3 控制圖檔大小
4 圖片規格建議
5 Free Blogger與商業網站在用圖上的差異
6 IMDB用圖策略為例

  已定義的字詞(+ -) 22
  未定義的字詞(+ -) 23

回首頁 | 工具書索引 | 更新記錄 | 回上一頁

    檢視方式: 簡易 | 標準
工具書索引
依字詞組別
資料來源數
依字首
人氣字詞
| 查看 "" 在e化專欄,建站服務,合作,留言 等地方的搜尋結果 (5)...more 151 | ""相關圖

網頁設計
Explain:
2009-06-02 16:57


來自: 網頁設計 工具書 (at997)
  • HTML網頁、CIS、LOGO、商品圖文設計
    出處原址:



  • 照片或插圖,輔助作者表達,協助讀者理解、認識該主題。

    數位化的圖檔,(寬的格點數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,


    [站長編輯]

    ERB-wiki 線上工具書

    areA 商務工作平台    5大商務套件套件:bn01.客戶資料管理、bn02.商品資料管理、bn03.結帳台(線上收銀機)、bn04.報價管理、bn05.庫存管理。
    Powered areA Web Tech.(cdv.112_63:9-6-6----)CDMS