圖片是網頁設計工作中極重要的一環,不論是設計階段的切版,或網站維護階段的圖文內容更新,都需要了解圖檔的正確使用方法。選擇正確的圖檔格式不但能讓網頁畫面呈現最佳狀態,同時也對網站訪客帶來好的使用經驗。

由於近年來新版瀏覽器對SVG格式的支援,SVG向量格式的優勢也取代了GIF/PNG的使用。

 

JPG、GIF、PNG、SVG檔比較表

圖檔

GIF檔

JPG檔

PNG檔

SVG檔

漸層色彩

不佳

透明背景


(IE6以下不支援透明背景)

支援動畫效果

檔案大小

較小

較大

適用時機

  1. Icon圖示
  2. 圖片無漸層色彩
  3. 圖片需透明背景
  4. GIF動畫
  1. 全彩照片
  2. 含漸層色彩的圖片
  1. 網頁介面
  2. 圖片需漸層又透明的背景
  1. Icon圖示
  2. 圖片需透明背景
  3. 向量格式的圖片

 

SVG檔的特色

  1. 目前網頁上唯一的向量格式圖檔
  2. 檔案內的文字可被google搜尋到
  3. 可以任意放大圖片,也不會失真
  4. 可用程式碼來描繪圖像
  5. 可以支援動畫

 

GIF檔的特色

  1. 網頁讀取速度最快 (檔案最小)
  2. 唯一支援動畫效果的格式
  3. 支援色彩最少 (失真嚴重)

下圖為GIF檔壓縮為「32色」的壓縮結果

網頁設計 gif檔

 

JPG檔的特色

  1. 網頁讀取速度中等
  2. 唯一不支援背景透明的格式
  3. 支援色彩中等

下圖為JPG檔壓縮品質為30的壓縮結果:

網頁設計 jpg檔


PNG檔的特色

  1. 網頁讀取速度最慢 (檔案最大)
  2. 支援色彩與效果最多,最精緻 (漸層、透明、不失真)
  3. IE6以下不支援PNG檔的透明背景

下圖為PNG格式為「PNG8」的輸出結果

網頁設計 png檔

 

CADIIS凱士網頁設計公司,專為中小企業設計、規劃、建置網站

RWD網頁設計 | 網站系統建置 | 客製程式開發 | SEO優化 | 商業攝影 | 主機空間 | 維護諮詢

 

整體
規劃
從產業策略洞悉到網頁設計
專精RWD網頁技術及SEO架構
簡約
設計
堅持化繁為簡的設計理念
讓網頁用戶專注您的產品服務
彈性
管理
透過全站式網站管理系統
讓您隨時調整網站架構與內容
維護
諮詢
不論是網站維護諮詢或網站行銷
我們是您長期的網路策略夥伴
REVIEWS
  • 對於中小企業而言,在費用效益的考量下,想擁有一個簡潔明瞭並符合企業文化的公司網站,並不是件易事!經由此次與凱士的合作,從網站設計發想到最後的內容定稿,溝通順暢,工作進程掌控適當,問題排解得宜,進而可達到成立公司網站的目標。此次非常感謝凱士提供的服務,這是令人印象深刻的合作案!

    相成貿易, 2018
  • 自從網站改版後,搜尋排序漸漸提升也收到更多詢問信件,非常感謝凱士幫忙,讓我們的網站揮別以往單調無趣的感覺,呈現出全新的風格,在這個專案合作過程中,可以很明顯的感受到凱士的專業與熱忱,從開始到結束,每一次的溝通討論都很用心,有問必答而且一點都不馬虎,從凱士這裡我們學到很多網站相關的資訊,像這樣的團隊並不容易找,非常值得推薦給正在找網頁設計公司的大家!

    高野機械, 2018
  • 從網站規劃到完成,發現凱士數位細心及專業度都很足夠,如果有下一次機會,我們還是會再給凱士數位施作。

    康普材料, 2017
  • Eric是個非常有經驗的專案經理,了解客戶的需求,並能快速釐清卡關障礙並迅速排除、總是從專業角度分析及建議怎麼做會比較好、和客戶一起腦力激盪,如期如質將網站建置專案完成,並提供相當有用的SEO建議及訣竅。結案後的諮詢及微調修改,凱士的專業團隊也總是非常及時給予支援,維護與管理的服務也同樣令人放心!

    HEF, 2017
  • 作為材料界的國際化公司,誌陽需要的不只是內容完整,還需要情境來提供目標客戶知的權益!正由於這個堅持我們找上了CADIIS幫我們完成這些規劃。在互動的過程中可以看出他們的用心,除了提供以往經驗讓我更容易感受外,對於我們不斷提出高門檻的技術問題也能以最快的時間完成使命,如果你沒法感受我的心情,不妨進到我們網站去感受吧!www.allightec.com 好東西就是要跟好朋友分享。

    誌陽科技, 2017
網頁設計獲獎

設計獲獎 AWARD

台灣廣告主協會與動腦雜誌聯合主辦「台灣50家最佳設計公司」票選活動,CADIIS榮獲入選「傑出多媒體設計公司」。
 

 

有任何網頁設計問題?

跟我們說說您的網站構想,或是目前面臨的網站規劃問題

我們將與您聯絡、共同討論解決方案。

 

網頁設計洽詢